Förenklad beskrivning av WCAG-kriteriet 2.4.3

Gör en logisk tab-ordning

Vissa användare navigerar med hjälp av tangentbord eller andra inmatningsenheter som i turordning kan flytta fokus mellan sidans olika element (snarare än direkt via koordinater som till exempel mus eller pekskärm). Det vanligaste är att tab-tangenten används, men i vissa fall används även andra tangenter, till exempel pilar.
Del av tangentbord
Bild av tab-tangent (cc-by Kai Hendry)

För dessa användare är det viktigt att fokus-ordningen är logisk i förhållande till hur innehållet presenteras på skärm eller i skärmläsare. Om fokus flyttar till ett oväntat element kan det vara mycket förvirrande, och orsaka fel.

Antalet missförstånd kan minska något om fokus framhävs visuellt (se R140. Markera tydligt vilket fält eller element som är i fokus). Men detta hjälper inte personer som är beroende av skärmläsare, eller av kraftig förstoring. Och även personer som tydligt kan se vilket element som är i fokus kan få svårt att hänga med om fokus hoppar hit och dit på sidan.

Oftast följer fokusordningen den ordning som innehållet har i html-koden, men det är inte alltid den ordningen överensstämmer med presentationen (Se R122. Presentera innehållet i en meningsfull ordning för alla).


Rekommendationer för tab-ordningLänk hit

  • Kontrollera ordningen utan pekdon.
  • Säkerställ en logisk ordning med tabindex.


Kontrollera ordningen utan pekdonLänk hit

Testa tab-ordningen genom att granska en sida av varje sidtyp utan hjälp av tryckkänslig skärm, mus eller annat pekdon. Både visuell presentation och skärmläsarpresentation bör testas, eftersom ordningen kan skilja sig åt.


Säkerställ en logisk ordning med tabindexLänk hit

Justera ordningen med hjälp av html-attributet tabindex. Det kan anges i html-kod eller ändras dynamiskt med javascript. De presenteras i följande ordning 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.


Tangentbordsnavigation i dialogrutorLänk hit

När en så kallad modal dialogruta visas bör fokusordningen enbart innehålla de element som ingår i dialogrutan. När dialogen stängs bör fokus återgå till närmast efterföljande element eller till det element användaren hade i fokus innan dialogrutan öppnades.


Utdrag från WCAG-standardenLänk hit

Riktlinje 2.4 Navigerbart: Tillhandahåll sätt att hjälpa användarna att navigera, hitta innehåll och avgöra var de är.

2.4.3 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. (Nivå A)


TerminologiLänk hit

För att den som händelsevis söker efter tabbordning nämner vi den stavningen här, även om vår tolkning av Svenska skrivregler är att tab-ordning är en bättre språklig variant.



Kommentarer (0)