Se till att text på knappar och kontroller överensstämmer med maskinläsbara namn

Om riktlinjen

Innehåller lagkrav
EN 9.2.5.3
WCAG 2.5.3 (A)

Område

Knappar och länkar som har en synlig text ska vara uppmärkta kodmässigt så att namnet åtminstone innehåller samma text. Det underlättar för personer som använder röststyrning eller skärmläsare att hitta och använda knappar och länkar på samma sätt som seende kan.

Därför behöver knappens synliga namn stämma överens med det kodade namnet

Personer som använder röststyrning säger vanligtvis det som står på en knapp för att använda knappen. Detta fungerar om det som står på knappen motsvarar den maskinläsbara texten. Upplevelsen för seende som använder skärmläsare blir också bättre om uppläst text matchar det som visas på skärmen.

Vad kräver lagen?

Se till att text som är synlig på knappar och andra gränssnittskontroller också finns i det maskinläsbara namn som kontrollen har i exempelvis program för röststyrning.

Det maskinläsbara namnet behöver inte vara identiskt med den text som visas på kontrollen, men den ska innehålla exakt samma text.

Fel: <button aria-label="Visa hur jag använder funktionen”>Hjälp</button>
Bättre: <button aria-label=”Hjälp mig använda funktionen”>Hjälp</button>

Rekommendationer utöver lagkrav

Utöver det lagen kräver finns ett antal tips och rekommendationer för hur du kan arbeta med synligt namn och maskinläsbart namn på knappar och kontroller för att förbättra digital tillgänglighet:

Samma namn för att utföra samma sak

Använd bara samma maskinläsbara namn för flera kontroller om de gör exakt samma sak.

Exempel: flera knappar som heter Läs mer

På en webbsida finns det flera knappar med samma namn: ”Läs mer”. Vilken knapp ska då aktiveras när personen som använder röststyrning säger detta namn? Risken är att det inte blir den knapp som avsågs. Därför bör olika funktioner ha olika namn.

Så testar du maskinläsbara etiketter

Ta reda på vilket maskinläsbart namn som används för kontrollen.
Se till att det maskinläsbara namnet innehåller den synliga texten.

Du kan granska det maskinläsbara namnet med hjälp av en skärmläsare eller med utvecklarverktyg som finns i webbläsaren (Inspektören).

Ibland kan det vara svårt att räkna ut vilken text i html-koden som utgör det maskinläsbara namnet. Exempelvis ”vinner” attributet aria-label över övriga alternativ som påverkar det maskinläsbara namnet. Detta går ibland att utläsa i ”tillgänglighetsträdet” som kan visas av webbläsarnas utvecklarverktyg.