4.1.2 Naam, rol, waarde

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 moeten de juiste naam, rol, toestand en waarde hebben zodat hulptechnologie, zoals een schermlezer, ze goed kan begrijpen. Hoe heet het (naam), wat is het (rol), in welke staat verkeert het (toestand) en wat de huidige waarde is (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 die informatie handmatig toevoegen.

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 toestand van bedieningselementen kan bepalen (als dit van toepassing is).
Zorg dat software de eigenschappen van bedieningselementen kan bepalen (als dit van toepassing is).
Zorg dat software de waarde van bedieningselementen kan bepalen (als dit van toepassing is).

Lees het artikel over naam, rol, waarde

Handige tips

Gebruik zo veel mogelijk standaard HTML-elementen zoals <a>, <button> en <input>.
Gebruik ARIA-attributen voor maatwerk componenten (bekijk ook mijn 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?

Benodigdheden

Minimaal twee verschillende schermlezers (bijvoorbeeld NVDA en VoiceOver)

Testprocedure

Test 1: Standaard bedieningselementen

Verken de pagina
- Bepaal welke bedieningselementen er zijn:
  - Links
  - Knoppen
  - Formulierelementen (invoervelden, keuzelijsten, selectievakjes, keuzerondjes, schuifregelaars, enz.)
  - (Andere interactieve elementen)
Zoek in de code naar links (<a>-element met href-attribuut) en controleer:
- Of ze een toegankelijke naam hebben (zie De toegankelijke naam bepalen)
- Of links die de huidige pagina, stap of locatie aangeven waar relevant een geldig toestandsattribuut hebben (zoals aria-current)
Zoek in de code naar knoppen (<button>-element) en controleer:
- Of ze een toegankelijke naam hebben (zie De toegankelijke naam bepalen)
- Of ze waar relevant een geldig toestandsattribuut hebben (zoals aria-pressed)
- Of ze waar relevant een geldig eigenschapsattribuut hebben (zoals disabled, aria-disabled, aria-haspopup)
Zoek in de code naar formulierelementen (<input>, <select>, <textarea>) en controleer:
- Of ze een toegankelijke naam hebben (zie De toegankelijke naam bepalen)
- Of ze waar relevant een geldig toestandsattribuut hebben (zoals checked, selected)
- Of ze waar relevant een geldig eigenschapsattribuut hebben (zoals disabled, aria-disabled, required, aria-required, readonly, aria-readonly, aria-invalid)
Zoek in de code naar gegroepeerde formulierelementen en controleer:
- Of ze een toegankelijke naam hebben (zie De toegankelijke naam bepalen)
Controleer voor elk bedieningselement in de accessibility tree (Inspector):
- Of de naam correct is
- Of de rol correct is
- Of de toestand (indien van toepassing) correct is:
  - Selectievakje: aangevinkt of niet aangevinkt
  - Keuzerondje: geselecteerd of niet geselecteerd
  - Knop: ingedrukt of niet ingedrukt
  - Uitklapmenu: uitgeklapt of ingeklapt
  - Link: huidige pagina, stap of locatie (aria-current)
- Of de eigenschappen (indien van toepassing) correct zijn:
  - Verplicht veld: required of aria-required
  - Alleen-lezen: readonly of aria-readonly
  - Uitgeschakeld: disabled of aria-disabled
  - Ongeldig: aria-invalid
- Of de waarde (indien van toepassing) correct is:
  - Tekstveld: de ingevulde tekst
  - Keuzelijst: de geselecteerde optie
Zoek in de code naar elementen met dynamische toestandswijzigingen en controleer:
- Of ARIA-attributen worden bijgewerkt bij toestandswijzigingen (zoals aria-pressed, aria-checked, aria-selected)

Optioneel: controleer met een schermlezer of naam, rol, toestand, eigenschap en waarde ook in de praktijk correct worden doorgegeven. Let op: de schermlezer kan afwijken van de accessibility tree. De tree is leidend.

Test 2: Maatwerk bedieningselementen

Verken de pagina
- Bepaal welke maatwerk bedieningselementen er zijn:
  - Accordeons (toon/verberg-secties)
  - Carrousels
  - Comboboxen
  - Dialoogvensters
  - Schuifregelaars
  - Tabpanelen
  - Switches
  - Toggles
  - Tooltips
  - Navigatie of applicatie-acties
  - (Andere maatwerk bedieningselementen)
Zoek in de code naar maatwerk bedieningselementen en controleer:
- Of ze een toegankelijke naam hebben (zie De toegankelijke naam bepalen)
- Of de juiste rol is toegepast (zoals role="tab", role="dialog", role="combobox")
- Of alle vereiste ARIA-attributen aanwezig zijn (zoals aria-labelledby, aria-controls, aria-owns)
- Of alle relevante toestanden en eigenschappen zijn ingesteld (zoals aria-expanded, aria-selected, aria-valuenow, aria-required)
- Of vereiste parent-child-relaties correct zijn (zoals tabs binnen een tablist, menuitems binnen een menu)
Controleer voor elk maatwerk bedieningselement in de accessibility tree (Inspector):
- Of de naam correct is
- Of de rol correct is (zoals tab, tabpanel, dialog, combobox, listbox, slider, progressbar, switch, menuitem)
- Of de waarde (indien van toepassing) correct is:
  - Combobox: de geselecteerde optie
  - Schuifregelaar: de huidige waarde, met minimale en maximale waarde
  - Voortgangsbalk: het percentage of de voortgang
- Of de toestand (indien van toepassing) correct is:
  - Accordeon: uitgeklapt of ingeklapt
  - Dialoogvenster: modaal of niet-modaal
  - Combobox: uitgeklapt of ingeklapt
  - Tabpaneel: geselecteerd of niet geselecteerd
  - Switch: aan of uit
  - Toggle: ingedrukt of niet ingedrukt
  - Menu: uitgeklapt of ingeklapt
- Of de eigenschappen (indien van toepassing) correct zijn:
  - Verplicht veld: required of aria-required
  - Alleen-lezen: readonly of aria-readonly
  - Uitgeschakeld: disabled of aria-disabled
  - Combobox: aria-multiselectable, als meerdere opties te kiezen zijn
Test dynamische wijzigingen en controleer in de accessibility tree:
- Of de ARIA-attributen worden bijgewerkt bij toestandswijzigingen (zoals aria-expanded, aria-selected, aria-checked, aria-pressed)
- Of de nieuwe toestand correct in de tree staat na activering
Vergelijk de implementatie met de ARIA Authoring Practices Guide:
- Zoek het type bedieningselement op in de ARIA Authoring Practices Guide
- Vergelijk de gevonden implementatie met het beschreven patroon
- Vergelijk de implementatie eventueel ook met mijn componenten
- Let op: exacte naleving is niet verplicht, zolang naam, rol, toestand, eigenschap en waarde maar toegankelijk zijn

Test 3: Iframes

Zoek in de code naar <iframe>-elementen en controleer:
- Of ze een toegankelijke naam hebben (zie De toegankelijke naam bepalen)

Test 4: ARIA-attributen

Zoek in de code naar ARIA-attributen en controleer:
- Of alle ARIA-attributen juist worden gebruikt
- Of alle ARIA-attributen een geldige waarde hebben
- Of alle vereiste ARIA-attributen aanwezig zijn voor de gebruikte rol
- Of ARIA-attributen worden bijgewerkt bij toestandswijzigingen

Test 5: Geneste bedieningselementen

Zoek in de code naar geneste bedieningselementen en controleer:
- Of er geen <a>-elementen binnen andere <a>-elementen staan
- Of er geen <button>-elementen binnen andere <button>-elementen staan
- Of er geen <a>-elementen binnen <button>-elementen staan (of andersom)

Beoordeling

Knoppen

Knoppen moeten een toegankelijke naam hebben
Knoppen moeten een passende rol hebben
De toestand van knoppen moet aangegeven worden in de code
De eigenschappen van knoppen moeten aangegeven worden in de code

Formulierelementen

Formulierelementen moeten een toegankelijke naam hebben
Formulierelementen moeten een passende rol hebben
Gegroepeerde formulierelementen moeten een groepslabel hebben
De toestand van formulierelementen moet aangegeven worden in de code
De eigenschappen van formulierelementen moeten aangegeven worden in de code
De waarde van formulierelementen moet aangegeven worden in de code

Maatwerk

Maatwerk bedieningselementen moeten een toegankelijke naam hebben
Maatwerk bedieningselementen moeten een passende rol hebben
De toestand van maatwerk bedieningselementen moet aangegeven worden in de code
De eigenschappen van maatwerk bedieningselementen moeten aangegeven worden in de code
De waarde van maatwerk bedieningselementen moet aangegeven worden in de code

Overig

<iframe>-elementen moeten een toegankelijke naam hebben
Dynamische toestandswijzigingen moeten in de code worden bijgewerkt
ARIA-attributen moeten correct worden gebruikt
Bedieningselementen moeten niet worden genest

Bronnen

WCAG 2.2 – Succescriterium 4.1.2 Naam, rol, waarde
WAI-ARIA 1.3 (Engelstalig)
Accessible Name and Description Computation 1.2 (Engelstalig)

Andere richtlijnen

Richtlijnen voor toegankelijkheid van webcontent