WCAG 2.5.3 Etiketter i namn

När en knapp eller länk har en synlig text ska samma text finnas med i det namn som hjälpmedel läser, helst först. Den som styr datorn med rösten säger det som står på knappen, till exempel ”klicka Köp”. Har knappen fått ett annat namn med aria-label hittar röststyrningen den inte. Den som använder skärmläsare och ser skärmen samtidigt blir också förvirrad när det som läses upp inte stämmer med det som syns.

• Knappen visar ”Köp” men har aria-label="Lägg produkten i varukorgen".
• Länken ”Visa alla” har ett aria-label som bara säger kategorins namn.
• Ikonknappar med synlig text under ikonen, där aria-label har ett annat ord, till exempel ”Kundkorg” under en knapp som heter ”Varukorg”.
• Fält där den synliga etiketten säger ”Postnr” men aria-label säger ”Ange ditt postnummer”.

Använd den synliga texten som namn och låt bli aria-label när texten räcker. Behövs mer information, lägg den efter den synliga texten.

<!-- Röststyrning hittar inte knappen med ”Köp” -->
<button aria-label="Lägg produkten i varukorgen">Köp</button>

<!-- Den synliga texten först i namnet -->
<button>Köp <span class="dold">Ullkofta grå</span></button>

Kontrollera själv

Ingen av de automatiska kontrollerna jämför den synliga texten med namnet i koden. Leta efter aria-label på knappar och länkar som också har synlig text, och kontrollera att texten finns med. Röststyrning finns inbyggd i både iPhone och Windows om du vill prova på riktigt.

• Understanding 2.5.3 Label in Name hos W3C (på engelska)
• Kravet i Diggs webbriktlinjer

Kravet 2.5.3 är nytt i WCAG 2.1 och finns inte i W3C:s svenska översättning, som gäller WCAG 2.0. Det svenska namnet kommer därför från Diggs webbriktlinjer.