Se till att text på knappar och kontroller överensstämmer med maskinläsbara etiketter
Se till att text som är synlig på knappar och andra gränssnittskontroller också finns i, och överensstämmer med, den maskinläsbara etikett som representerar kontrollen i exempelvis program för röststyrning.
Den 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.
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 standardiserad algoritm som tar hänsyn till både synligt textinnehåll och osynliga attribut som exempelvis aria-label
, alt
, value
, title
, desc
(gäller SVG) och aria-valuenow
. Även kopplade element (exempelvis label
eller element utpekade med aria-labelledby
) kan användas i beräkningen.
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="Visa hur jag använder funktionen”>Hjälp</button>
Bättre: <button aria-label=”Hjälp mig använda funktionen”>Hjälp</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
Förutom sidan Understanding 2.5.3 Label in name som förklarar WCAG-kriteriet har W3C en sida om röstigenkänning där de bland annat visar en film om röststyrning.
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.
Kommentarer till denna riktlinje
Kommentarer (0)
Skriv kommentar
Funktionen för att skriva kommentarer använder kakor. Läs mer om kakorna. Enbart förstapartskakor används. Vill du inte godkänna kakor så kan du ställa in din webbläsare att blockera dem. Funktionen går ändå att använda men den kommer då att ställa vissa frågor om och om igen, och kan inte förhandsvisa dina kommentarer.
För att kunna erbjuda denna funktion behöver vi lagra de uppgifter som du själv skriver in (namn, e-post, eventuell webbadress och själva kommentaren) samt IP-nummer. Den rättsliga grunden är samtycke och informationen ligger kvar så länge DIGG bedömer att den tillför förståelse för riktlinjen, eller tills du begär att den raderas. Läs mer om DIGGs behandling av personuppgifter.