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 (2)
”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.”
Ovanstående citat är inte i enlighet med W3C:s rekommendationer. Det finns flertalet element som resulterar i förödande konsekvenser om man gör på det viset. Använder man exempel aria-label eller aria-labelledby på ett objekt i vissa menyer, då kan resterande innehåll i menyerna döljas helt för tillgänglighetsverktyg.
Använder man aria-label eller aria-labelledby på element med role=”group”, som exempelvis elementet , då kommer allt innehåll i element med role=”treeitem” under elementet med role=”group” att bli osynligt för skärmläsare och övriga verktyg. Elementet har rollen treeitem och har vanligtvis role=”tree”, men om man gör en lista i en lista, då får det ul-element som har en till en parent istället role=”group”.
Så hela navbarer kan bli osynliga för skärmläsare. De som använder rösten för att länkas vidare via länkar, kommer i sådant fall inte längre kunna använda länkarna genom att säga länktexten.
Algoritmen som kalkylerar fram namn är inte svår att förstå, inte heller dess fallback-metoder.
Hej Andreas.
Tack för dina exempel. Givetvis ska aria-attribut som t.ex. aria-label användas på ett sådant sätt att det hjälper användaren. Samtidigt måste utvecklaren vara medveten om de negativa konsekvenser som kan uppstå om aria-attribut används på fel sätt, vilket du också ger goda exempel på.
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.