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.
NootEen best practice is om de naam te laten beginnen met de tekst van het label.
Label in naam begrijpen (Engelstalig)
Een bedieningselement heeft vaak twee soorten tekst. Het label is de tekst die je op het scherm ziet, op of vlak bij het element. De toegankelijke naam is de tekst waarmee hulptechnologie het element herkent, zoals een schermlezer of spraakbediening.
Dit succescriterium vereist dat de toegankelijke naam de tekst van het label bevat: in zijn geheel en in dezelfde volgorde. De toegankelijke naam mag wél extra tekst bevatten.
Heeft een bedieningselement geen zichtbare tekst, zoals een knop met alleen een icoon? Dan geldt dit succescriterium niet.
Dit helpt mensen die spraakbediening gebruiken. Zij bedienen een element door uit te spreken wat ze op het scherm zien. Staat die tekst niet in de toegankelijke naam, dan werkt de spraakopdracht niet. Mensen die een schermlezer gebruiken en ook het scherm zien, raken in de war als wat ze horen niet klopt met wat ze zien.
Stel, een knop heeft de tekst “Verstuur”. Dan moet de toegankelijke naam “Verstuur” bevatten, bijvoorbeeld “Verstuur” of “Verstuur formulier”. Zo werkt de spraakopdracht “Klik op Verstuur”.
Hoe pas je dit toe?
- Laat de toegankelijke naam uit de zichtbare tekst komen: de tekst van de link of knop zelf, of een gekoppeld label.
- Zet bij een link of knop die een afbeelding van tekst is, de tekst op de afbeelding in het tekstalternatief.
- Gebruik liever geen
aria-labelofaria-labelledbyals er al zichtbare tekst is. Die vervangen de zichtbare tekst als naam. Gebruik je ze toch, zet de zichtbare tekst er dan letterlijk in, het liefst vooraan. - Extra context nodig voor schermlezers? Visueel verborgen tekst achter de zichtbare tekst wordt deel van de naam. Met
titleofaria-describedbyblijft de naam gelijk.
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 | Symbool, 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 |
| Lees blog | Lees meer in het blog | × Nee | Er staan woorden tussen de zichtbare tekst |
| 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 | Woorden staan niet in dezelfde volgorde |
| 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 |
| Groepslabel: Nieuwsbrief ontvangen? Label: Ja | Ja | ✓ Ja | Groepslabel is geen onderdeel van het label |
Lees het artikel over de toegankelijke naam
Handige tips
- Begin de toegankelijke naam met de zichtbare tekst.
- Placeholdertekst geldt normaal gesproken niet als label. Is de placeholder de enige zichtbare tekst bij een invoerveld? Dan telt die voor dit succescriterium wel als label.
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?
Uitzonderingen
Uitzonderingen zijn:
- tekstsymbolen: tekens die als symbool worden gebruikt en niets in menselijke taal uitdrukken, zoals “B” en “I” op knoppen in een teksteditor of “>” als pijl
Geldt alleen voor:
- bedieningselementen met een label dat tekst of afbeeldingen van tekst bevat
Testprocedure
Test 1: Zichtbare labels
- Verken de pagina
- Bepaal welke bedieningselementen een label hebben met zichtbare tekst of een afbeelding van tekst:
- Links
- Knoppen
- Formulierelementen (invoervelden, tekstgebieden, keuzelijsten, selectievakjes, keuzerondjes, schuifregelaars)
- Maatwerk bedieningselementen met tekst
- Bepaal voor elk bedieningselement wat het label is:
- De tekst in het element (bijvoorbeeld de tekst van een knop of link)
- De tekst direct naast, boven of onder het element (bijvoorbeeld het label van een invoerveld)
- De tekst in een afbeelding van tekst die als label dient
- De placeholdertekst, alleen als er geen andere tekst bij het element staat
- Bepaal welke bedieningselementen een label hebben met zichtbare tekst of een afbeelding van tekst:
- Zoek in de code naar de toegankelijke naam van elk bedieningselement (zie De toegankelijke naam bepalen) en controleer:
- Of de toegankelijke naam de tekst van het label bevat
- Of de woorden in de toegankelijke naam in dezelfde volgorde staan als in het label
- Of er in de toegankelijke naam geen woorden tussen de woorden van het label staan
Belangrijk om te weten
- De toegankelijke naam mag extra tekst bevatten, maar de tekst van het label moet als één geheel in de naam staan.
- Verschillen in hoofdletters en leestekens tellen niet mee.
- Symbolen in een wiskundige formule tellen wél mee. Bij het label “11×3=33” moet de formule zo in de naam staan, niet uitgeschreven.
- Een bedieningselement met alleen een icoon heeft geen label met tekst. Dat valt niet onder dit succescriterium.
- Koppen, instructies en groepslabels (zoals een
<legend>) tellen niet als label van een bedieningselement. - Heeft een bedieningselement met een zichtbaar label geen toegankelijke naam? Rapporteer dat alleen onder 4.1.2 Naam, rol, waarde.
Beoordeling
- Voor bedieningselementen waarvan het label uit zichtbare tekst of een afbeelding van tekst bestaat, moet de toegankelijke naam de tekst van het label bevatten, 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)