Se till att komponenter fungerar i hjälpmedel

Om riktlinjen

  • Innehåller lagkrav
  • EN 9.4.1.2
  • WCAG 4.1.2 (A)

Område

Personer som använder skärmläsare är beroende av att det innehåll som finns på webbplatsen kan tolkas och läsas upp av skärmläsaren. Då behöver de olika komponenterna på webbplatsen fungera med hjälpmedlet.

Därför behöver namn, roll och värde för komponenter fungera i hjälpmedel

Komponenter i användargränssnittet behöver exponera namn, roll och värde till operativsystemets tillgänglighets-API för att fungera med vissa hjälpmedel.

Många personer behöver hjälpmedel som exempelvis skärmläsarprogram, förstoringsprogram eller punktdisplay. När komponenterna är rätt kodade kan hjälpmedlet presentera dem på ett korrekt sätt. En skärmläsare behöver till exempel kunna berätta för personen vad en komponent heter, vad den har för roll (exempelvis om det är en knapp eller en kryssruta), och när förändringar av komponenten sker.

Vad kräver lagen?

Hjälpmedel kommunicerar med operativsystemets tillgänglighets-API. För att det ska fungera behöver komponenterna på en webbsida eller i en applikation vid varje tillfälle exponera sitt namn, sin roll och sitt aktuella tillstånd eller värde maskinläsbart.

Tillgängliggör komponenter

Standardkomponenter som finns i html uppfyller vanligtvis detta krav. För egenutvecklade komponenter kan ibland ARIA (Accessible Rich Internet Applications) vara användbart för att tillgängliggöra dem. ARIA är en uppsättning attribut för att förmedla roller, egenskaper och tillstånd hos komponenter så att de blir åtkomliga för hjälpmedel.

Rekommendationer utöver lagkrav

Förutom lagkraven finns det rekommendationer som kan förbättra den digitala tillgängligheten:

Gör tydliga användbara knappar

Se till att knappar är lätta att förstå och använda. Namnge knapparna tydligt, och på vedertagna sätt.

Rekommendationer för knappar

  • Namnge knappar så att användarna förstår vad som händer när de klickar på dem.
  • Ge knapparna en logisk och användbar placering.
  • Använd lagom många knappar.
  • Presentera inte knappens text enbart som bild.

Namnge knappar så att användarna förstår vad som händer när de klickar på dem

Använd gärna verb såsom ”Spara” eller ”Skicka”, ”Beräkna slutpension” eller ”Lägg till ny inkomst”.

Om webbplatsen erbjuder olika sökfunktioner, till exempel i databaser, bör sök-knapparna vara tydligt och informativt namngivna utifrån sitt syfte.
En knapp kan då till exempel heta ”Sök på webbplatsen” och en annan ”Sök blankett”.

Ge knapparna en logisk och användbar placering

  • Placera knappar visuellt och flödesmässigt i en logisk ordning, så att användarna enkelt kan navigera även med hjälp av tangentbordet.
  • Markera extra tydligt den knapp som tar användaren till nästa steg.
  • Den knapp som tar användaren till nästa steg ska ligga sist på formulärsidan.
  • Se till att ha tillräckligt avstånd mellan knapparna så att det enkelt går att skilja dem åt.

Använd lagom många knappar

Använd inte onödigt många knappar i formulär. Många personer har svårare att använda komplexa formulär.

Överväg till exempel att avstå från rensa-knappar i formulär. Risken att en person av misstag rensar alla fält är ofta större än behovet att kunna rensa alla fält.

Givetvis behövs vissa knappar. Om ett formulär består av flera sidor, bör det finnas knappar för att navigera mellan sidorna. Namnge dem “Föregående” och “Nästa”. Om det finns en ”avbryt”-knapp där ska den avbryta hela flödet, inte bara gå tillbaka till föregående sida i formuläret.
I regel ska en sökfunktion för hela webbplatsen finnas med på alla sidor, i globalmenyn, och ha en tydlig sök-knapp.

Presentera inte knappens text enbart som bild

Ni kan göra undantag om ni bedömer att det blir tydligast med en bildknapp, till exempel för aktionsknappar som tydligt visar huvudflödet genom en webbapplikation. I så fall ska texten i knappen vara 12 px eller större.

Bildbaserade knappar ska ha textalternativ, som behöver formuleras med omsorg.

Så testar du att komponenter fungerar i hjälpmedel

Använd utvecklarverktyg i webbläsaren, exempelvis Inspektören i Chrome, för att inspektera tillgänglighetsegenskaper. Andra webbläsare har liknande verktyg.

Gå igenom sidan med skärmläsare och kontrollera att komponenters namn och roller läses upp. Testa också att ändrade värden förmedlas av skärmläsaren.

Utdrag ur WCAG

WCAG 4.1.2 (A) Namn, roll, värde

För alla komponenter i ett användargränssnitt (inklusive, men inte begränsat till formulärelement, länkar och komponenter skapade med script), kan namnet och rollen automatiskt tydliggöras. Status, egenskaper och värden som kan anges av användaren kan bli automatiskt tydliggjord, och meddelande om ändringar i dessa komponenter finns åtkomliga för användarprogram, inklusive hjälpmedel.

Därför länkar vi till WCAG på svenska och engelska.

Hjälpte denna information dig?

Ditt svar hjälper oss att förbättra sidan

Senast uppdaterad: