Fokusordning

När en användare navigerar på en webbplats med hjälp av tangentbordet går användaren igenom webbplatsens element en efter en. Ordningen för vilket element som ska komma i fokus är viktigt för att användaren enkelt ska navigera. Det är viktigt att ha en fokusordning som går igenom innehållet i en sekventiell och meningsfull ordning.

Användare som använder skärmläsare interagerar med den programmerade ordningen, medan användare som ser skärmen kan utgå från den visuella presentationen av innehållet. Fokusordningen måste följa en logisk ordning för båda typerna av användare.

Exempel

Testa fokusordningen genom att klicka på första knappen och gå sedan igenom knapparna med tangentbordet.

Tab-tangenten tar dig till nästa element i fokusordningen.
Shift + Tab tar dig till föregående element i fokusordningen.

Dessa knappar har en ologisk fokusordning. Efter knapp 1 hamnar knapp 3 i fokus, sedan 2 sist 4. Det gör att det blir svårt att förstå vad som kommer härnäst i fokusordningen och att navigera till ett specifikt element kan bli svårt.

Dessa knappar följer en logisk fokusordning. Det är enkelt att förstå vilken knapp som kommer härnäst i ordningen.

Tabindex

Fokusordningen bestäms i den ordning som elementen är programmerade i. Webbläsaren läser alltså koden uppifrån och ner och sätter fokusordningen därefter. Tabindex är ett attribut som går att lägga på HTML-element som ändrar fokusordningen. Det kan även användas för att tillåta eller förbjuda att vissa element hamnar i fokus.

Testa riktlinjen

Testa riktlinjen genom att helt enkelt navigera på webbplatsen med tangentbordet och notera ordningen som element kommer i fokus och se till att ordningen är logisk och meningsfull.

Taba11y är ett tillägg till chrome som automatiskt går igenom en webbsida och visar i vilken ordning alla element hamnar i fokus.

Det finns även Tabindex Bookmarklet skapat av Paul J Adam som visar de tabindex som satts på en webbplats, om det finns några, vilket kan underlätta testning av riktlinjen.

Läs mer om riktlinje 2.3.4 på W3Cs webbplats.