Förenklad beskrivning av WCAG-kriteriet 2.5.3

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 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.



Kommentarer (0)


    Om denna riktlinje

    Status på vår webbplats


    (Då uppdateras status i checklistorna.)

    Om WCAG

    WCAG (Web Content Accessibility Guidelines) är den standard som bland annat webbdirektivet bygger på. Se även webbriktlinje Följ WCAG 2.1 nivå AA (R1).

    WCAG 2.1 saknar ännu svensk översättning, men för de formuleringar som är identiska i version 2.0 och 2.1 citeras den officiella översättningen av version 2.0. Utdraget kan dock innehålla fel. Den version som är mest giltig vid uttolkning är det engelskspråkiga originalet på W3C:s webbplats.

    Där finns även de officiella förklaringarna och lösningsförslag till riktlinjen (på engelska).