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 vertelt wat het element is, 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 dit automatisch. Bouw je een maatwerk component, zoals een eigen accordion 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 accordion 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.
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 accordion of menu, en werk dit bij zodra de staat verandert. - Gebruik
aria-checked="true"of"false"bij custom selectievakjes en keuzerondjes. - Gebruik
aria-selected="true"of"false"bij tabbladen, opties in een keuzelijst of items in een lijst. - Gebruik
aria-pressed="true"of"false"bij een schakelknop. - Gebruik
aria-valuenow,aria-valueminenaria-valuemaxbij een maatwerk schuifregelaar, en werkaria-valuenowbij tijdens het schuiven. - Gebruik
aria-disabled="true"voor elementen die tijdelijk niet bedienbaar zijn. - Gebruik
aria-required="true"voor verplichte velden die niet met het HTML-attribuut required zijn opgemaakt. - Gebruik
aria-invalid="true"bij een formulierveld met een foutieve invoer. - Gebruik
aria-current="page"(of"step","date", enzovoort) om aan te geven welk item in een reeks het huidige is, bijvoorbeeld de actieve pagina in de paginanavigatie. - Gebruik
aria-activedescendantbij een custom combobox of autocomplete, om aan te geven welke optie in de lijst actief is zonder dat de focus echt verplaatst.
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?
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)
- Bepaal welke bedieningselementen er zijn:
- Zoek in de code naar links (
<a>-element methref-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:
requiredofaria-required - Alleen-lezen:
readonlyofaria-readonly - Uitgeschakeld:
disabledofaria-disabled - Ongeldig:
aria-invalid
- Verplicht veld:
- 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
- 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)
- Of ARIA-attributen worden bijgewerkt bij toestandswijzigingen (zoals
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/verberg-secties)
- Carrousels
- Comboboxen
- Dialoogvensters
- Schuifregelaars
- Tabpanelen
- Switches
- Toggles
- Tooltips
- Navigatie of applicatie-acties
- (Andere maatwerk bedieningselementen)
- Bepaal welke maatwerk componenten er zijn:
- 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 (bijvoorbeeld
aria-checkedbijrole="switch",aria-valuenowbijrole="slider",aria-expandedbijrole="combobox") - 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 componenten in de accessibility tree (Inspector):
- Of de naam correct is
- Of de rol correct is (zoals tab, tabpanel, dialog, combobox, listbox, tooltip, 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
- Carrousel: huidige slide
- Dialoogvenster: modaal of niet-modaal
- Combobox: uitgeklapt of ingeklapt
- Tabpaneel: geselecteerd of niet geselecteerd
- Tooltip: getoond of verborgen
- Switch: aan of uit
- Toggle: ingedrukt of niet ingedrukt
- Menu: uitgeklapt of ingeklapt
- Of de eigenschappen (indien van toepassing) correct zijn:
- Verplicht veld:
requiredofaria-required - Alleen-lezen:
readonlyofaria-readonly - Uitgeschakeld:
disabledofaria-disabled - Combobox:
aria-multiselectable, als meerdere opties te kiezen zijn
- Verplicht veld:
- 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
- Of de ARIA-attributen worden bijgewerkt bij toestandswijzigingen (zoals
- 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-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
- Of
id-verwijzingen inaria-labelledby,aria-describedbyenaria-controlsnaar een bestaand element verwijzen - Of
id-waarden waarnaar wordt verwezen uniek zijn
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
- Of er geen
Beoordeling
Links
- Links moeten een toegankelijke naam hebben
- Links moeten een passende rol hebben
- De toestand van links moet aangegeven worden in de code (indien van toepassing)
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 eigenschappen van knoppen moeten aangegeven worden in de code (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 eigenschappen van formulierelementen moeten aangegeven worden in de code (indien van toepassing)
- De waarde van formulierelementen moet aangegeven worden in de code (indien van toepassing)
Maatwerk
- 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 eigenschappen van maatwerk componenten moeten aangegeven worden in de code (indien van toepassing)
- De waarde van maatwerk componenten moet aangegeven worden in de code (indien van toepassing)
- Vereiste parent-child-relaties van maatwerk componenten moeten correct zijn
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)