Nieuw in WCAG 2.1
Succescriterium 2.5.3 Label in naam
Bij componenten van de gebruikersinterface met labels die tekst of afbeeldingen van tekst bevatten, bevat de naam de tekst die visueel wordt weergegeven.
Label in naam begrijpen (Engelstalig)
Als er tekst op een bedieningselement (zoals een link, knop of formulierelement) zichtbaar is op het scherm, dan moet deze tekst ook exact en in zijn geheel voorkomen in de naam die hulptechnologie kan uitlezen.
Dit helpt mensen die spraakbediening gebruiken. Zij zeggen letterlijk wat ze op het scherm zien om elementen te bedienen. Voor mensen met een schermlezer is het verwarrend als wat ze horen niet klopt met wat ze zien.
Stel je hebt een knop met de tekst ‘Verstuur’. In de code moet deze knop dan ook ‘Verstuur’ heten. Zo kunnen mensen met spraaksoftware zeggen: “Klik op Verstuur” en werkt dit ook.
Uitzonderingen zijn:
- Geen zichtbare tekst
- Tekstsymbolen (zoals “B”, “I” op knoppen in een teksteditor of richtingssymbolen zoals “>”)
- Leestekens en hoofdletters (zoals “:” of “…”)
Wiskundige formules mogen niet worden omgezet naar voluit geschreven equivalenten.
Hoe pas je dit toe?
- Zorg dat alle zichtbare tekst van een bedieningselement in dezelfde volgorde is opgenomen in de toegankelijke naam.
Voorbeelden label in naam
| Zichtbare tekst | Toegankelijke naam | Voldoet? | Opmerking |
|---|---|---|---|
| Menu | Menu | ✓ Ja | Tekst en naam komen exact overeen |
| Bekijk | Open | × Nee | Tekst en naam komen niet overeen |
| ✖ | Sluiten | ✓ Ja | Geen zichtbare tekst |
| Downloaden | Download | × Nee | “Downloaden” komt niet overeen met “Download” |
| Download | Downloaden | ✓ Ja | “Download” komt in de naam voor |
| Lees meer | Lees meer over label in naam | ✓ Ja | “Lees meer” komt in de naam voor |
| Lees artikel | Lees meer over label in naam | × Nee | “Lees artikel” komt niet in de naam voor |
| Label in naam | Lees meer over label in naam | ✓ Ja | “Label in naam” komt in de naam voor |
| Lees meer… | Lees meer | ✓ Ja | “Lees meer” komt in de naam voor, leestekens tellen niet mee |
| Voornaam en achternaam | Achternaam en voornaam | × Nee | Tekst en naam komen niet overeen |
| Zoek 🔍 | Zoek | ✓ Ja | “Zoek” komt in de naam voor |
| Label: E-mail | ✓ Ja | Tekst en naam komen exact overeen | |
| Label: (geen label) Placeholder: Typ je e-mailadres | Typ je e-mailadres | ✓ Ja | Placeholder en naam komen exact overeen |
| Label: E-mail Placeholder: Typ je e-mailadres | ✓ Ja | Label komt overeen, placeholder telt dan niet mee | |
| Label: E-mail Placeholder: Typ je e-mailadres | Typ je e-mailadres | × Nee | Label is zichtbaar, maar komt niet voor in de naam |
Lees het artikel over de toegankelijke naam
Handige tips
- Begin de toegankelijke naam met de zichtbare tekst.
- Vermijd het gebruik van
aria-labelledbyofaria-labelals er al een zichtbare tekst is. - Placeholder-tekst wordt normaal gesproken niet beschouwd als label, maar kan in voor dit succescriterium wel relevant zijn als dit de enige zichtbare tekst is.
Voor wie is dit belangrijk?
- Mensen die spraakherkenningsoftware gebruiken.
- Mensen die een fysieke of motorische beperking hebben.
- Mensen die een schermlezer gebruiken.
- Mensen die blind of slechtziend zijn.
Wie is verantwoordelijk?
- Redacteur
- Ontwikkelaar
Hoe toets je dit?
Testprocedure
Test 1: Bedieningselementen
- Inventariseer de pagina
- Bepaal welke bedieningselementen met zichtbare tekst er zijn:
- Links met zichtbare tekst
- Knoppen met zichtbare tekst
- Formuliervelden met labels
- Selectielijsten met labels
- Checkboxes en radiobuttons met labels
- Bepaal voor elk bedieningselement wat de zichtbare tekst is
- Tekst die direct op het element staat (zoals knoptekst)
- Tekst die naast het element staat (zoals formulierlabels)
- Tekst in afbeeldingen die als label dienen
- Placeholdertekst (alleen als dit het enige label is)
- Bepaal voor elk bedieningselement wat de toegankelijke naam is
- Open de Inspector (Ontwikkelaarstools):
- Klik met rechtermuisknop op het bedieningselement
- Selecteer ‘Inspecteren’ of ‘Inspecteer Element’
- Bepaal de toegankelijke naam in deze volgorde:
- Voor links:
aria-labelledbyaria-label- De inhoud van de link
- De zichtbare tekst
- Het tekstalternatief van afbeeldingen in de link
- Verborgen tekst in de link
title
- Voor knoppen:
aria-labelledbyaria-label- De inhoud van de knop
- De zichtbare tekst
- Het tekstalternatief van afbeeldingen in de knop
- Verborgen tekst in de knop
value(alleen voor<input type="button">)title
- Voor formulierelementen:
aria-labelledbyaria-label- De gekoppelde
<label> placeholdertitle
- Voor links:
- (Gebruik eventueel een schermlezer om de toegankelijke naam te controleren)
- Open de Inspector (Ontwikkelaarstools):
- Bepaal welke bedieningselementen met zichtbare tekst er zijn:
- Vergelijk voor elk bedieningselement de zichtbare tekst met de toegankelijke naam en controleer:
- Of de volledige zichtbare tekst voorkomt in de toegankelijke naam
- Of de woorden van de zichtbare tekst in dezelfde volgorde staan
- Of er geen woorden tussen de zichtbare tekst zijn ingevoegd
Let op: De toegankelijke naam mag extra tekst bevatten, maar de zichtbare tekst moet als één geheel aanwezig zijn.
Beoordeling
- De zichtbare tekst moet volledig voorkomen in de toegankelijke naam, in dezelfde volgorde en zonder woorden ertussen
Bronnen
- WCAG 2.2 – Succescriterium 2.5.3 Label in naam
- Accessible Name and Description Computation 1.2 (Engelstalig)
- Accessible Name Calculation – 200 OK – Jules Ernst (Engelstalig)
- Label in name – 200 OK – Jules Ernst (Engelstalig)