Campus Design System

Appearance

2.5.3 Label in Naam niveau A ​

Uitleg ​

Het WCAG-criterium 2.5.3 Label in Naam heeft betrekking op de naamgeving en beschrijving van interactieve elementen op een webpagina, zoals formulieren, knoppen, keuzelijsten en andere besturingselementen. Het vereist dat het label van een interactief element hetzelfde is als de naam die door een schermlezer wordt gepresenteerd.

Met andere woorden, het is belangrijk dat de naam (of beschrijving) van een element dat interactie mogelijk maakt, zowel visueel (voor sighted users) als via de toegangstechnologieën (zoals schermlezers voor blinden en slechtzienden) consistent en begrijpelijk is.

Dit criterium helpt ervoor te zorgen dat de gebruikersinterface toegankelijker is voor mensen met een beperking, omdat het helpt bij de duidelijkheid en begrijpelijkheid van de elementen op een pagina.

Wat betekent dit in de praktijk? ​

Het betekent dat elk interactief element op de pagina (zoals formulieren, knoppen, links en selectievakken) een duidelijk label moet hebben dat correct gekoppeld is aan de naam die door assistieve technologie wordt gepresenteerd. Bijvoorbeeld, wanneer je een formulier gebruikt, moet het label van een invoerveld hetzelfde zijn als de naam die een schermlezer leest.

  • Formulieren: Een formulier moet een label bevatten voor elk invoerveld, en de naam van dat invoerveld moet consistent zijn met het label. Het label moet correct worden gekoppeld aan het invoerveld, zodat gebruikers van een schermlezer het kunnen begrijpen.

  • Knoppen en links: Elke knop of link moet een naam (label) hebben die een schermlezer kan herkennen. Het label moet het doel of de actie van de knop of link duidelijk beschrijven, bijvoorbeeld "Verzenden" voor een knop die een formulier verzendt, of "Meer informatie" voor een link die naar extra inhoud leidt.

Oplossing voor dit probleem ​

Om aan dit criterium te voldoen, moet je ervoor zorgen dat elk interactief element een correct gekoppeld label heeft. Dit kan worden bereikt door de juiste HTML-elementen en attributen te gebruiken.

  1. Formulierlabels: Elk invoerveld moet een bijbehorend <label>-element hebben dat correct is gekoppeld aan het veld via het for-attribuut.
  2. Knoppen en links: Knoppen en links moeten duidelijke tekst bevatten die als naam wordt gepresenteerd aan gebruikers van een schermlezer.

Voorbeeld van het probleem ​

Stel dat een formulier een knop heeft die de gebruiker naar een nieuwe pagina leidt, maar de naam van de knop is niet goed gekoppeld of is verwarrend voor gebruikers van schermlezers:

html
<!-- Onjuiste implementatie -->
<button id="submitBtn">Klik hier</button>

In dit geval is de knop niet duidelijk voor gebruikers van een schermlezer, omdat de tekst "Klik hier" niet aangeeft wat de knop precies doet (bijvoorbeeld een formulier verzenden of een actie uitvoeren).

Oplossing voor dit probleem ​

Een oplossing is om ervoor te zorgen dat de knop een duidelijke naam heeft die het doel van de knop verduidelijkt. Bijvoorbeeld:

html
<!-- Correcte implementatie -->
<button id="submitBtn" aria-label="Verzend formulier">Verzenden</button>

In dit geval is de naam die door een schermlezer wordt voorgelezen ook "Verzend formulier", wat de actie van de knop duidelijk maakt. Het gebruik van het aria-label-attribuut kan handig zijn als de visuele tekst niet voldoende beschrijvend is.

Voor formulieren moet elk invoerveld een label hebben dat het doel van dat veld beschrijft. Dit kan worden gedaan door het gebruik van het <label>-element:

html
<!-- Correcte implementatie -->
<label for="email">E-mail adres:</label>
<input type="email" id="email" name="email" required />

In dit voorbeeld is het label "E-mail adres" correct gekoppeld aan het invoerveld voor het e-mailadres, en het beschrijft duidelijk wat van de gebruiker wordt verwacht.

Belangrijke overwegingen ​

  • Gebruik van aria-label en aria-labelledby: Wanneer visuele labels niet mogelijk of onduidelijk zijn, kunnen de aria-label en aria-labelledby attributen worden gebruikt om alternatieve beschrijvingen te bieden die door schermlezers kunnen worden gelezen.
  • Gebruik van betekenisvolle namen: Zorg ervoor dat de naam of het label van het element een betekenisvolle beschrijving biedt van wat de actie of het veld doet, zoals "Voer naam in" of "Verzend formulier".
  • Formulieren en knoppen: Het is essentieel om te zorgen dat alle knoppen, invoervelden en andere interactieve elementen die gebruikers moeten bedienen, een duidelijk en toepasselijk label hebben dat begrijpelijk is voor alle gebruikers.

Tools en Hulpmiddelen ​

  • WAVE Accessibility Tool: Deze tool kan helpen bij het controleren of de juiste labels zijn toegewezen aan interactief materiaal. WAVE Tool.
  • aXe Accessibility Tool: De aXe-tool kan de toegankelijkheid van elementen en hun gekoppelde labels testen. aXe Tool.

Referenties ​