Label in naam
“Lees meer.”
Op het eerste gezicht een duidelijke knop. Maar stel je voor dat deze knop in de code eigenlijk “Bekijk artikel over digitale toegankelijkheid” heet. Wat je ziet, is dus niet hetzelfde als wat technologie “ziet”.
Voor veel gebruikers geen probleem. Maar voor iemand die spraakbesturing gebruikt en “Klik op lees meer” zegt, is dat ineens wél een probleem.
Daar komt WCAG 2.5.3 Label in naam om de hoek kijken.
WCAG 2.5.3 – Label in naam
Succescriterium 2.5.3 vereist dat de visueel zichtbare tekst op een interactief element onderdeel is van de toegankelijkheidsnaam van dat element. Met andere woorden: wat je ziet, moet ook overeenkomen met wat technologie als label herkent. Klinkt misschien als vanzelfsprekend, maar toch gaat dit nog heel vaak mis.
Waarom is dit belangrijk?
Dit succescriterium is bedoeld om spraakbediening mogelijk te maken. Dit is belangrijk voor mensen voor wie het bedienen van een website of app met een muis, touchscreen of toetsenbord niet vanzelfsprekend is. Zij kunnen navigeren door de zichtbare tekstlabels van bijvoorbeeld links en knoppen op het scherm uit te spreken.
Denk bijvoorbeeld aan mensen die:
moeite hebben met fijne motoriek
een tijdelijke beperking hebben (bijvoorbeeld een blessure)
hun handen niet kunnen gebruiken
of simpelweg hun telefoon handsfree willen bedienen
Spraakbesturing werkt vaak op basis van wat er visueel op het scherm staat. Je zegt wat je ziet. Als die zichtbare tekst dan niet overeenkomt met de onderliggende toegankelijkheidsnaam, ontstaat er een mismatch. En daarmee een ontoegankelijke ervaring.
Van toegankelijkheid naar gemak (voor iedereen)
Wat dit succescriterium extra interessant maakt, is dat het een mooi voorbeeld is van hoe toegankelijkheid vaak voor iedereen voordelen oplevert.
Neem bijvoorbeeld de bekende schuine stoepranden. Ooit ontworpen voor rolstoelgebruikers, maar inmiddels onmisbaar voor:
ouders met kinderwagens
reizigers met koffers
en postbezorgers met karren vol pakketjes
Hetzelfde geldt voor spraakbesturing. Wat begon als een hulpmiddel voor mensen met een beperking, wordt nu massaal gebruikt via assistenten zoals Siri en Google Assistant. Even snel een berichtje sturen, een timer zetten of een route starten zonder je handen te gebruiken: het is voor veel mensen gewoon handig geworden in het dagelijks gebruik.
Veelvoorkomende problemen
De problemen die ik in mijn onderzoeken bij dit succescriterium tegenkom, lopen sterk uiteen. Enkele veelvoorkomende problemen zijn:
Links met een afbeelding met tekst zoals een logo, waarbij niet alle zichtbare tekst op het logo terugkomt in de toegankelijkheidsnaam. Ook bijvoorbeeld de slogan bij een logo moet in de naam terugkomen, zoals je hier bijvoorbeeld ziet:
Links met een afbeelding waar geen tekstalternatief aan is gegeven. De link heeft hierdoor geen toegankelijkheidsnaam, waardoor bijvoorbeeld het linkdoel onduidelijk is maar ook spraakbediening niet mogelijk is. Met zo’n probleem heb je gelijk toegankelijkheidsproblemen bij de succescriteria 1.1.1, 2.4.4, 2.5.3 én 4.1.2 te pakken.
Een overzicht van bijvoorbeeld nieuwsartikelen met bij ieder artikel een “Lees verder” link. Op de link is dan een aria-label geplaatst om het linkdoel te verduidelijken, bijvoorbeeld “Bekijk artikel over digitale toegankelijkheid”. Of “Lees meer over digitale toegankelijkheid”. De spraakbesturing werkt dan niet, omdat “Lees verder” niet (helemaal) in de naam terugkomt. Een aria-label als “Lees verder over digitale toegankelijkheid” zou dan wel werken.
Een invoerveld met alleen placeholdertekst (geen ander label), waarvan de toegankelijkheidsnaam niet de zichtbare placeholdertekst bevat. Bijvoorbeeld bij een zoekveld. Let op dat een invoerveld met alleen placeholdertekst vaak ook een toegankelijkheidsprobleem onder succescriterium 3.3.2 oplevert.
Hoe los je dit op?
De belangrijkste regel is eigenlijk verrassend simpel:
→ Zorg dat de zichtbare tekst letterlijk voorkomt in de toegankelijke naam.
Dat betekent niet dat je geen extra context mag toevoegen, maar wél dat de volledige zichtbare tekst altijd aanwezig moet zijn. Hierbij is het belangrijk dat de visueel zichtbare tekst wel in dezelfde volgorde terugkomt in de toegankelijkheidsnaam. Het beste is als de zichtbare tekst daarbij ook aan het begin van de toegankelijkheidsnaam terugkomt.
Wil je dit zelf checken? Gebruik de developer tools in je browser (bijvoorbeeld het toegankelijkheidspanel in Chrome of Firefox) om per element te bekijken welke toegankelijkheidsnaam wordt gebruikt.
