Fokus

Fokus er tilstanden for det aktive element, der modtager tastaturinput. Kun ét element på en side kan have fokus ad gangen, og den visuelle indikator for denne tilstand — fokusringen — er den vigtigste affordance for tastatur-, switch- og skærmlæsere.

Hvorfor fokus er vigtigt

En betydelig andel af brugerne navigerer på nettet helt uden mus:

• Brugere kun med tastatur med motoriske handicap, der gør pegning svært eller umuligt.
• Switch-input-brugere, der scanner grænseflader via enkelt-knap eller sip-and-puff-enheder.
• Skærmlæsere, der ruter gennem tastaturgrænsefladen selv på berøringsskærme.
• Stemmekontrols-brugere (“Klik på knappen Indsend”), hvis værktøjer løser kommandoer ved at matche fokuserbare elementer.

For dem alle er fokus markøren. Hvor fokus er, hvor det er på vej hen, og hvordan det ser ud, afgør, om siden overhovedet er brugbar.

WCAG’s fokusregler

WCAG 2.x og 2.2 har flere kriterier centreret om fokus:

• 2.1.1 Tastatur (A) — al funktionalitet skal kunne betjenes fra tastaturet.
• 2.1.2 Ingen tastaturfælde (A) — tastaturbrugere skal kunne flytte fokus væk fra et hvilket som helst fokuserbart element ved kun at bruge tastaturet.
• 2.4.3 Fokusrækkefølge (A) — fokusrækkefølgen skal være logisk og meningsfuld.
• 2.4.7 Fokus synligt (AA) — det fokuserede element skal have en synlig indikator.
• 2.4.11 Fokus ikke skjult (AA, nyt i WCAG 2.2) — sticky-overskrifter, cookie-bannere og flydende chat-widgets må ikke fuldstændigt skjule et fokuseret element.
• 2.4.13 Fokus-udseende (AAA, nyt i 2.2) — fokusindikatoren skal opfylde specifikke krav til areal og kontrast.

Almindelige fejlmønstre

• outline: none uden erstatning. Designere fjerner standardringen, fordi den ikke matcher det visuelle udtryk, og glemmer at erstatte den med en tilpasset. Dette er et AA-svigt og det mest almindelige.
• Fokus kun på :focus-visible, ikke :focus. Moderne bedste praksis bruger :focus-visible, så ringen kun vises ved tastaturnavigation, ikke museklik. Fint — men indikatoren på :focus-visible skal stadig opfylde AA-kontrasten.
• Mistet fokus efter dynamiske handlinger. Efter lukning af en modal skal fokus returnere til udløserelementet. Efter sletning af en række skal fokus flytte til en fornuftig nabo. Ellers lander brugeren et vilkårligt sted (ofte dokumentets body) og er nødt til at begynde at tabbe fra toppen.
• Skjult fokus under sticky chrome. Et fokuseret link 50 pixels fra toppen af siden befinder sig bag den sticky-overskrift, der også er 50 pixels høj. Brugeren tabber tilsyneladende ind i tomheden. Sæt scroll-padding-top lig overskriftens højde, eller opdag overlapning og scroll det fokuserede element ind i synsfelt.

Den hurtigste manuelle revision

Tab igennem alle sider fra adresselinjen til footeren. Hvis du på noget tidspunkt ikke kan se, hvor fokus er, ikke kan nå en interaktiv kontrol eller sidder fast i en fokus-fælde, fejler siden 2.4.7 eller 2.1.2.