Fokusrækkefølge

Hvad det kræver

En tastaturbruger, der trykker Tab, skal kunne bevæge sig igennem interaktive elementer i en rækkefølge, der giver dem mulighed for at fuldføre alle opgaver uden at miste kontekst. I englishsproget LTR-layout betyder det næsten altid øverst-til-bund, venstre-til-højre. Rækkefølgen behøver ikke være identisk med den visuelle orden, men enhver afvigelse skal stadig bevare mening — f.eks. kan et “hop til sidefod”-link ligge uden for det primære flow, så længe resten er fornuftigt.

Den fejltype, dette succeskriterium adresserer, er dialoger, der skjuler fokus, drag-omarrangerede gitter med forældet tabulatororden, og CSS, der omordner indhold visuelt, men lader DOM’en stå i sin oprindelige rækkefølge.

Sådan opfyldes det

• Byg DOM’en i læseorden. Hvis det visuelle layout afviger, brug CSS Grid- eller Flexbox-ordensegenskaber forsigtigt — men det er kildeorden, som Tab følger.
• Når en modal åbner, flyt fokus ind i den og fasthold fokus der, til den lukkes. Når den lukkes, gendan fokus til udløseren.
• Brug aldrig positive tabindex-værdier (tabindex="3"). De opretter brugerdefinerede ordener, der kæmper mod DOM’en og bryder, så snart siden ændres.
• For drag-og-slip-sorterbare lister, opdater DOM-ordenen, så den matcher den nye visuelle orden, så tabulatorrækkefølgen forbliver synkroniseret.
• Test ved at trykke Tab fra adresselinjen igennem hvert fokuserbart element på siden. Hvis du nogensinde føler dig “fortabt,” vil brugerne det også.

Typiske fejl

• Modal åbner, men fokus forbliver på siden bag den. Tab cykler igennem skjulte elementer, mens modalen svæver urørt.
• Off-canvas mobilmenu åbner, fokus forbliver i sidens brødtekst. Skærmlæserbrugere kan ikke finde det, der netop er dukket op.
• flex-direction: row-reverse vender den visuelle orden om; DOM-ordenen er uændret; Tab bevæger sig nu højre-til-venstre, mens læsningen bevæger sig venstre-til-højre.
• Brugerdefinerede tabindex-værdier spredt igennem en formular, hvor later tilføjelser arver tabindex="0" og ender til sidst.
• Autofokus på et “abonnér”-popup, der vises 8 sekunder efter indlæsning, og rykker fokus væk fra den person, der var ved at læse.

Hvorfor det betyder noget

Fokusrækkefølge er tastaturets svar på læseorden. Når det bryder ned, er oplevelsen ikke langsom — den er uforståelig. Brugere med motoriske handicap, der udelukkende navigerer med Tab og Shift+Tab, kan blive sendt til den forkerte del af en formular, gå glip af et påkrævet felt eller miste overblikket på en lang side efter en enkelt fejlplaceret kontrol.