Fokus ikke skjult (forbedret)

Hvad kriteriet kræver

2.4.11 tillader delvis tildækning, så længe en del af det fokuserede element forbliver synlig. 2.4.12 fjerner denne mulighed: det fokuserede element skal være fuldt synligt. At tabbe til en knap skal placere hele knappen i viewporten uden noget, der overlapper den — ingen sticky header, der klipper den øverste kant, ingen chatboble, der klipper nederst til højre.

Dette er AAA og aspirationelt for de fleste teams, men det er det rette mål for designsystemer brugt i det offentlige, sundhedsvæsenet og uddannelse, hvor tastaturpålidelighed er ikke-forhandlingsbar.

Sådan opfylder du det

• Sæt scroll-padding-top og scroll-padding-bottom på scroll-containeren generøst — lidt mere end højden af alle sticky elementer tilsammen.
• Skjul chatwidgets automatisk, når et fokuserbart element nærmer sig deres position, eller flyt dem af vejen ved fokushændelser.
• Til sticky footers bør du overveje ikke-sticky alternativer, eller komprimer dem ved scroll, så de kun dækker overskriftsindhold — aldrig kontrolelementer.
• Gennemgå alle sider med både sticky header og sticky footer. Det „sikre bånd“ i midten skrumper hurtigt, særligt på små viewports.
• Test ved 200 % browserzoom og ved 400 % (jf. 1.4.10 Omlayout) — sticky elementer, der virkede ved 100 %, kan nu fylde skærmen.

Typiske fejl

• Sticky header, der dækker de øverste 4 px af hver fokusring — fint for 2.4.11, fejler 2.4.12.
• Spring-linkmål, der lander øverst i <main> med fokusringen delvist klippet af sticky headeren.
• Flydende „Hjælp“-knapper nederst til højre, der overlapper et 1 px hjørne af fokuserede knapper i det område.
• Reklamebannere indsat af marketingtags, der ikke er taget højde for i designsystemets scroll-padding-tokens.
• Mobile bundnavigationer, hvor Tab til det sidste formularfelt viser feltet med fokusringen let klippet ved den nedre kant.

Hvorfor det er vigtigt

For svagsynede brugere, der er afhængige af fokusindikatoren til at spore deres position, kan selv en delvis klipning gøre indikatoren reelt usynlig — en 2 px kontur med den øverste pixel klippet ligner en 1 px linje, let forvekslet med en kant. Det forbedrede kriterium behandler fokusindikatoren som et førsteklasses UI-element, der fortjener sit fulde afgrænsningsfelt på skærmen. At forpligte sig til 2.4.12 tvinger teams til at rationalisere deres sticky-element-budget, hvilket ofte forbedrer layoutet for alle.