Meerdere manieren om content te vinden

Je zoekt een specifieke pagina op een website. De navigatie heeft tientallen menu-items en je hebt geen idee waar je moet kijken. Had er maar een zoekfunctie gezeten. Of een sitemap. Dat is precies het punt: bezoekers moeten altijd via minimaal twee manieren een pagina kunnen bereiken.

In dit artikel leg ik uit waarom je bezoekers meerdere manieren moet bieden om pagina’s te vinden. Dat is een vereiste van succescriterium 2.4.5 Meerdere manieren van de richtlijnen voor toegankelijkheid van webcontent.

Waarom meerdere manieren?

Niet iedereen navigeert op dezelfde manier. Mensen die een schermvergroter gebruiken, vinden het vaak makkelijker om te zoeken dan om door een groot navigatiemenu te scrollen. Mensen met een cognitieve beperking hebben soms meer aan een sitemap die overzicht geeft dan aan een uitgebreide menustructuur. En sommige bezoekers willen gewoon pagina voor pagina door je website bladeren om de opbouw te begrijpen.

Door meerdere navigatiemethoden aan te bieden, geef je iedereen de kans om content te vinden op de manier die het beste bij hen past. Dat is niet alleen prettig, maar ook verplicht op AA-niveau.

Beide manieren moeten beschikbaar zijn op de pagina’s zelf. Een zoekfunctie die alleen op de homepage staat, helpt bezoekers op andere pagina’s niet verder. Zorg dat je navigatiemethoden op elke pagina bereikbaar zijn.

Wat zegt WCAG precies?

Er is meer dan één manier beschikbaar om een webpagina binnen een verzameling webpagina’s te vinden, behalve wanneer de webpagina het resultaat is van, of een stap in, een proces.

Dit criterium geldt voor elke pagina die onderdeel is van een “verzameling webpagina’s”. Dat betekent: een groep pagina’s met een gezamenlijk doel, gemaakt door dezelfde organisatie. Denk aan alle pagina’s van een website die dezelfde navigatie en huisstijl delen. Verschillende taalversies tellen als aparte verzamelingen. Een blog of subdomein met een eigen navigatie en eigen redactie kan ook een aparte verzameling zijn.

Je hebt minstens twee verschillende manieren nodig. Die twee manieren moeten echt verschillend zijn. Een hoofdnavigatie en een footer die exact dezelfde links bevat, tellen samen als één manier.

Welke pagina’s vallen onder dit criterium?

Het criterium spreekt over “een webpagina binnen een verzameling webpagina’s”. Dat betekent dat elke afzonderlijke pagina via minstens twee manieren te vinden moet zijn. Ook elk nieuwsbericht, elke productpagina en elke FAQ.

Maar “vindbaar via twee manieren” betekent niet dat elke pagina direct vanuit twee plekken gelinkt moet zijn. De route mag indirect zijn. Een navigatiemenu dat naar een nieuwsoverzicht leidt waarop de individuele berichten staan, is één manier. Een zoekfunctie waarmee je dat bericht op trefwoord kunt vinden, is de tweede. Samen is dat voldoende.

Een HTML-sitemap hoeft dus niet iedere pagina afzonderlijk op te sommen. Het is voldoende als de sitemap naar secties of overzichtspagina’s linkt, zolang bezoekers van daaruit de individuele pagina’s kunnen bereiken.

Waar het wél misgaat is bijvoorbeeld een nieuwsbericht dat niet in de zoekresultaten zit én niet via een overzichtspagina te bereiken is. Of een landingspagina die alleen via een link in de footer beschikbaar is.

Uitzondering: pagina’s in een proces

Het criterium kent één uitzondering: pagina’s die het resultaat zijn van een proces, of een stap in een proces. Een proces is een reeks handelingen die je achter elkaar moet uitvoeren om iets af te ronden.

Denk aan de stappen in een bestelproces (winkelwagen, adresgegevens, betaling, bevestiging), een stap in een aanmeldformulier met meerdere schermen, de resultatenpagina van een zoekopdracht of een bevestigingspagina na een bankoverschrijving.

Deze pagina’s kun je alleen bereiken door het proces te doorlopen. Het zou niet logisch zijn om er een tweede route naartoe te bieden.

De uitzondering geldt alleen voor de processtappen zelf. Productpagina’s in een webshop zijn geen processtappen, ook al leiden ze naar een bestelproces. Blogberichten, hulppagina’s en categoriepagina’s vallen ook niet onder de uitzondering.

Welke manieren zijn er?

WCAG beschrijft verschillende technieken die je kunt combineren. Je hebt er minstens twee nodig.

Navigatiemenu: De meest gebruikte methode. Een consistent navigatiemenu dat op elke pagina staat en bezoekers naar de belangrijkste onderdelen van je website brengt.
Zoekfunctie: Een toegankelijk zoekveld waarmee bezoekers content vinden op basis van trefwoorden. Dit is vooral handig voor mensen die de structuur van je website niet kennen of niet willen doorlopen. De zoekfunctie moet wél werken: een zoekveld dat geen relevante resultaten geeft of niet met het toetsenbord te bedienen is, telt niet mee.
HTML-sitemap: Een pagina met links naar alle of de belangrijkste secties van je website. Dit geeft bezoekers een overzicht van de volledige structuur. Let op: een XML-sitemap voor zoekmachines is iets anders. Die is bedoeld voor Google en niet voor je bezoekers. Alleen een HTML-sitemap die bezoekers kunnen gebruiken telt mee.
Inhoudsopgave: Een lijst met links naar de hoofdstukken of secties van een lange publicatie. Vooral nuttig voor handleidingen, e-books of meerdelige rapporten waarbij elk hoofdstuk op een eigen pagina staat. (Voor gewone websites overlapt dit grotendeels met een HTML-sitemap.)
Links tussen gerelateerde pagina’s: Elke pagina bevat links naar verwante content. Denk aan “Gerelateerde artikelen”, vorige- en volgende-links onderaan een pagina of de categorieën en tags van een post. Dit helpt bezoekers om op een natuurlijke manier door je website te bewegen.
Alle pagina’s bereikbaar vanaf de homepage: De homepage bevat links naar alle pagina’s, en elke pagina linkt terug naar de homepage. De homepage werkt dan als een soort sitemap. Dit is vooral praktisch voor kleine websites (minder dan 10 pagina’s).

De meeste websites redden het al met de combinatie van een navigatiemenu en een zoekfunctie. Voor grotere websites is het verstandig om daar een HTML-sitemap aan toe te voegen.

Wat maakt een zoekfunctie toegankelijk?

Een zoekfunctie telt alleen mee als bezoekers hem kunnen vinden én gebruiken. Bij een onderzoek zie ik regelmatig zoekfuncties die wel aanwezig zijn, maar in de praktijk weinig toevoegen omdat ze niet goed toegankelijk zijn.

Let op de volgende punten:

Geef het zoekveld een toegankelijke naam: Gebruik een zichtbaar <label>-element. Heb je geen ruimte voor een zichtbaar label, gebruik dan een aria-label-attribuut. Een schermlezer kondigt het veld dan aan als “zoeken”.
Toon een duidelijke zoekknop: Een knop met alleen een vergrootglas-icoon zonder tekstalternatief is onbruikbaar voor schermlezergebruikers. Geef de knop een zichtbaar tekstlabel of een aria-label="Zoeken"-attribuut.
Markeer de zoekfunctie als landmark: Gebruik <form role="search"> of het nieuwere <search>-element. Schermlezergebruikers kunnen dan direct naar de zoekfunctie springen via de landmark-sneltoets.
Maak het zoekveld breed genoeg: Een breedte van 25 tot 35 tekens is voldoende om een zoekopdracht te typen en te bewerken zonder dat de tekst wegvalt.
Zorg dat de zoekresultaten kloppen: Een zoekfunctie die geen of irrelevante resultaten geeft, telt niet mee als geldige manier. Test dit met realistische zoektermen.

Voorbeeld van een toegankelijke zoekfunctie:

<form role="search" action="/zoeken">
  <label for="zoekveld">Zoeken op deze website</label>
  <input type="search" id="zoekveld" name="q">
  <button type="submit">Zoeken</button>
</form>

Veelgemaakte fouten

Alleen een navigatiemenu: Dit is de meest voorkomende fout. Veel websites hebben alleen een navigatie in de header en dan geen zoekfunctie of sitemap. Dat is niet voldoende.
Onbruikbare zoekfunctie: Een zoekfunctie die niet met het toetsenbord te bedienen is, geen bruikbare resultaten geeft of verstopt zit achter een icoontje zonder toegankelijke naam, telt niet als een geldige navigatiemethode.
Methode verdwijnt op mobiel: Een zoekveld of sitemaplink die op desktop wel staat maar op mobiel verstopt zit achter een ontoegankelijk menu of helemaal wegvalt, telt op mobiel niet mee. Beide manieren moeten op elk schermformaat bereikbaar en bedienbaar zijn.
XML-sitemap in plaats van HTML-sitemap: Een XML-sitemap is bedoeld voor zoekmachines. Bezoekers kunnen er niks mee. Als je een sitemap wilt aanbieden, maak dan een HTML-pagina met links naar alle onderdelen van je website.

Vereisten en aanbevelingen voor meerdere manieren

Dit zijn de vereisten en aanbevelingen voor het aanbieden van meerdere navigatiemethoden.

WCAG-vereisten

Zorg dat er minstens twee verschillende manieren zijn om een pagina te vinden binnen je website.
- Kies uit een navigatiemenu, zoekfunctie, HTML-sitemap, inhoudsopgave, links naar gerelateerde pagina’s of een homepage die naar alle pagina’s linkt.
- De twee manieren moeten wezenlijk van elkaar verschillen. Twee keer dezelfde links op een andere plek is niet genoeg.

Aanbevolen

Zorg dat beide manieren werken op elk schermformaat. Een methode die op mobiel verdwijnt of verstopt zit, telt daar niet mee.
Bied drie of meer navigatiemethoden aan. Een combinatie van een navigatiemenu, een zoekfunctie en een HTML-sitemap werkt goed voor de meeste websites.
Zorg dat je zoekfunctie op elke pagina staat, met het toetsenbord te bedienen is en relevante resultaten geeft.
Plaats de link naar je HTML-sitemap in de footer, zodat bezoekers het makkelijk vinden.
Voeg ook een broodkruimelpad toe als je website een diepe hiërarchie heeft.

Gerelateerd succescriterium

Dit artikel behandelt het volgende WCAG-succescriterium 2.4.5 Meerdere manieren (niveau AA).