Gör en logisk tab-ordning
Testa tab-ordningen genom att granska en sida av varje sidtyp utan hjälp av tryckkänslig skärm, mus eller annat pekdon.
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.
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:
- 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.)
- 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.
- Element med negativt värde på tabindex plockas bort från fokusordningen. Dit kan användaren alltså inte navigera.
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)
Relaterade riktlinjerLänk hit
- R129. Utveckla systemet så att det går att hantera med enbart tangentbordet
- R143. Utför inga oväntade förändringar vid fokusering
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 till denna riktlinje
Kommentarer (3)
Hej! Positiva värden på tabindex bör undvikas då den naturliga tab-ordningen förstörs samt skapar en skillnad mellan tab-ordningen och den visuella ordningen.
Enligt WebAIM bör tabindex annat än -1 och 0 undvikas eftersom buggar lätt uppstår när man tvingar en tabordning (saker som inte borde hamna först i tabordningen hamnar först). Istället ska man ändra källkoden så den passar tabordningen och sedan i efterhand ändra visuella presentationen med CSS. https://webaim.org/techniques/keyboard/tabindex
Du har helt rätt. Man ska undvika (läs: låta bli att använda) värden högre än 0. Texten på den här sidan är gammal och håller på att uppdateras. Vi ska redigera texten.
Skriv kommentar
Funktionen för att skriva kommentarer använder kakor. Läs mer om kakorna. Enbart förstapartskakor används. Vill du inte godkänna kakor så kan du ställa in din webbläsare att blockera dem. Funktionen går ändå att använda men den kommer då att ställa vissa frågor om och om igen, och kan inte förhandsvisa dina kommentarer.
För att kunna erbjuda denna funktion behöver vi lagra de uppgifter som du själv skriver in (namn, e-post, eventuell webbadress och själva kommentaren) samt IP-nummer. Den rättsliga grunden är samtycke och informationen ligger kvar så länge DIGG bedömer att den tillför förståelse för riktlinjen, eller tills du begär att den raderas. Läs mer om DIGGs behandling av personuppgifter.