Succescriterium 4.1.2 Naam, rol, waarde
Voor alle componenten van de gebruikersinterface (inclusief, maar niet uitsluitend voor formulierelementen, links en door scripts gegenereerde componenten), kunnen de naam (name) en rol (role) door software bepaald worden; toestanden (states), eigenschappen (properties) en waarden (values) die door de gebruiker ingesteld kunnen worden, kunnen door software ingesteld worden; en kennisgeving van veranderingen in deze items is beschikbaar voor user agents, met inbegrip van hulptechnologieën.
Naam, rol, waarde begrijpen (Engelstalig)
Bedieningselementen (zoals links, knoppen, formuliervelden) van een website moet de juiste naam, rol, status en waarde hebben zodat hulptechnologie, zoals een schermlezer, ze goed kan begrijpen. Hoe heet het (naam), wat is het (rol), en in welke staat verkeert het (waarde).
Voorbeeld: Als je een knop hebt die een menu opent, moet duidelijk zijn dat het een knop is, wat de knop doet (zoals “Menu openen”), en of het menu al open is of nog dicht staat.
Bij standaard HTML-elementen gaat dit automatisch. Als je zelf maatwerk componenten ontwikkelt, dan moet je de informatie over naam, rol en waarde handmatig toevoegen.
Lees het artikel over naam, rol, waarde
Hoe pas je dit toe?
- Zorg dat software de naam van bedieningselementen kan bepalen.
- Zorg dat software de rol van bedieningselementen kan bepalen.
- Zorg dat software de waarde van bedieningselementen kan bepalen (als dit van toepassing is).
Handige tips
- Geef links en knoppen en beschrijvende tekst.
- Geef formuliervelden duidelijke labels met het
<label>-element. - Gebruik zo veel mogelijk standaard HTML-elementen zoals
<a>,<button>en<input>. - Gebruik ARIA-attributen voor maatwerk componenten (bekijk ook componenten).
Voor wie is dit belangrijk?
- Mensen die een schermlezer gebruiken.
- Mensen die blind of slechtziend zijn.
- Mensen die een cognitieve, taal- of leerbeperking hebben.
Wie is verantwoordelijk?
- Ontwikkelaar
Hoe toets je dit?
Beoordeling
- Links moeten een toegankelijke naam hebben
- Links moeten een rol hebben
- Knoppen moeten een toegankelijke naam hebben
- Knoppen moeten een rol hebben
- De waarde van knoppen moet aangegeven worden in de code (
disabled/pressed/selected) - Formulierelementen moeten een toegankelijke naam hebben
- Formulierelementen moeten een rol hebben
- De waarde van formulierelementen moet aangegeven worden in de code (
disabled/selected) - Gegroepeerde formulierelementen moet een groepslabel hebben
- Maatwerk bedieningselementen moeten een toegankelijke naam hebben
- Maatwerk bedieningselementen moeten een passende rol hebben
- De waarde van maatwerk bedieningselementen moet aangegeven worden in de code (
disabled/selected) - Maatwerk componenten moeten een passende rol hebben
<iframe>-elementen moeten een toegankelijke naam hebben- De toon/verberg-status van een element moet aangegeven worden in de code
- ARIA-attributen moeten correct worden gebruikt
Bronnen
- WCAG 2.2 – Succescriterium 4.1.2 Naam, rol, waarde
- WAI-ARIA 1.2 (Engelstalig)
- Accessible Name and Description Computation 1.2 (Engelstalig)