Een website kan honderden pagina’s bevatten zonder dat de bezoeker zich bewust is van de omvang. De sitemap, vaak onderaan de pagina geplaatst, blijft de enige plek waar de volledige architectuur van een domein in één oogopslag wordt weergegeven. Toch bepaalt de manier waarop deze sitemap is ontworpen of hij daadwerkelijk helpt bij de navigatie of dat hij een extra laag van verwarring toevoegt.
Sitemap en WCAG 2.2-naleving: wat verandert voor de navigatie
Concurrenten besteden veel aandacht aan navigatiemenu’s, soorten balken en goede ergonomische praktijken. Ze missen echter een recente normatieve invalshoek: de WCAG 2.2-criteria veranderen concreet de manier waarop een gedetailleerde sitemap moet worden opgebouwd.
Criteria 2.4.5 (Meerdere Wegen) vereist dat de gebruiker meer dan één pad heeft om elke pagina te bereiken. Een hoofdmenu is niet meer voldoende als de site meer dan een paar tientallen pagina’s bevat. De gedetailleerde sitemap wordt dan een conformiteitsmechanisme, geen eenvoudig gadget in de voettekst.
Criteria 2.4.11 (Focus Niet Verborgen) voegt een technische beperking toe: wanneer een bezoeker met het toetsenbord door een lange lijst met links navigeert, mag de toetsenbordfocus nooit achter een sticky header of een cookie-toestemmingsbanner verdwijnen. Voor een sitemap die soms honderden links toont, dwingt dit om de positionering van de vaste elementen op de pagina opnieuw te overdenken.
Criteria 2.5.8 (Doelgrootte) vereist dat elk klikbaar doel groot genoeg is om zonder fouten geactiveerd te worden. Een sitemap met een lettergrootte van 11 pixels met links die tegen elkaar aan staan, voldoet niet aan deze eis, zelfs als alle links technisch functioneren.
Een sitemap lezen: de hiërarchie herkennen voordat je klikt
Een gedetailleerde sitemap is alleen nuttig als de structuur de werkelijke hiërarchie van de inhoud weerspiegelt. Voordat ze klikken, moeten bezoekers in enkele seconden de grote categorieën, subcategorieën en de diepte van elke pagina kunnen identificeren. Bijvoorbeeld, je kunt de sitemap van By Caroline and CO bekijken om te zien hoe een duidelijke boomstructuur de inhoud thematisch organiseert zonder de lezer te overweldigen.
De meeste sitemaps beperken zich tot een platte lijst van links. De feedback uit het veld varieert hierover: sommige gebruikers geven de voorkeur aan een alfabetische lijst, anderen aan een thematische organisatie. De beschikbare gegevens bieden geen definitieve uitslag, maar een groepering per categorie met visuele inspringing vermindert de cognitieve belasting voor de meeste bezoekers.
Elementen die een leesbare sitemap onderscheiden van een nutteloze
- Descriptieve linktitels die de werkelijke titel van de doelpagina weergeven, geen generieke labels zoals “meer informatie” of “klik hier”.
- Een inspringing of een bullet-systeem dat de diepteniveaus (categorie, subcategorie, eindpagina) visualiseert.
- Een stabiele logische volgorde, identiek aan die van het hoofdmenu, om te voldoen aan het WCAG 3.2.3-criterium (Consistente Navigatie).
- Een visuele scheiding tussen thematische blokken, zelfs als het alleen maar een extra witruimte is.
HTML-sitemap en XML-sitemap: twee tools, twee functies
De verwarring is vaak aanwezig. De HTML-sitemap is een pagina bedoeld voor menselijke bezoekers. De XML-sitemap is een technisch bestand bedoeld voor de indexeringsrobots van Google en andere zoekmachines. Beide hebben dezelfde naam, maar ze dienen niet hetzelfde publiek.
De XML-sitemap somt alle URL’s op met hun metadata (wijzigingsdatum, updatefrequentie, relatieve prioriteit). Het is niet bedoeld om door een mens gelezen te worden. Daarentegen bevat de HTML-sitemap niet noodzakelijkerwijs alle URL’s: hij presenteert de pagina’s die nuttig zijn voor de bezoeker, gegroepeerd op een begrijpelijke manier.
Wanneer de HTML-sitemap de interne zoekfunctie aanvult
Een interne zoekmachine helpt wanneer de bezoeker weet wat hij zoekt. De sitemap helpt wanneer hij dat nog niet weet. Het is een verkenningstool, geen zoekopdracht. Op sites waarvan de inhoud sterk is gesegmenteerd (productcatalogus, blog met honderden artikelen, institutionele site met meerdere takken), blijft de HTML-sitemap de enige manier om het volledige bereik te visualiseren zonder zoekwoorden in te voeren.
Sites die beide aanbieden (interne zoekfunctie en gedetailleerde sitemap) dekken beide navigatiemodi: actieve zoekopdracht en passieve verkenning. Het verwijderen van de een ten gunste van de ander betekent het sluiten van een toegangspad.
Een sitemap ontwerpen die werkt op mobiel
Op een desktop scherm blijft een sitemap in drie kolommen met een honderdtal links leesbaar. Op mobiel wordt dezelfde sitemap een muur van tekst die onmogelijk te scannen is. Aangezien het merendeel van het webverkeer van mobiele apparaten komt, verliest een sitemap die alleen voor desktop is ontworpen het grootste deel van zijn publiek.
Twee benaderingen werken op een klein scherm. De eerste is het gebruik van inklapbare secties (accordeons) per categorie: de bezoeker vouwt alleen het blok uit dat hem interesseert. De tweede is gebaseerd op navigatie via interne ankers bovenaan de pagina, waarbij elk anker naar de bijbehorende sectie verderop verwijst.
In beide gevallen blijft het naleven van het WCAG 2.5.8-criterium over de grootte van de doelen relevant: te kleine of te dicht bij elkaar staande links op een touchscreen leiden tot tikfouten. Een minimale ruimte tussen elke klikbare link voorkomt dit probleem zonder de lay-out te verzwaren.
Bekende beperkingen van sitemaps op zeer grote sites
Bij meer dan enkele duizenden pagina’s wordt een uitgebreide HTML-sitemap zelf een navigatieprobleem. Sommige e-commerce- of mediaplatforms kiezen dan voor een gedeeltelijke sitemap, beperkt tot de belangrijkste categorieën en de meest bezochte pagina’s. Deze pragmatische benadering accepteert dat een sitemap geen vervanging is voor een volledige navigatiestructuur, maar een aanvulling daarop vormt.
De gedetailleerde sitemap blijft een ondergewaardeerd navigatietool. De waarde ervan ligt niet in de volledigheid van de links die hij bevat, maar in de helderheid van hun organisatie. Een slecht gestructureerde sitemap voegt ruis toe. Een goed ontworpen sitemap biedt de bezoeker een leesbare kaart van het gebied, ongeacht het gebruikte apparaat.