Ha en meningsfull fokusordning

Om riktlinjen

  • Innehåller lagkrav
  • EN 9.2.4.3
  • WCAG 2.4.3 (A)

Område

Innehåll ska presenteras på ett logiskt sätt oavsett om en person kan läsa innehåll, behöver ha skärmläsare eller tabbar sig genom länkar och andra interaktiva objekt på webbsidan. Därför är det viktigt att innehållet presenteras i en logisk och meningsfull tabb-ordning.

Därför ska fokusordningen vara logisk och meningsfull

Vissa personer navigerar med hjälp av tangentbord eller andra inmatningsenheter som i turordning kan flytta fokus mellan länkar och andra interaktiva element. Därför är det viktigt att fokus inte hoppar runt på sidan på ett oförutsägbart sätt.

Det vanligaste är att personer använder tabb-tangenten , men i vissa fall används även andra tangenter, till exempel pilar. För dessa personer är det viktigt att fokusordningen är meningsfull. Om fokus flyttar till ett oväntat element kan det vara mycket förvirrande och orsaka att personen gör fel.

Tydlig fokusmarkering är också viktigt

Det är även viktigt att fokusmarkeringar är tydliga visuellt, men även med synliga fokusmarkeringar kan det vara svårt att hänga med om fokus hoppar hit och dit, särskilt för personer som inte uppfattar en visuell fokusmarkering, exempelvis de som använder skärmläsare.

Vad kräver lagen?

Fokuserbara komponenter ska få fokus i en ordning som gör att innehållet blir lätt att förstå och använda.

Menyer och dialogrutor

Om det finns komponenter som öppnar en meny, dialogruta eller liknande ska något av följande vara uppfyllt:

  • Fokus ska sättas till det element som öppnas, eller
  • Det öppnade elementet ska komma direkt efter den komponent som öppnade det i fokusordningen.

När det öppnade elementet stängs ska fokus åter sättas till den komponent som öppnade det.

Rekommendationer utöver lagkrav

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

Så påverkar tabindex fokusordning

På webbsidor följer ofta tabb-ordningen den ordning som innehållet har i html-koden. Det går att påverka fokusordningen på en webbsida med hjälp av html-attributet tabindex. Det kan anges i html-kod eller ändras dynamiskt med javascript. Element presenteras i följande fokusordning för användaren:

  1. Element med tabindex 1, 2, 3 och så vidare i nummerordning. (Om två element har samma tabindex presenteras de i den ordning de förekommer i koden.)
  2. Element som saknar tabindex eller har tabindex 0. Dessa presenteras i den ordning de förekommer i koden. Om användaren därefter fortsätter hamnar fokus återigen på det element som ligger allra först i fokusordningen.
  3. Element med negativt värde på tabindex plockas bort från fokusordningen. Dit kan användaren alltså inte navigera.

Försök att i så stor utsträckning som möjligt ordna interaktiva element i en meningsfull ordning i html-koden, och undvik att använda tabindex större än 0.

Så testar du fokusordningen

Testa fokusordningen genom att navigera mellan fokuserbara element och aktivera interaktiva komponenter med tangentbord. Använd i första hand Tabb-tangenten.

Det finns även verktyg som kan hjälpa till att visa Tabb-ordningen visuellt i webbläsaren.

Utdrag ur WCAG

WCAG 2.4.3 (A) Fokusordning

Om man kan navigera stegvis på en webbsida och navigeringsordningen påverkar betydelse eller användning, så ska fokuserbara komponenter få fokus i en ordning som bevarar betydelse och användning.

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

Relaterade riktlinjer

Hjälpte denna information dig?

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

Senast uppdaterad: