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

  • Andreas Rissveds skriver:

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

    • Ilias Bennani skriver:

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


Om denna riktlinje

Den är relevant för DOS-lagen.

Status på vår webbplats


(Då uppdateras status i checklistorna.)

Om WCAG

WCAG (Web Content Accessibility Guidelines) är den standard som bland annat webbdirektivet och DOS-lagen bygger på. Se sidan Följ standarder för tillgänglighet.

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