Navigatie
Goed kunnen navigeren is belangrijk voor het vinden van informatie. Een duidelijke en logische indeling van de pagina helpt daarbij. Skiplinks en duidelijke titels en linkteksten maken het makkelijker om door de website te navigeren. Zorg dat het navigeren voor iedereen toegankelijk is, zodat iedereen de inhoud kan vinden.
Consistente hulp: als sjabloononderdeel
De oplossing is een afspraak en geen techniek. Kies één plek voor de hulp en wijk daar niet van af.
Bouw het als één sjabloononderdeel en zet dat op elke pagina neer. Dan kán het niet verspringen, want er is maar één plek waar het vandaan komt:
<!-- in de voettekst, op elke pagina, in deze volgorde --> <h2>Contact</h2> <dl> <dt>E-mail</dt><dd><a href="mailto:info@voorbeeld.nl">info@voorbeeld.nl</a></dd> <dt>Telefoon</dt><dd><a href="tel:+31000000000">000 – 00 00 000</a></dd> </dl> <p><a href="/contact/">Bezoek de contactpagina</a></p>Een chatknop rechtsonder mag, zolang hij op elke pagina rechtsonder staat. Verspringt hij naar linksonder op de bestelpagina omdat daar een knop in de weg zat, dan voldoet de site niet meer.
Let erop dat de hulp niet over de inhoud valt als iemand inzoomt. Dat raakt 1.4.10 Reflow en 2.4.11.
DoelgroepenSuccescriteriaWie het raaktHulpmiddelenLinktekst
Geef elke link een beschrijvende linktekst die het doel van de link uitlegt. Linkteksten zoals ‘lees meer’ of ‘klik hier’ zijn niet duidelijk genoeg. Daarom is het belangrijk om linkteksten te gebruiken die zelf aangeven waar de link naartoe leidt. Zo is gemakkelijk het verschil te zien tussen verschillende links op dezelfde pagina.
Schermlezers kunnen een overzicht van alle links presenteren. Zo kan snel worden genavigeerd naar de inhoud.
Als het echt niet anders kan, dan mag ook nog de context van de link worden gebruikt om het doel van de link te beschrijven. Bijvoorbeeld dezelfde zin, paragraaf of in dezelfde tabelcel. Dit kan bijvoorbeeld door het verbergen van een deel van de linktekst met CSS.
In de code zit dat er zo uit:
<a href="info.html">Lees meer <span class="sr-only"> over digitale toegankelijkheid</span></a>.sr-only { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }De linktekst kan eventueel in de code ook worden uitgebreid met het
aria-label-attribuut of met hettitle-attribuut.In de code ziet dat er zo uit:
<a href="info.html" aria-label="Lees meer over digitale toegankelijkheid">Lees meer</a> <a href="info.html" title="Lees meer over digitale toegankelijkheid">Lees meer</a>Let op: Linkteksten die worden uitgebreid met behulp van CSS of het
aria-label-attribuut zijn alleen zichtbaar voor bezoekers die gebruik maken van een schermlezer.DoelgroepenSuccescriteriaWie het raaktVaste namen: wat het criterium vraagt
Onderdelen die hetzelfde doen horen overal dezelfde naam te krijgen. Dat geldt voor de zichtbare tekst en voor het alternatief van een pictogram. Heet dezelfde knop op de ene pagina “Zoeken”, op de andere “Zoek”, en staat er elders alleen een vergrootglas zonder tekst, dan is dat voor wie kijkt één ding en voor wie luistert drie.
Waar het vaak misgaat:
- Een pictogram zonder tekst, met per pagina een ander alternatief: “zoeken”, “zoek”, “vergrootglas”.
- Downloadlinks: “Download pdf”, “Pdf downloaden”, “Bekijk het rapport” — voor hetzelfde bestand.
- De knop die een formulier verstuurt: “Versturen”, “Verzenden”, “Aanvragen”, “Ok”.
- Een sluitkruisje dat de ene keer “Sluiten” heet en de andere keer “Annuleren”.
Dit telt het zwaarst bij spraakbediening. Wie zijn computer met zijn stem bedient zegt “klik Zoeken”. Heet de knop op die pagina “Zoek”, dan gebeurt er niets.
Dezelfde naam voor twee dingen die iets anders doen is de omgekeerde fout. Twee links die allebei “Lees meer” heten maar naar verschillende pagina’s gaan, botsen met 2.4.4.
DoelgroepenSuccescriteriaWie het raaktHulpmiddelenPaginatitel
Webpagina’s moeten een titel hebben die het onderwerp of doel van de pagina beschrijft. Met een goede paginatitel kunnen gebruikers een pagina gemakkelijk terugvinden als er bijvoorbeeld meerdere tabbladen open staan.
De paginatitel wordt ook gebruikt door mensen die een schermlezer gebruiken om snel een idee van de inhoud van de pagina te krijgen.
Een paginatitel voor een webpagina wordt gegeven met het
<title>-element in het<head>-element. In het<title>-element moet altijd tekst staan.In de code ziet dat er zo uit:
<html lang="nl"> <head> <title>WCAG.nl - Digitale toegankelijkheid voor iedereen</title> ...DoelgroepenSuccescriteriaWie het raaktBedekte focus: scroll-margin
De browser schuift een onderdeel net binnen beeld zodra het de focus krijgt. Hij houdt daarbij geen rekening met een balk die eroverheen ligt, want die kent hij niet. Met
scroll-margingeef je die ruimte op.:where(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-block-start: 120px; /* de hoogte van de koptekst */ scroll-margin-block-end: 90px; /* wat er onderaan blijft staan */ }Zet de bovenwaarde op de hoogte van de koptekst en de onderwaarde op wat er onderaan blijft staan. Verschilt die hoogte per schermbreedte, zet hem dan in een variabele.
Dit werkt alleen als de browser moet scrollen. Staat het onderdeel al in beeld en valt er toevallig een chatknop overheen, dan gebeurt er niets. Laat zo’n knop dan wijken zodra er iets de focus heeft, en zorg dat de knop daarna nog bereikbaar blijft.
body:has(:focus-visible) .chatknop { opacity: 0; pointer-events: none; }De eenvoudigste oplossing is een balk die niet meescrolt. Een koptekst die gewoon bovenaan de pagina staat kan per definitie niets bedekken, en kost geen onderhoud.
DoelgroepenSuccescriteriaWie het raaktHulpmiddelenVaste namen: de namen vastleggen
Dit is geen technisch probleem. Het ontstaat doordat verschillende mensen op verschillende momenten een knop een naam geven. De oplossing is een afspraak.
Maak een lijst met de tien tot twintig onderdelen die overal terugkomen, en spreek per stuk één naam af:
Zoeken (niet: Zoek, Vind, Search) Versturen (niet: Verzenden, Ok, Aanvragen) Sluiten (niet: Annuleren, Terug, X) Download pdf (niet: Pdf downloaden, Bekijk pdf) Neem contact op (niet: Contact, Mail ons)Een pictogram zonder tekst heeft een naam nodig die niet zichtbaar is. Gebruik overal dezelfde:
<button aria-label="Zoeken"> <svg aria-hidden="true">…</svg> </button>Staat er wel tekst naast het pictogram, dan is die tekst de naam. Zet het pictogram dan op
aria-hidden, anders wordt de naam twee keer voorgelezen.Let op de vertaling van je thema. Knoppen die uit WordPress of een plugin komen — “Lees verder”, “Vorige”, “Zoeken” — hebben hun eigen vertaling, en die kan afwijken van wat er elders op de site staat. Dat is een van de vaakst gemiste oorzaken van deze fout.
DoelgroepenSuccescriteriaHulpmiddelenVaste volgorde op elke pagina
Navigatiemenu’s en onderdelen die op meerdere webpagina’s voorkomen, moeten telkens in dezelfde volgorde worden geplaatst. Zorg dat deze volgorde zowel in de vormgeving als in de code hetzelfde is.
Een consistente navigatie- en paginastructuur maakt het voor iedereen makkelijker om te navigeren door de website en informatie op een pagina te vinden. Ook bezoekers die gebruik maken van schermlezers kunnen hierdoor sneller en efficiënter hun weg vinden.
DoelgroepenSuccescriteriaBedekte focus: zo test je het
Bovenaan de pagina staat een vaste balk op zijn plek en bedekt hij niets. De fout laat zich pas zien nadat de pagina is gescrold.
Ga als volgt te werk:
- Scroll een halve pagina naar beneden.
- Klik ergens in de tekst, buiten een link.
- Druk op Tab en kijk of het geselecteerde onderdeel zichtbaar is.
- Doe hetzelfde met Shift en Tab, dus omhoog. Daar gaat het het vaakst mis.
Voor dit criterium mag een deel bedekt zijn. Is er nog een stuk van de knop en de focusrand te zien, dan voldoet het. Is er niets te zien, dan niet. Bij twijfel is het antwoord meestal dat het niet genoeg is: een knop waarvan twee pixels zichtbaar zijn, is niet gevonden.
Dit script meldt elk onderdeel dat bij het krijgen van de focus wordt bedekt. Plak het in de console van de browser en tab daarna door de pagina:
document.addEventListener('focusin', function (e) { var r = e.target.getBoundingClientRect(); var boven = document.elementFromPoint(r.left + 4, r.top + 4); if (boven && boven !== e.target && !e.target.contains(boven)) { console.warn('bedekt door', boven, e.target); } });Elke melding is een plek om na te kijken. Het script vervangt de test niet, want het kent het verschil tussen gedeeltelijk en volledig bedekt niet.
DoelgroepenSuccescriteriaWie het raaktHulpmiddelenConsistente hulp: zo test je het
Deze test doe je met het oog en een handvol pagina’s.
Ga als volgt te werk:
- Kies vijf pagina’s die niet op elkaar lijken: de homepage, een dienstenpagina, een formulier, een artikel en een bevestigingspagina.
- Zoek op elke pagina alle vormen van hulp: telefoon, e-mail, contact, chat, veelgestelde vragen.
- Noteer waar ze staan en in welke volgorde.
- Leg de vijf lijstjes naast elkaar.
Waar het meestal misgaat:
- De bestelpagina zonder voettekst, bewust weggehaald om afleiding te voorkomen — precies waar een bezoeker vastloopt.
- Een chatknop die alleen op sommige pagina’s staat.
- Een telefoonnummer in de koptekst op de homepage en alleen in de voettekst op de rest.
- Een volgorde die wisselt: op de ene pagina eerst chat en dan telefoon, op de andere andersom.
Doe de test daarna nog eens op 200% zoom. Onderdelen die op een breed scherm naast elkaar staan komen dan onder elkaar, soms in een andere volgorde per pagina. Dat telt mee.
DoelgroepenSuccescriteriaWie het raaktHulpmiddelenVaste namen: zo test je het
Je zoekt onderdelen die hetzelfde doen maar anders heten. Die vind je door de namen naast elkaar te leggen.
Haal de namen op met dit script in de console:
[...document.querySelectorAll('button, a, [role=button]')] .map(function (el) { return (el.getAttribute('aria-label') || el.textContent).trim(); }) .filter(Boolean) .forEach(function (n) { console.log(n); });Doe dit op vijf verschillende pagina’s en zet de uitkomsten onder elkaar in een tekstbestand.
Waar je op let:
- Varianten van hetzelfde woord: zoeken, zoek, search.
- Knoppen die hetzelfde doen maar anders heten.
- Pictogrammen zonder naam. Die komen als lege regel terug.
- Namen die twee keer voorkomen maar iets anders doen. Dat is de omgekeerde fout.
Doe ook de test met je stem. Zet spraakbediening aan en zeg “klik Zoeken” op drie verschillende pagina’s. Werkt het niet overal, dan is de afwijking niet alleen aangetoond maar ook gevoeld.
DoelgroepenSuccescriteriaHulpmiddelenConsistente hulp: wat het criterium vraagt
Biedt een website op meerdere pagina’s hulp aan, dan hoort die hulp op elke pagina op dezelfde plek te staan, in dezelfde volgorde. Staat het telefoonnummer op de ene pagina rechtsboven en op de volgende ergens anders, dan raakt de bezoeker het kwijt op het moment dat hij het nodig heeft.
Het gaat er niet om óf er hulp wordt aangeboden — dat is een eigen keuze. Het gaat erom dat de hulp niet per pagina verspringt. Dit criterium is nieuw in WCAG 2.2 en staat op niveau A, dus het valt onder de wettelijke eis.
Als hulp telt:
- Een telefoonnummer of e-mailadres.
- Een link naar contact of een contactformulier.
- Een chatvenster of een chatbot.
- Een link naar veelgestelde vragen of een helpdesk.
- Een link naar een zelfhulppagina bij een specifieke stap.
Wordt er alleen een telefoonnummer aangeboden, dan sluit dat iedereen uit die niet kan bellen: wie doof is, wie moeilijk spreekt, of wie in een omgeving zit waar bellen niet kan. Zorg dat er altijd een schriftelijke weg naast staat.
DoelgroepenSuccescriteriaWie het raaktHulpmiddelenBedekte focus: wat het criterium vraagt
Een balk die vastgeplakt in beeld blijft staan kan het onderdeel bedekken waar de toetsenbordfocus net naartoe is gesprongen. De bezoeker ziet dan niet welk onderdeel is geselecteerd en weet niet wat er gebeurt bij het indrukken van Enter. Zorg daarom dat het onderdeel met de focus niet volledig bedekt wordt.
Een deel mag bedekt zijn, als de rest maar zichtbaar blijft. Dit criterium is nieuw in WCAG 2.2 en staat op niveau AA, dus het valt onder de wettelijke eis. Er is ook een strengere versie: 2.4.12 Focus niet bedekt (uitgebreid) op niveau AAA, waarbij er niets overheen mag staan.
De oorzaak is bijna altijd een van deze:
- Een menubalk die vastgeplakt bovenaan blijft staan.
- Een cookiemelding onderaan het scherm.
- Een chatknop in de hoek.
- Een balk met acties die verschijnt zodra de bezoeker scrolt.
- Een tabel met een vastgezette kop of kolom.
Het gaat het vaakst mis bij terugspringen. Gaat de bezoeker met Shift en Tab omhoog, dan zet de browser het onderdeel bovenaan het scherm — precies waar een vaste balk staat. Vooruit gaat meestal goed, achteruit niet.
DoelgroepenSuccescriteriaWie het raaktHulpmiddelenHerhalende blokken overslaan
Veel websites hebben blokken met content die op iedere pagina worden herhaald. Bijvoorbeeld een logo, een zoekveld en navigatie. Voor mensen die hulptechnologieën gebruiken of die het toetsenbord gebruiken om te navigeren, zijn deze herhalende blokken met content niet handig. Vaak staat in deze blokken namelijk veel content die iedere keer hetzelfde is. De inhoud wordt steeds volledig voorgelezen voordat zij uitkomen bij de inhoud op de pagina. Het navigeren duurt zo erg lang. Zorg daarom voor een manier dat zorgt herhalende blokken overgeslagen kunnen worden.
Door skiplinks aan te bieden hoeven gebruikers niet elke keer langs herhalende blokken met content. Een skiplink is een ankerlink die verwijst naar een onderdeel lager op de pagina. Hiermee kunnen zij sneller navigeren naar het gedeelte van de webpagina waar ze moeten zijn.
Skiplinks hebben een anker (#) als waarde in het
href-attribuut die verwijst naar een ID verderop in de pagina.In de code ziet dat er zo uit:
<header> <a href="#content">Ga naar de inhoud</a> <img src="logo.jpg" alt="WCAG.nl"> <nav> ... </nav> </header> <main> <h1 id="content" tabindex="-1">Inhoud</h1> ... </main>DoelgroepenSuccescriteriaMeerdere manieren om iets te vinden
Webpagina’s moeten op meer dan één manier te vinden zijn. Sommige bezoekers kunnen moeite hebben met het begrijpen van de navigatie op een website, of vinden een bepaalde navigatiemethode makkelijker of sneller.
Zorg daarom voor meer dan één manier om een pagina op een website te vinden. Bied naast de navigatie bijvoorbeeld ook een zoekfunctie aan, of publiceer een pagina met een sitemap.
DoelgroepenSuccescriteria