Label in naam

Silktide vergelijkt de tekst die bezoekers op knoppen en links kunnen zien met de naam die hulptechnologie voor dezelfde bediening gebruikt. Wanneer de twee niet overeenkomen, kunnen mensen die websites met hun stem bedienen de bediening niet activeren door te zeggen wat ze zien.

Waarom dit belangrijk is

Gebruikers van spraakherkenning kijken naar het scherm en zeggen wat ze zien: "klik op Verzenden". De software vergelijkt die woorden met de van elke bediening: de naam die gebruikt. Attributen zoals aria-label vervangen die naam. Een knop waarop "Verzenden" staat maar die het label aria-label="Indienen" heeft, reageert dus alleen op "klik op Indienen". Het zichtbare woord werkt stilletjes niet, en de gebruiker kan de verborgen naam die hij of zij had moeten zeggen nergens achterhalen.

De afwijking zorgt ook voor verwarring bij gebruikers van die samenwerken met ziende collega's: zij horen een andere naam dan de persoon naast hen ziet.

Dit is succescriterium 2.5.3 van (Label in naam), een vereiste van en onderdeel van het meest basale conformiteitsniveau.

Zo lost u dit op

Verwijder de -overschrijving als die niets toevoegt: een knop waarvan de zichtbare tekst al beschrijft wat de knop doet, heeft geen aria-label nodig.
Begin de overschrijving met de zichtbare tekst als die extra context toevoegt: aria-label="Meer lezen over prijzen" voor een link met de tekst "Meer lezen" zorgt ervoor dat de gesproken opdracht blijft werken.
Gebruik aria-label nooit om iets anders te zeggen dan de zichtbare tekst.

<!-- Probleem: zegt "Verzenden" maar reageert op "Indienen" -->
<button aria-label="Submit">Send</button>

<!-- Oplossing: zichtbare tekst opgenomen in de toegankelijke naam -->
<button aria-label="Send message">Send</button>

<!-- Eenvoudigste oplossing: helemaal geen overschrijving -->
<button>Send</button>

Zo test Silktide dit

Zoek op elke pagina de zichtbare knoppen en links, inclusief elementen met een ARIA-rol button of link.
Test alleen bedieningen waarvan de naam wordt overschreven met aria-label of aria-labelledby. Zonder overschrijving is de zichtbare tekst de toegankelijke naam en wordt automatisch aan het criterium voldaan.
Lees het zichtbare label van de bediening: de tekstinhoud plus de van afbeeldingen die erin staan. Labels die korter zijn dan 2 tekens worden overgeslagen, net als bedieningen met een lege toegankelijke naam (een afzonderlijk probleem dat door andere controles wordt afgedekt).
Normaliseer beide tekenreeksen door hoofdletters om te zetten naar kleine letters, spaties samen te voegen en decoratieve leestekens te verwijderen. Vereis vervolgens dat het zichtbare label voorkomt in de toegankelijke naam.
Accepteer bij kaartachtige links met een kop plus aanvullende tekst de kop als label, omdat dat de tekst is die een bezoeker van nature zou uitspreken.

Problemen oplossen

De toegankelijke naam is langer dan de zichtbare tekst

Dat is prima, zolang de zichtbare tekst erin voorkomt. WCAG raadt aan dat de toegankelijke naam met de zichtbare tekst begint, maar elke plaatsing voldoet aan deze controle.

Formuliervelden worden niet getest

Tekstinvoervelden en andere formuliervelden ontlenen hun zichtbare label aan een <label>-element in plaats van aan hun eigen tekst. Daarom vallen ze onder afzonderlijke labelcontroles en niet onder deze controle.