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.

Noot

Dit succescriterium is primair voor webauteurs die hun eigen componenten van de gebruikersinterface ontwikkelen of scripten. Standaard bedieningselementen in HTML bijvoorbeeld voldoen al aan dit succescriterium als ze gebruikt worden volgens specificatie.

Naam, rol, waarde begrijpen (Engelstalig)

Bedieningselementen, zoals links, knoppen en formulierelementen, hebben vijf kenmerken die hulptechnologie moet kunnen uitlezen: naam, rol, toestand, eigenschappen en waarde. De naam identificeert het element, bijvoorbeeld “Zoeken”. De rol vertelt wat voor soort element het is, bijvoorbeeld een knop. De toestand vertelt in welke stand het element staat, bijvoorbeeld uitgeklapt of ingeklapt. De eigenschappen geven aanvullende kenmerken, zoals de richting waarin een tabelkolom is gesorteerd. De waarde vertelt wat er is ingevuld of gekozen.

Hulptechnologie moet de toestand en de waarde ook zelf kunnen veranderen. Spraakbesturing moet bijvoorbeeld een selectievakje kunnen aanvinken.

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 bedieningselement, zoals een eigen accordeon of schuifregelaar? Dan moet je deze informatie zelf toevoegen. Elke wijziging moet ook automatisch naar hulptechnologie gaan. Een schermlezer weet dan altijd of een accordeon open of dicht is, zonder dat de gebruiker opnieuw naar het element hoeft te gaan.

Hoe pas je dit toe?

Geef elk bedieningselement een naam en een rol die software kan bepalen.
Zorg dat hulptechnologie de toestand, eigenschappen en waarde kan uitlezen en instellen, als de gebruiker die kan veranderen.
Geef elke wijziging in toestand, eigenschap of waarde automatisch door aan hulptechnologie.
Verandert de functie van een bedieningselement? Werk dan ook de naam bij. Wordt een knop “Afspelen” een knop “Pauzeren”, dan moet de naam meeveranderen.

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.

De vraag is dus: kan de gebruiker dit 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 het kan, zoals <button>, <input>, <select>, <details> en <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. Werk de waarde bij zodra de toestand verandert.
Gebruik aria-checked="true" of "false" bij maatwerk selectievakjes en keuzerondjes en schuifschakelaars.
Gebruik aria-selected="true" of "false" bij tabbladen en bij opties in een keuzelijst.
Gebruik aria-pressed="true" of "false" bij een schakelknop. (Laat de naam van de knop dan gelijk, want de toestand vertelt al of hij aan of uit staat.)
Gebruik aria-valuenowbij een maatwerk schuifregelaar, en werk aria-valuenow bij tijdens het schuiven. Ligt het bereik niet tussen 0 en 100? Voeg dan ook aria-valuemin en aria-valuemaxtoe.
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)
- Bepaal welke bedieningselementen van toestand of functie veranderen
Zoek in de code naar links (<a>-element met href-attribuut) en controleer:
- Of het element een toegankelijke naam heeft (zie De toegankelijke naam bepalen)
- Bij een link die een onderdeel in- en uitklapt:
  - Of de link een aria-expanded-attribuut heeft
Zoek in de code naar knoppen (<button>-element, en <input>-element met het type button, submit, reset of image) en controleer:
- Of het element een toegankelijke naam heeft (zie De toegankelijke naam bepalen)
- Bij een knop die een onderdeel in- en uitklapt:
  - Of de knop een aria-expanded-attribuut heeft
- Bij een knop die aan en uit kan staan:
  - Of de knop een aria-pressed-attribuut heeft
Zoek in de code naar formulierelementen (<input>, <select>, <textarea>) en controleer:
- Of het element een toegankelijke naam heeft (zie De toegankelijke naam bepalen)
- Bij een invoerveld met een uitklapbare lijst:
  - Of het invoerveld een aria-expanded-attribuut heeft
Controleer voor elk bedieningselement in de accessibility tree:
- Of de rol past bij de functie van het element
- Of de toestand past bij het gedrag van het element:
  - Selectievakje: aangevinkt of niet aangevinkt
  - Keuzerondje: geselecteerd of niet geselecteerd
  - Keuzelijst: uitgeklapt of ingeklapt
  - Schakelknop: ingedrukt of niet ingedrukt
  - Uitklapmenu: uitgeklapt of ingeklapt
- Of de waarde overeenkomt met de zichtbare waarde
Test de bedieningselementen die van toestand of functie veranderen en controleer:
- Of de toestand wordt bijgewerkt na de wijziging (bijvoorbeeld aria-pressed of aria-expanded)
- Of de toegankelijke naam wordt bijgewerkt als de functie verandert (bijvoorbeeld van “Afspelen” naar “Pauzeren”)

Test 2: Maatwerk bedieningselementen

Verken de pagina
- Bepaal welke maatwerk bedieningselementen er zijn:
  - Accordeons en toon/verberg-secties
  - Carrousels
  - Comboboxen
  - Dialoogvensters
  - Menu’s
  - Schakelknoppen
  - Schuifregelaars
  - Schuifschakelaars
  - Tabpanelen
  - Andere maatwerk bedieningselementen
Zoek in de code naar maatwerk bedieningselementen en controleer:
- Of het element een toegankelijke naam heeft (zie De toegankelijke naam bepalen)
- Of het element een rol heeft die past bij de functie (bijvoorbeeld tab, dialog, combobox, slider of switch)
- Of het element de ARIA-attributen voor de toestand heeft die bij het gedrag passen (bijvoorbeeld aria-expanded, aria-selected, aria-checked of aria-pressed)
- Of het element de ARIA-attributen voor de waarde heeft die bij de functie passen (bijvoorbeeld aria-valuenow bij een schuifregelaar)
- Of de eigenschappen die de gebruiker verandert in de code staan (bijvoorbeeld aria-sort of aria-activedescendant)
Controleer voor elk maatwerk bedieningselement in de accessibility tree:
- Of de rol past bij de functie van het element
- Of de toestand past bij het gedrag van het element:
  - Accordeon: uitgeklapt of ingeklapt
  - Combobox: uitgeklapt of ingeklapt
  - Tab: geselecteerd of niet geselecteerd
  - Schuifschakelaar: aan of uit
  - Schakelknop: ingedrukt of niet ingedrukt
  - Menu: uitgeklapt of ingeklapt
- Of de waarde overeenkomt met de zichtbare waarde:
  - Combobox: de gekozen optie
  - Schuifregelaar: de huidige waarde
Test de maatwerk bedieningselementen en controleer:
- Of de toestand wordt bijgewerkt na de wijziging (bijvoorbeeld aria-expanded, aria-selected, aria-checked of aria-pressed)
- Of de waarde wordt bijgewerkt na de wijziging (bijvoorbeeld aria-valuenow of aria-valuetext)
- Of de eigenschappen die de gebruiker verandert worden bijgewerkt (bijvoorbeeld aria-sort na het sorteren)
- Of de toegankelijke naam wordt bijgewerkt als de functie verandert

De ARIA Authoring Practices Guide en de componenten in mijn kennisbank zijn handig om een maatwerk bedieningselement mee te vergelijken. Exacte naleving is niet verplicht, zolang naam, rol, toestand, eigenschap en waarde toegankelijk zijn.

Test 3: Iframes

Zoek in de code naar <iframe>-elementen die niet verborgen zijn voor hulptechnologie en controleer:
- Of het element een toegankelijke naam heeft (zie De toegankelijke naam bepalen)

Test 4: ARIA-attributen

Zoek in de code naar ARIA-rollen op bedieningselementen en controleer:
- Of elke rol bestaat in WAI-ARIA en niet verouderd (deprecated) is
- Of de rol past bij de functie van het element
Zoek in de code naar ARIA-attributen op bedieningselementen 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 het element alle attributen heeft die de rol vereist
Zoek in de code naar aria-labelledby-attributen en controleer:
- Of elke id-verwijzing naar een bestaand element verwijst
- Of de id-waarde waarnaar wordt verwezen uniek is
Zoek in de code naar elementen met aria-hidden="true" en controleer:
- Of het element zelf niet focusbaar is
- Of het element geen focusbare elementen bevat
Zoek in de code naar elementen met een ARIA-rol die een bovenliggende of onderliggende rol vereist en controleer:
- Of de vereiste bovenliggende rol aanwezig is (bijvoorbeeld tab binnen tablist)
- Of de vereiste onderliggende rollen aanwezig zijn (bijvoorbeeld option binnen listbox)

Test 5: Geneste bedieningselementen

Zoek in de code naar geneste bedieningselementen en controleer:
- Of er geen link of knop binnen een andere link of knop staat (ook bij elementen met de rol link of button)
- Of er binnen een <label>-element geen ander formulierelement of <button>-element staat 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
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 bedieningselementen

Maatwerk bedieningselementen moeten een toegankelijke naam hebben
Maatwerk bedieningselementen moeten een passende rol hebben
Bij een maatwerk bedieningselement moet een toestand die de gebruiker verandert in de code staan
Bij een maatwerk bedieningselement moet een toestand die de gebruiker verandert worden bijgewerkt bij een wijziging
Bij een maatwerk bedieningselement moet een eigenschap die de gebruiker verandert in de code staan
Bij een maatwerk bedieningselement moet een eigenschap die de gebruiker verandert worden bijgewerkt bij een wijziging
Bij een maatwerk bedieningselement moet een waarde die de gebruiker verandert in de code staan
Bij een maatwerk bedieningselement moet een waarde die de gebruiker verandert worden bijgewerkt bij een wijziging
De onderdelen van een maatwerk bedieningselement moeten de vereiste bovenliggende en onderliggende rollen hebben

Toestanden en eigenschappen

Een toestand van een bedieningselement moet passen bij het gedrag van het element
De toegankelijke naam van een bedieningselement moet worden bijgewerkt als de functie verandert

ARIA

De ARIA-rol van een bedieningselement moet bestaan in WAI-ARIA en mag niet verouderd zijn
ARIA-attributen op een bedieningselement moeten bestaan in WAI-ARIA
ARIA-attributen op een bedieningselement moeten een geldige waarde hebben
ARIA-attributen op een bedieningselement moeten toegestaan zijn bij de rol van het element
Een bedieningselement moet alle ARIA-attributen hebben die de rol vereist
Id-verwijzingen in aria-labelledby moeten naar een bestaand element verwijzen
Id-waarden waarnaar aria-labelledby verwijst moeten uniek zijn
Elementen met aria-hidden="true" mogen niet focusbaar zijn en mogen geen focusbare elementen bevatten

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 formulierelement of <button>-element 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