Ga naar hoofdinhoud

WCAG

WCAG-succescriterium 2.5.3 Label in Naam

Niveau A

In het kort

Doel
De zichtbare naam kan gebruikt worden voor spraakbediening.
Wat te doen
Laat de zichtbare naam overeenkomen met de toegankelijke naam.
Waarom het belangrijk is
Mensen met spraakbediening gebruiken de zichtbare naam voor bediening.

Uitleg

De zichtbare naam van een onderdeel moet terugkomen in de toegankelijke naam.

De zichtbare naam is wat veel gebruikers zien als ze een website gebruiken. Denk hierbij aan labels bij invoervelden, linkteksten of de inhoud van een knop.

Iemand die spraakbediening gebruikt zal deze naam gebruiken bij het uitspreken van commando's. "Klik contact" zorgt ervoor dat het onderdeel dat "contact" heet geactiveerd wordt. De software voor spraakbediening gebruikt hiervoor de toegankelijke naam. Als die niet overeenkomt met de zichtbare naam, dan kan de software het commando niet uitvoeren. Ook als veel onderdelen op de pagina hetzelfde heten kan dit een probleem zijn. Denk hierbij aan linkteksten als "lees meer" of "hier".

Gerelateerde NL Design System-richtlijnen

Bronnen en tools

Hoe te testen

  • Controleer voor elk interactief onderdeel wat de zichtbare naam is.
  • Gebruik een tool zoals de "accessibility pane" in Chrome of een screenreader om de toegankelijke naam te vinden.
  • Zorg dat de zichtbare naam onderdeel is van de toegankelijke naam.

Tips

  • Gebruik geen placeholder-attributen. Deze kunnen een toegankelijk naam geven, maar verdwijnen zodra de gebruiker ze het meest nodig heeft. Daarnaast zijn ze een bron van problemen met contrast en zorgen ze voor verwarring.
  • Gebruik zo weinig mogelijk title-attributen. Dit attribuut is een soort laatste redmiddel om iets een toegankelijke naam te geven. Het is de laatste in een rij met opties en geeft vaak verkeerde en onverwachte resultaten. Frames een naam geven is de uitzondering op deze regel.
  • Wees spaarzaam met het gebruik van aria-labelledby en aria-label. De eerste regel van ARIA-gebruik stuurt op zo min mogelijk ARIA-gebruik. HTML wordt beter ondersteund dan ARIA. Deze attributen zijn ook verreweg de makkelijkste manier om te falen voor dit succescriterium. Daarnaast worden deze attributen vaak slecht meegenomen bij veranderingen van code en door tools (en mensen) die vertalen.
  • Zorg voor unieke toegankelijke namen op een pagina. Dit maakt het gebruik van spraakbediening makkelijker.
  • Voor dit succescriterium is het ook belangrijk om tekst in afbeeldingen in het tekstalternatief te gebruiken. Zo kan de afbeelding als zichtbare naam gebruikt worden.

Veelgemaakte fouten

Fout: aria-label overschrijft de zichtbare naam

Het aria-label-attribuut overschrijft de zichtbare naam bij het bepalen van de toegankelijke naam. Waar men denkt de zichtbare naam aan te vullen, daar gaat deze juist verloren.

<!-- Foute code, niet gebruiken  ->
<a href="#" aria-label=", opent externe website">Geef uw melding door</a>

In dit voorbeeld wordt de toegankelijke naam ", opent externe website" in plaats van "Geef uw melding door, opent externe website".

Gebruikersonderzoek

Heb je gebruikersonderzoek gedaan dat betrekking heeft op dit succescriterium en wil je dit delen? Kijk eens bij Gebruikersonderzoeken delen op gebruikersonderzoeken.nl.

W3C referenties

Belangrijk: De richtlijnen van NL Design System zijn geen wettelijke verplichting

De richtlijnen van NL Design System zijn niet wettelijk verplicht en zijn geen vervanging voor de wettelijk geldende WCAG 2.1 specificatie.

Ons doel is om praktische uitleg en voorbeelden te geven die helpen bij het toegankelijk inzetten van de NL Design System componenten, patronen en richtlijnen. We doen dat op basis van een interpretatie van de nieuwe WCAG 2.2 specificatie.

Weten waar je volgens de wet aan moet voldoen? Ga dan naar wat is verplicht van DigiToegankelijk.

Help richtlijn verbeteren

Deze pagina's over WCAG worden onderhouden door NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.