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
Bronnen
- WCAG 2.2 – Succescriterium 2.5.3 Label in naam
- Accessible Name and Description Computation 1.2 (Engelstalig)
- Label in name – 200 OK – Jules Ernst