Fokusordning

Vad det kräver

En tangentbordsanvändare som trycker på Tab ska kunna röra sig genom interaktiva element i en ordning som gör det möjligt att slutföra alla uppgifter utan att tappa sammanhanget. I engelskspråkiga LTR-layouter innebär det nästan alltid uppifrån och ned, vänster till höger. Ordningen behöver inte vara identisk med den visuella ordningen, men varje avvikelse måste ändå bevara meningen — t.ex. kan en “hoppa till sidfoten”-länk finnas utanför huvudflödet så länge resten är logisk.

Det misslyckande som detta framgångskriterium riktar sig mot är dialogrutor som döljer fokus, rutnät som omarrangerats med drag-och-släpp med inaktuell tabbordning, samt CSS som ordnar om innehåll visuellt men lämnar DOM:en i sin ursprungliga sekvens.

Hur man uppfyller det

• Bygg DOM:en i läsordning. Om den visuella layouten skiljer sig, använd CSS Grid eller Flexbox order-egenskaper varsamt — men det är källkodsordningen som Tab följer.
• När en modal öppnas, flytta fokus in i den och fånga fokus inuti tills den stängs. När den stängs, återställ fokus till utlösaren.
• Använd aldrig positiva tabindex-värden (tabindex="3"). De skapar anpassade ordningar som kämpar mot DOM:en och går sönder så snart sidan förändras.
• För listor med drag-och-släpp-sortering, uppdatera DOM-ordningen så att den matchar den nya visuella ordningen, så att tabbsekvensen förblir synkroniserad.
• Testa genom att trycka Tab från adressfältet igenom varje fokusbart element på sidan. Om du någonsin känner dig “vilsen” kommer användarna att göra det också.

Vanliga misslyckanden

• Modal öppnas men fokus stannar kvar på sidan bakom den. Tab cyklar genom dolda element medan modalen flödar utan att beröras.
• Mobil off-canvas-meny öppnas, fokus stannar kvar i sidans brödtext. Skärmläsaranvändare kan inte hitta det som nyss visades.
• flex-direction: row-reverse vänder den visuella ordningen; DOM-ordningen är oförändrad; Tab rör sig nu höger-till-vänster medan läsning sker vänster-till-höger.
• Anpassade tabindex-värden spridda i ett formulär, med senare tillägg som ärver tabindex="0" och hamnar i slutet.
• Auto-fokus på ett “prenumerera”-popup som visas 8 sekunder efter laddning, och rycker fokus från den som höll på att läsa.

Varför det spelar roll

Fokusordning är tangentbordsmotsvarigheten till läsordning. När det går sönder är upplevelsen inte långsam — den är obegriplig. Användare med motoriska funktionsnedsättningar som navigerar uteslutande med Tab och Skift+Tab kan skickas till fel avsnitt av ett formulär, missa ett obligatoriskt fält helt och hållet, eller tappa sin plats på en lång sida efter en enda felplacerad kontroll.