Succescriterium 3.2.4 Consistente identificatie
Niveau AA
Lees de officiële tekst van succescriterium 3.2.4 Consistente identificatie
Vaste 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.
DoelgroepenWie 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.
DoelgroepenHulpmiddelenVaste 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.
DoelgroepenHulpmiddelen