4.1.2 Naam, rol, waarde – Richtlijnen voor toegankelijkheid van webcontent

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?

Benodigdheden

Minimaal twee verschillende schermlezers (bijvoorbeeld NVDA en VoiceOver)

Testprocedure

Test 1: Naam, rol, waarde

Verken de pagina
- Bepaal welke bedieningselementen er zijn:
  - Links
  - Knoppen
  - Formulierelementen (invoervelden, keuzelijsten, selectievakjes, keuzerondjes, schuifregelaars, schuifbalken, enz.)
  - (Andere interactieve elementen)
- Schakel nu je schermlezer in
- Bepaal voor elk element:
  - Of de schermlezer een naam aankondigt
  - Of de schermlezer een rol aankondigt
  - Of de schermlezer een waarde of status aankondigt

Verwachte aankondigingen per elementtype:

Links:
- Naam: de linktekst
- Rol: “link”
Knoppen:
- Naam: de knoptekst
- Rol: “knop”
- Status (indien aanwezig): “uitgeschakeld” of “ingedrukt”/“niet ingedrukt”
Invoervelden:
- Naam: het label
- Rol: “invoerveld” of specifieke rol (“e-mail”, “wachtwoord”, enz.)
- Waarde: de ingevulde tekst
Keuzelijsten:
- Naam: het label
- Rol: “keuzelijst” of “combobox”
- Waarde: de geselecteerde optie
Selectievakjes:
- Naam: het label
- Rol: “selectievakje” of “checkbox”
- Status: “aangevinkt”/“niet aangevinkt”
Keuzerondjes:
- Naam: het label
- Rol: “keuzerondje” of “radio button”
- Status: “geselecteerd”/“niet geselecteerd”

Controleer voor elk bedieningselement:
- Of de naam wordt aangekondigd
- Of de rol correct wordt aangekondigd
- Of de waarde (indien van toepassing) correct wordt aangekondigd:
  - Tekstveld: de ingevulde tekst
  - Keuzelijst: de geselecteerde optie
- Of de status (indien van toepassing) correct wordt aangekondigd:
  - Selectievakje: aangevinkt of niet aangevinkt
  - Keuzerondje: geselecteerd of niet geselecteerd
  - Knop: ingedrukt (pressed), uitgeschakeld (disabled)
  - Uitklapmenu: uitgeklapt of ingeklapt
Zoek in de code naar links (<a>-element met href-attribuut) en controleer:
- Of links een toegankelijke naam hebben
  - Open de Inspector (Ontwikkelaarstools):
    - Klik met rechtermuisknop op de link
    - Selecteer ‘Inspecteren’ of ‘Inspecteer Element’
    - Bepaal de toegankelijke naam in deze volgorde:
      - aria-labelledby
      - aria-label
      - De inhoud van de link
        
        De zichtbare tekst
        
        Het tekstalternatief van afbeeldingen in de link
        
        Verborgen tekst in de link
      - title
Zoek in de code naar knoppen (<button>-element) en controleer:
- Of knoppen een toegankelijke naam hebben
  - Open de Inspector (Ontwikkelaarstools):
    - Klik met rechtermuisknop op de knop
    - Selecteer ‘Inspecteren’ of ‘Inspecteer Element’
    - Bepaal de toegankelijke naam in deze volgorde:
      - aria-labelledby
      - aria-label
      - De inhoud van de knop
        
        De zichtbare tekst
        
        Het tekstalternatief van afbeeldingen in de knop
        
        Verborgen tekst in de knop
      - title
- Of knoppen waar relevant een geldig statusattribuut hebben (zoals disabled, aria-pressed)
Zoek in de code naar formulierelementen (<input>, <select>, <textarea>) en controleer:
- Of formulierelementen een toegankelijke naam hebben
  - Open de Inspector (Ontwikkelaarstools):
    - Klik met rechtermuisknop op het formulierelement
    - Selecteer ‘Inspecteren’ of ‘Inspecteer Element’
    - Bepaal de toegankelijke naam in deze volgorde:
      - aria-labelledby
      - aria-label
      - <label>
      - title
      - placeholder
- Of formulierelementen waar relevant een geldig statusattribuut hebben (zoals disabled, selected, checked)
Zoek in de code naar elementen met dynamische statuswijzigingen en controleer:
- Of ARIA-attributen worden bijgewerkt bij statuswijzigingen (zoals aria-pressed, selected, checked)

Test 2: Maatwerk bedieningselementen

Verken de pagina
- Bepaal welke maatwerk bedieningselementen er zijn:
  - Accordeons (toon/verberg-secties)
  - Comboboxen
  - Dialoogvensters
  - Tabpanelen
  - Toggles
  - Switches
  - Navigatie of applicatie-acties
  - Andere maatwerk componenten
- Probeer elk component uit met de schermlezer
- Bepaal voor elk widget:
  - Of de schermlezer een naam aankondigt (zoals de naam van een tab, het label van een slider, de titel van een dialoogvenster)
  - Of de schermlezer een rol aankondigt (zoals tab, tabpanel, dialog, combobox, listbox, slider, progressbar, switch, menuitem)
  - Of de schermlezer waar relevant een waarde of status aankondigt
Controleer voor elk widget:
- Of het bedieningselement een toegankelijke naam heeft
- Of de rol correct wordt aangekondigd
- Of de waarde of toestand (indien van toepassing) wordt aangekondigd:
  - Accordeon: uitgeklapt of ingeklapt
  - Dialoogvenster: modaal of niet-modaal
  - Combobox: geselecteerde optie, uitgeklapt of ingeklapt
  - Tabpaneel: geselecteerd of niet geselecteerd, tab 1 van 3
  - Schuifregelaar: huidige waarde, minimale en maximale waarde
  - Switch: aan of uit
  - Progressbar: percentage of voortgang
  - Menu: uitgeklapt of ingeklapt
Test dynamische wijzigingen en controleer:
- Of de schermlezer statuswijzigingen aankondigt bij activering
- Of de nieuwe status duidelijk wordt overgebracht aan schermlezers
Zoek in de code naar maatwerk bedieningselementen en controleer:
- Of de juiste role 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 statussen en eigenschappen zijn ingesteld (zoals aria-expanded, aria-selected, aria-valuenow)
- Of vereiste parent-child relaties correct zijn (zoals tabs binnen tablist, menuitems binnen menu)
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 statuswijzigingen
Vergelijk de implementatie met ARIA Authoring Practices:
- Zoek het component-type op in de ARIA Authoring Practices Guide
- Vergelijk de gevonden implementatie met het beschreven patroon
- Let op: exacte naleving is niet verplicht, zolang naam, rol, waarde en status maar toegankelijk zijn

Test 3: Nesting

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
De waarde van knoppen moet aangegeven worden in de code (disabled/aria-pressed)

Formulierelementen

Formulierelementen moeten een toegankelijke naam hebben
De waarde van formulierelementen moet aangegeven worden in de code (disabled/selected/checked)
Gegroepeerde formulierelementen moeten een groepslabel hebben

Maatwerk

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

Overig

Bedieningselementen moeten niet worden genest
<iframe>-elementen moeten een toegankelijke naam hebben
De toon/verberg-waarde van een element moet aangegeven worden in de code (aria-expanded)
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)

Andere richtlijnen

Richtlijnen voor toegankelijkheid van webcontent