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, eigenschappen en waarde ook zelf kunnen veranderen. Spraakbesturing moet bijvoorbeeld een selectievakje kunnen aanvinken.

Bij standaard HTML-elementen regelt de browser de rol, de waarde en de vaste toestanden automatisch, zoals aangevinkt bij een selectievakje. De naam moet je zelf verzorgen, bijvoorbeeld met een <label> bij een invoerveld of met linktekst bij een link. Geef je een standaard element extra gedrag, zoals een knop die een menu uitklapt? Dan voeg je die toestand zelf toe.

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.
Bouw je een samengesteld bedieningselement, zoals een maatwerk keuzelijst of boomstructuur? Zorg dan dat hulptechnologie weet welk onderdeel de focus heeft.

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, tekstgebieden, 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
Zoek in de code naar formulierelementen (<input>, <select>, <textarea>) en controleer:
- Of het element een toegankelijke naam heeft (zie De toegankelijke naam bepalen)
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 in de accessibility tree 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”)
Zoek in de code naar knoppen die aan en uit kunnen staan en controleer of minstens één van de volgende waar is:
- Of de knop een aria-pressed-attribuut heeft dat meeverandert met de toestand
- Of de knop de rol switch heeft met een aria-checked-attribuut dat meeverandert met de toestand
- Of de toegankelijke naam meeverandert met de toestand (bijvoorbeeld van “Geluid aan” naar “Geluid uit”)
Schakel een schermlezer in
Navigeer met de schermlezer naar elk bedieningselement en vergelijk de aankondiging met de accessibility tree:
- Of de schermlezer dezelfde toegankelijke naam aankondigt
- Of de schermlezer een rol aankondigt die past bij de rol in de accessibility tree
- Of de schermlezer dezelfde toestand of waarde aankondigt
Test de bedieningselementen die van toestand of functie veranderen met de schermlezer en controleer:
- Of de schermlezer de nieuwe toestand, waarde of toegankelijke naam aankondigt na de wijziging
Herhaal stap 8 tot en met 10 met een andere schermlezer

Test 2: Maatwerk bedieningselementen

Verken de pagina
- Bepaal welke maatwerk bedieningselementen er zijn:
  - Knoppen en links die niet met <button> of <a> zijn gebouwd (bijvoorbeeld een <div> of <span> met een klikfunctie)
  - Maatwerk formulierelementen (selectievakjes, keuzerondjes, keuzelijsten)
  - Accordeons of andere elementen die kunnen uitvouwen en samenvouwen
  - Carrousels
  - Comboboxen
  - Dialoogvensters
  - Uitklapmenu’s
  - Schakelknoppen
  - Schuifregelaars
  - Schuifschakelaars
  - Tabbladen
  - 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 button, checkbox, 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)
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
  - Maatwerk selectievakje: aangevinkt of niet aangevinkt
  - Maatwerk keuzerondje: geselecteerd of niet geselecteerd
  - Optie in een keuzelijst: geselecteerd of niet geselecteerd
  - Tabblad: geselecteerd of niet geselecteerd
  - Schuifschakelaar: aan of uit
  - Schakelknop: ingedrukt of niet ingedrukt
  - Uitklapmenu: 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 in de accessibility tree wordt bijgewerkt na de wijziging (bijvoorbeeld aria-expanded, aria-selected, aria-checked of aria-pressed)
- Of de waarde in de accessibility tree 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
- Of de focus in de code ligt op het onderdeel dat visueel de focus heeft (bijvoorbeeld via aria-activedescendant of tabindex)
Schakel een schermlezer in
Navigeer met de schermlezer naar elk maatwerk bedieningselement en vergelijk de aankondiging met de accessibility tree:
- Of de schermlezer dezelfde toegankelijke naam aankondigt
- Of de schermlezer een rol aankondigt die past bij de rol in de accessibility tree
- Of de schermlezer dezelfde toestand of waarde aankondigt
- Of de schermlezer het onderdeel aankondigt dat visueel de focus heeft
Test de maatwerk bedieningselementen met de schermlezer en controleer:
- Of de schermlezer de nieuwe toestand, waarde of toegankelijke naam aankondigt na de wijziging
Herhaal stap 5 tot en met 7 met een andere schermlezer

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
- 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 id-verwijzingen die de naam of de focus bepalen en controleer:
- Of elke verwijzing in een for-, aria-labelledby– of aria-activedescendant-attribuut 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 het element binnen de vereiste bovenliggende rol staat (bijvoorbeeld tab binnen tablist)
- Of het element de vereiste onderliggende rollen bevat (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

Belangrijk om te weten

De code en de accessibility tree zijn leidend voor de beoordeling. De schermlezers dienen ter verificatie.
Kondigt een schermlezer iets anders aan dan de accessibility tree laat zien, dan wordt de code opnieuw gecontroleerd. Een afwijkende aankondiging is op zichzelf geen bevinding.
De ARIA Authoring Practices Guide en de componenten in de kennisbank zijn handig om een maatwerk bedieningselement mee te vergelijken. Exacte naleving is niet verplicht, zolang naam, rol, toestand, eigenschap en waarde toegankelijk zijn.

Beoordeling

Knoppen

Knoppen moeten een toegankelijke naam hebben
Knoppen moeten een passende rol hebben
Bij een knop die een onderdeel in- en uitklapt moet de toestand in de code staan
Bij een knop die een onderdeel in- en uitklapt moet de toestand worden bijgewerkt bij een wijziging
Voor alle knoppen die aan en uit kunnen staan moet minstens één van de volgende zaken gelden:
- De knop heeft een aria-pressed-attribuut dat meeverandert met de toestand
- De knop heeft de rol switch en een aria-checked-attribuut dat meeverandert met de toestand
- De toegankelijke naam verandert mee met de toestand

Formulierelementen

Formulierelementen moeten een toegankelijke naam hebben
Formulierelementen moeten een passende rol hebben
De toestand van een formulierelement moet in de code overeenkomen met de zichtbare toestand
De waarde van een formulierelement moet in de code overeenkomen met de zichtbare waarde

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
Bij een maatwerk bedieningselement moet de focus in de code liggen op het onderdeel dat visueel de focus heeft
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

Toegankelijkheidsondersteuning

Minstens één van de twee schermlezers moet de toegankelijke naam, rol, toestand en waarde van een bedieningselement aankondigen
Minstens één van de twee schermlezers moet na een wijziging de nieuwe toestand, waarde of toegankelijke naam van een bedieningselement aankondigen

ARIA

De ARIA-rol van een bedieningselement moet bestaan in WAI-ARIA
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 for, aria-labelledby en aria-activedescendant moeten naar een bestaand element verwijzen
Id-waarden waarnaar deze attributen verwijzen 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