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

Rekommendationer för maskinläsbara etiketterLänk hit

• Ta reda på vilken maskinläsbar etikett som används för kontrollen.
• Se till att den maskinläsbara etiketten matchar den synliga.
• Använd bara samma maskinläsbara etikett för flera kontroller om de gör exakt samma sak.

Ta reda på vilken maskinläsbar etikett som används för kontrollenLänk hit

Genom webbläsarens tillgänglighets-api hämtar både skärmläsare, program för röststyrning och vissa andra hjälpmedel en maskinläsbar etikett (accessible name) för varje kontroll på sidan (till exempel knappar, länkar, sliders och rullgardinsmenyer). Etiketten beräknas enligt en algoritm som tar hänsyn till både synligt textinnehåll och osynliga attribut som exempelvis aria-label, alt, value, title, desc (i SVG) och aria-valuenow. Även kopplade element (exempelvis label eller element utpekade med aria-labelledby) kan användas i beräkningen.  Algoritmen håller på att standardiseras, men än så länge varierar den lite mellan olika tekniska plattformar.

Du kan granska den maskinläsbara etiketten med hjälp av en skärmläsare eller med utvecklarverktyg som till exempel aViewer (Windows) eller Accessibility Inspector (Firefox) eller med F12-Utvecklingsverktyg som finns inbyggt i webbläsaren Edge (Använd element-väljaren och leta sedan efter Namn under fliken “Hjälpmedel”):

Se till att den maskinläsbara etiketten matchar den synligaLänk hit

Ibland kan det vara svårt att räkna ut vilken kombination av all text i html-koden som utgör den maskinläsbara etiketten. Du kan antingen testa dig fram eller använda attributet aria-label (som “vinner” över övriga alternativ) för att påverka den maskinläsbara etiketten.

Den maskinläsbara etiketten behöver inte vara identisk med den text som visas på kontrollen, men den bör inledas på exakt samma sätt:

Exempel på fel: <button aria-label=”Stäng”>X</button>
Bättre: <button aria-label=”X Stäng”>X</button>

Använd bara samma maskinläsbara etikett för flera kontroller om de gör exakt samma sakLänk hit

Vilken knapp ska aktiveras när användaren med röststyrning säger knappens namn (maskinläsbar etikett) om det finns flera andra knappar med samma namn? Risken är att det inte blir den knapp som avsågs. Därför bör olika funktioner ha olika namn.

Utdrag från WCAG-standardenLänk hit

Riktlinje 2.5 Input Modalities
Make it easier for users to operate functionality through various inputs beyond keyboard.

2.5.3 Label in Name For user interface components with labels that include text or images of text, the name contains the text that is presented visually. (Nivå A)

Relaterade riktlinjer och fördjupningLänk hit

Paciello group har en bra artikel om maskinläsbara etiketter och Simply accessible har en introduktion till tillgänglighets-api:et. Båda är på engelska.

Rekommendationer för utformning av etiketter/ledtexter i formulär finns i Skapa tydliga och klickbara fältetiketter (R55).

TerminologiLänk hit

När vi skriver maskinläsbara etiketter i denna riktlinje syftar vi på det som i relevanta standarder på engelska heter Accessible name, eller bara name, som i WCAG-specifikationen.