Etikett i namn

Silktide jämför texten som besökare kan se på knappar och länkar med namnet som hjälpmedel använder för samma kontroll. När de två inte stämmer överens kan personer som styr webbplatser med rösten inte aktivera kontrollen genom att säga det de ser.

Varför detta är viktigt

Användare av taligenkänning tittar på skärmen och säger det de ser: ”klicka på Skicka”. Programvaran matchar dessa ord mot varje kontrolls – det namn som använder. Attribut som aria-label ersätter namnet, så en knapp som visar ”Skicka” men har etiketten aria-label="Submit" svarar bara på ”klicka på Submit”. Det synliga ordet fungerar inte, och användaren har inget sätt att upptäcka det dolda namn som hen förväntades säga.

Skillnaden förvirrar också användare av som arbetar tillsammans med seende kollegor och hör ett annat namn än det personen bredvid dem ser.

Detta är framgångskriterium 2.5.3 (Etikett i namn), ett krav på – en del av den mest grundläggande överensstämmelsenivån.

Så åtgärdar du problemet

Ta bort -överskrivningen när den inte tillför något: en knapp vars synliga text redan beskriver vad den gör behöver inget aria-label.
När överskrivningen tillför sammanhang ska du börja den med den synliga texten: aria-label="Read more about pricing" för en länk med texten ”Read more” gör att det talade kommandot fortfarande fungerar.
Använd aldrig aria-label för att säga något annat än den synliga texten.

<!-- Problem: says "Send" but answers to "Submit" -->
<button aria-label="Submit">Send</button>

<!-- Fix: visible text included in the accessible name -->
<button aria-label="Send message">Send</button>

<!-- Simplest fix: no override at all -->
<button>Send</button>

Så testar Silktide detta

Hitta de synliga knapparna och länkarna på varje sida, inklusive element med en ARIA-roll som button eller link.
Testa endast kontroller som överskriver sitt namn med aria-label eller aria-labelledby – utan en överskrivning är den synliga texten det åtkomliga namnet och kriteriet är automatiskt uppfyllt.
Läs kontrollens synliga etikett: dess textinnehåll plus för eventuella bilder i den. Etiketter som är kortare än två tecken hoppas över, liksom kontroller med ett tomt åtkomligt namn (ett separat problem som täcks av andra kontroller).
Normalisera båda strängarna – gör bokstäverna till gemener, slå ihop mellanslag och ta bort dekorativ interpunktion – och kräv sedan att den synliga etiketten förekommer i det åtkomliga namnet.
För länkar i kortformat som innehåller en rubrik plus stödtext godkänner vi rubriken som etikett i stället, eftersom det är den text en besökare naturligt skulle säga.

Felsökning

Det åtkomliga namnet är längre än den synliga texten

Det är i sin ordning, så länge den synliga texten finns med i det. WCAG rekommenderar att det åtkomliga namnet börjar med den synliga texten, men alla placeringar godkänns av den här kontrollen.

Formulärfält testas inte

Textfält och andra formulärfält hämtar sin synliga etikett från ett <label>-element i stället för från sin egen text. Därför täcks de av separata etikettkontroller i stället för den här kontrollen.