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 en formuliervelden) hebben vijf kenmerken die hulptechnologie moet kunnen aflezen: hun naam, rol, toestand, eigenschappen en waarde. De naam identificeert het element voor de gebruiker, bijvoorbeeld “Zoeken”. De rol vertelt wat voor soort element het is, bijvoorbeeld een knop. De toestand vertelt in welke staat het verkeert, bijvoorbeeld uitgeklapt of ingeklapt. De eigenschappen geven aanvullende kenmerken aan, zoals of een veld verplicht is. De waarde vertelt wat er is ingevuld of geselecteerd.

Bij standaard HTML-elementen regelt de browser de rol, de toestand en de waarde automatisch. De naam moet je zelf verzorgen, bijvoorbeeld met een <label> bij een invoerveld of met linktekst bij een link.

Bouw je een maatwerk component, zoals een eigen accordeon of schuifregelaar? Dan moet je deze informatie zelf toevoegen. Ook moet elke wijziging in toestand, eigenschap of waarde automatisch worden doorgegeven aan hulptechnologie, zodat een schermlezer bijvoorbeeld altijd weet of een accordeon open of dicht staat, zonder dat de gebruiker opnieuw hoeft te navigeren.

Hoe pas je dit toe?

Zorg dat software de naam en rol van bedieningselementen kan bepalen.
Zorg dat software de toestand, eigenschappen en waarde van bedieningselementen kan bepalen, als dit van toepassing is.
Zorg dat wijzigingen in toestand, eigenschappen of waarde automatisch worden doorgegeven aan hulptechnologie.

Wanneer zijn toestand en eigenschap verplicht?

Naam en rol moeten altijd door software bepaald kunnen worden. Bij toestanden, eigenschappen en waarden staat een voorwaarde in het succescriterium. Alleen die “door de gebruiker ingesteld kunnen worden” tellen mee.

Dus er is één vraag: kan de gebruiker deze toestand of eigenschap zelf veranderen?

Ja: de gebruiker vinkt aan, vouwt uit, drukt in of versleept een regelaar. Deze moeten in de code aanwezig zijn.
Nee: de site zet de toestand, zoals bij een uitgeschakelde knop of de markering van de huidige pagina. Die vallen buiten dit succescriterium.

Lees het artikel over naam, rol, waarde

Handige tips

Gebruik native HTML-elementen waar mogelijk, zoals <button>, <input>, <select>, <details>/<summary> voor een accordeon en <dialog> voor een dialoogvenster.
Gebruik aria-expanded="true" of "false" bij uit- en inklapbare elementen, zoals een accordeon of menu, en werk dit bij zodra de toestand verandert.
Gebruik aria-checked="true" of "false" bij maatwerk selectievakjes en keuzerondjes.
Gebruik aria-selected="true" of "false" bij tabbladen of opties in een keuzelijst.
Gebruik aria-pressed="true" of "false" bij een schakelknop.
Gebruik aria-valuenow, aria-valuemin en aria-valuemax bij een maatwerk schuifregelaar, en werk aria-valuenow bij tijdens het schuiven.
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, enzovoort)
  - (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 ze waar relevant een geldig toestandsattribuut hebben (zoals aria-expanded)
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, aria-expanded)
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, aria-expanded)
Zoek in de code naar gegroepeerde formulierelementen en controleer:
- Of ze een groepslabel hebben (<fieldset> met <legend>, of role="group" met een toegankelijke naam)
Controleer voor elk bedieningselement:
- 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
  - Keuzelijst met autocomplete: uitgeklapt of ingeklapt
- Of de toestand past bij het gedrag van het element
- Of de waarde (indien van toepassing) correct is:
  - Tekstveld: de ingevulde tekst
  - Keuzelijst: de geselecteerde optie
  - Schuifregelaar: de huidige waarde, met minimale en maximale waarde
Test de bedieningselementen die van toestand of waarde veranderen en controleer:
- Of de toestand wordt bijgewerkt na de wijziging (zoals aria-pressed, aria-checked, aria-selected, aria-expanded)
- Of de waarde wordt bijgewerkt na de wijziging (zoals aria-valuenow, aria-valuetext)

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 componenten

Verken de pagina
- Bepaal welke maatwerk componenten er zijn:
  - Accordeons (toon- en verbergsecties)
  - Broodkruimelpaden
  - Carrousels
  - Keuzelijsten met autocomplete (comboboxen)
  - Dialoogvensters
  - Schakelknoppen
  - Schuifregelaars
  - Schuifschakelaars
  - Tablijsten
  - Tooltips
  - Navigatie of applicatie-acties
  - (Andere maatwerk bedieningselementen)
Zoek in de code naar maatwerk componenten 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 voor de gebruikte rol (zoals aria-checked bij role="switch", aria-valuenow bij role="slider", aria-expanded bij role="combobox")
- Of alle relevante toestanden en eigenschappen zijn ingesteld (zoals aria-expanded, aria-selected, aria-valuenow, aria-required)
- Of vereiste ouder-kind-relaties correct zijn (zoals tabs binnen een tablijst, menu-items binnen een menu, enz.)
Controleer voor elk maatwerk component:
- Of de naam correct is
- Of de rol correct is (zoals tab, tabpanel, dialog, combobox, listbox, tooltip, slider, progressbar, switch, menuitem)
- Of de toestand (indien van toepassing) correct is:
  - Accordeon: uitgeklapt of ingeklapt
  - Keuzelijst met autocomplete: uitgeklapt of ingeklapt
  - Tab: geselecteerd of niet geselecteerd
  - Schuifschakelaar: aan of uit
  - Schakelknop: ingedrukt of niet ingedrukt
  - Menu: uitgeklapt of ingeklapt
- Of de toestand past bij het gedrag van het component
- Of de eigenschappen (indien van toepassing) correct zijn:
  - Keuzelijst met autocomplete: aria-multiselectable, als meerdere opties te kiezen zijn
  - Samengesteld component: aria-activedescendant, als de focus binnen het component verspringt
- Of de waarde (indien van toepassing) correct is:
  - Keuzelijst met autocomplete: de geselecteerde optie
  - Schuifregelaar: de huidige waarde, met minimale en maximale waarde
  - Voortgangsbalk: het percentage of de voortgang
Test dynamische wijzigingen en controleer:
- Of de naam wordt bijgewerkt als de functie van het element verandert
- Of de toestand wordt bijgewerkt na activering (zoals aria-expanded, aria-selected, aria-checked, aria-pressed)
- Of de eigenschappen worden bijgewerkt na de wijziging (zoals aria-required, aria-readonly)
- Of de waarde wordt bijgewerkt na de wijziging (zoals aria-valuenow, aria-valuetext)
Zoek componenten die eruitzien als een bekend patroon maar geen ARIA-rollen of -attributen hebben en controleer:
- Of ze de rollen en attributen hebben die bij het patroon horen
Vergelijk de implementatie met de ARIA Authoring Practices Guide:
- Zoek het type component 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-rollen en controleer:
- Of elke rol bestaat in WAI-ARIA
- Of de rol past bij het gedrag van het element
Zoek in de code naar ARIA-attributen en controleer:
- Of elk attribuut bestaat in WAI-ARIA
- Of elk attribuut een geldige waarde heeft
- Of elk attribuut is toegestaan bij de rol van het element
- Of alle vereiste ARIA-attributen aanwezig zijn voor de gebruikte rol
- Of ARIA-attributen worden bijgewerkt bij toestandswijzigingen
Zoek in de code naar id-verwijzingen in aria-labelledby, aria-describedby en aria-controls en controleer:
- Of ze naar een bestaand element verwijzen
- Of de id-waarden waarnaar wordt verwezen uniek zijn
Zoek in de code naar elementen met aria-hidden="true" en controleer:
- Of ze zelf niet focusbaar zijn
- Of ze geen focusbare elementen bevatten

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)
- Of er geen bedieningselementen binnen een <label>-element staan, anders dan het element waar het label bij hoort

Beoordeling

Knoppen

Knoppen moeten een toegankelijke naam hebben
Knoppen moeten een passende rol hebben
De toestand van knoppen moet aangegeven worden in de code (indien van toepassing)
De toestand van knoppen moet bijgewerkt worden bij een wijziging (indien van toepassing)

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 (indien van toepassing)
De toestand van formulierelementen moet bijgewerkt worden bij een wijziging (indien van toepassing)
De waarde van formulierelementen moet aangegeven worden in de code (indien van toepassing)
De waarde van formulierelementen moet bijgewerkt worden bij een wijziging (indien van toepassing)

Maatwerk componenten

Maatwerk componenten moeten een toegankelijke naam hebben
Maatwerk componenten moeten een passende rol hebben
De toestand van maatwerk componenten moet aangegeven worden in de code (indien van toepassing)
De toestand van maatwerk componenten moet bijgewerkt worden bij een wijziging (indien van toepassing)
De eigenschappen van maatwerk componenten moeten aangegeven worden in de code (indien van toepassing)
De eigenschappen van maatwerk componenten moeten bijgewerkt worden bij een wijziging (indien van toepassing)
De waarde van maatwerk componenten moet aangegeven worden in de code (indien van toepassing)
De waarde van maatwerk componenten moet bijgewerkt worden bij een wijziging (indien van toepassing)

Toestanden en eigenschappen

Een toestand van een bedieningselement moet passen bij het gedrag van het element

ARIA

ARIA-rollen moeten bestaan in WAI-ARIA
ARIA-attributen moeten bestaan in WAI-ARIA
ARIA-attributen moeten een geldige waarde hebben
ARIA-attributen moeten toegestaan zijn bij de rol van het element
Vereiste ARIA-attributen moeten aanwezig zijn voor de gebruikte rol
Vereiste parent-child-relaties moeten correct zijn
Elementen met aria-hidden="true" mogen niet focusbaar zijn en mogen geen focusbare elementen bevatten
Id-verwijzingen in aria-labelledby, aria-describedby en aria-controls moeten naar een bestaand element verwijzen
Id-waarden waarnaar wordt verwezen moeten uniek zijn

Overig

<iframe>-elementen moeten een toegankelijke naam hebben
Een link of knop mag geen andere link of knop bevatten
Een <label>-element mag geen ander bedieningselement bevatten dan het formulierelement waar het bij hoort

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