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)
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”.
Hoofdletters en leestekens tellen niet mee.
Uitzonderingen zijn:
- tekstsymbolen (zoals “B”, “I” op knoppen in een teksteditor of richtingssymbolen zoals “>”)
Een wiskundige formule, zoals “11×3=33”, telt wél als label. Schrijf een formule in de toegankelijke naam dus niet voluit.
Hoe pas je dit toe?
- Zorg dat alle zichtbare tekst van een bedieningselement 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 |
| 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 wordt normaal gesproken niet beschouwd als label (zichtbare tekst), 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?
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 met zichtbare tekst er zijn:
- Links
- Knoppen
- Formulierelementen (invoervelden, keuzelijsten, selectievakjes, keuzerondjes, schuifregelaars)
- 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 met zichtbare tekst er zijn:
- 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 zichtbare tekst moet als één geheel aanwezig zijn.
Beoordeling
- De toegankelijke naam moet 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)