Campus Design System

Appearance

4.1.2 Naam, Rol, Waarde niveau A ​

Uitleg ​

Het WCAG-criterium 4.1.2 Naam, Rol, Waarde heeft betrekking op interactieve elementen (zoals knoppen, formuliervelden en andere gebruikersinterface-elementen) op een webpagina. Dit criterium is van toepassing op alle elementen die door de gebruiker geactiveerd kunnen worden, en het stelt dat deze elementen voor gebruikers van technologieën voor toegang (zoals schermlezers) duidelijk geïdentificeerd moeten zijn.

Het doel is dat interactieve elementen voor alle gebruikers juist benoemd, correct geclassificeerd (rol) en in staat zijn om hun waarden te communiceren wanneer dit van toepassing is. Dit zorgt ervoor dat gebruikers, vooral zij die gebruikmaken van assistieve technologie, een goed begrip hebben van de context en functionaliteit van de interface-elementen.

Wat houdt het in? ​

Volgens dit criterium moeten alle interactieve elementen op een pagina de volgende eigenschappen hebben:

  1. Naam: Elk interactief element (zoals een knop, link, formulierveld, enz.) moet een duidelijke naam hebben. Dit kan een tekstlabel zijn, een titel of een andere aanduiding die de functie van het element beschrijft. Bijvoorbeeld, een knop om een formulier in te dienen moet de naam “Verzenden” hebben.

  2. Rol: Elk interactief element moet zijn rol aangeven, bijvoorbeeld of het een knop, een keuzelijst of een formulierinvoer is. Dit helpt gebruikers begrijpen wat het element doet, zonder dat ze het hoeven te raden. Dit kan expliciet worden gedefinieerd in de HTML door bijvoorbeeld de role-attribuut toe te voegen.

  3. Waarde: Sommige interactieve elementen (zoals keuzelijsten, schuifregelaars of formuliervelden) hebben een waarde die de gebruiker kan wijzigen of waarop de gebruiker kan reageren. Het is belangrijk dat de waarde van deze elementen altijd toegankelijk is voor assistieve technologie, zodat gebruikers weten wat de huidige staat is van het element (bijvoorbeeld het geselecteerde optie in een dropdown).

Voorbeelden van het probleem ​

  • Een formulierknop zonder tekstlabel of zonder een alternatieve naam (bijvoorbeeld via aria-label) maakt het voor gebruikers van een schermlezer moeilijk om te begrijpen waar de knop voor dient.
  • Een selectievakje zonder een duidelijke label of zonder een aria-labelledby kan verwarring veroorzaken bij een gebruiker die afhankelijk is van assistieve technologie.

Oplossingen voor dit probleem ​

Om te voldoen aan criterium 4.1.2, moet je ervoor zorgen dat interactie-elementen een naam, rol en waarde hebben die toegankelijk zijn voor assistieve technologie. Dit kan onder andere door:

  1. Gebruik van semantische HTML: Waar mogelijk moet je de juiste HTML-elementen gebruiken die van nature toegankelijk zijn, zoals <button>, <input>, <select>, en <a>. Deze elementen hebben van nature al een naam, rol en waarde die toegankelijk zijn voor schermlezers.

  2. Gebruik van ARIA-rollen en -attributen: Als je een element gebruikt dat niet van nature interactief is (bijvoorbeeld een <div> of <span>), kun je de rol en naam toewijzen via ARIA (Accessible Rich Internet Applications).

    • aria-label: Gebruik dit attribuut om een naam toe te voegen aan een element. Bijvoorbeeld: <button aria-label="Verstuur bericht">.
    • aria-labelledby: Dit attribuut verwijst naar een ander element dat de naam of beschrijving van het element bevat.
    • aria-describedby: Hiermee kun je extra beschrijvende informatie geven die gebruikers helpt te begrijpen wat een element doet.

  3. Dynamische wijzigingen communiceren: Als de waarde van een interactief element kan veranderen (bijvoorbeeld een slider), zorg er dan voor dat de waarde dynamisch wordt bijgewerkt en dat dit via ARIA-live of andere mechanismen aan assistieve technologie wordt gecommuniceerd.

Voorbeeld van een toegankelijke knop met naam, rol en waarde ​

html
<button role="button" aria-label="Verzenden formulier">Verzenden</button>

In dit voorbeeld heeft de knop de rol van “button” en is de naam “Verzenden formulier” via het aria-label attribuut toegevoegd, zodat schermlezers gebruikers kunnen informeren over de functie van de knop.

Voorbeeld van een toegankelijk formulier ​

html
<form action="/submit-form" method="POST">
  <label for="username">Gebruikersnaam:</label>
  <input type="text" id="username" name="username" aria-label="Vul je gebruikersnaam in" required />

  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" aria-label="Vul je e-mail in" required />

  <button type="submit" aria-label="Verzend formulier">Verzenden</button>
</form>

In dit voorbeeld zijn alle velden correct gelabeld en heeft de knop de nodige aria-label voor schermlezers.

Testen en hulpmiddelen ​

  • WAVE Tool: WAVE is een webtoegankelijkheidstool die kan helpen om na te gaan of je interactieve elementen correct hebt gelabeld en een geschikte rol en waarde hebben.
  • axe Accessibility Testing: Dit is een populaire tool voor het testen van webtoegankelijkheid die kan controleren of je voldoet aan de WCAG-richtlijnen, inclusief 4.1.2.
  • NVDA of JAWS: Schermlezers zoals NVDA (voor Windows) of JAWS kunnen helpen te controleren of de naam, rol en waarde van interactieve elementen correct worden uitgesproken.

Referenties ​