Fokus inte dolt (utökat)

Vad kriteriet kräver

2.4.11 tillåter partiell täckning så länge någon del av det fokuserade elementet förblir synligt. 2.4.12 tar bort den tillåtelsen: det fokuserade elementet måste vara fullt synligt. Att tabba till en knapp måste placera hela knappen i visningsporten utan att något överlappar den — inget klistrigt sidhuvud som klipper den övre kanten, ingen chattbubbla som klipper det nedre högra hörnet.

Detta är AAA och aspirationellt för de flesta team, men det är rätt målnivå för designsystem som används inom offentlig förvaltning, sjukvård och utbildning, där tangentbordsreliabilitet är icke-förhandlingsbar.

Hur du uppfyller det

• Sätt scroll-padding-top och scroll-padding-bottom på scrollcontainern generöst — något mer än höjden på alla klistriga element sammanlagt.
• Dölj chattwidgetar automatiskt när ett fokusbart element närmar sig deras position, eller flytta undan dem vid fokushändelser.
• För klistriga sidfötter överväger du icke-klistriga alternativ, eller komprimerar dem vid scrollning så att de bara täcker rubrikinnehåll, aldrig kontroller.
• Granska varje sida med både ett klistrigt sidhuvud och en klistrigt sidfot. Det “säkra bandet” i mitten krymper snabbt, särskilt på små visningsportar.
• Testa vid 200 % webbläsarzoom och vid 400 % (enligt 1.4.10 Reflöde) — klistriga element som fungerade vid 100 % kan nu fylla hela skärmen.

Vanliga fel

• Klistrigt sidhuvud som täcker de översta 4 px av varje fokusring — godkänt för 2.4.11, underkänt för 2.4.12.
• Hoppa-länksmål som landar längst upp i <main> med fokusring delvis klippt av det klistriga sidhuvudet.
• Flytande “Hjälp”-knappar nere till höger som överlappar ett 1 px hörn på fokuserade knappar i det området.
• Kampanjbanners inlagda av marknadsföringstaggar som inte beaktas i designsystemets scroll-padding-tokens.
• Mobila bottennavigeringar där Tab på det sista formulärfältet visar fältet med fokusringen lätt klippt vid nederkanten.

Varför det spelar roll

För användare med nedsatt syn som förlitar sig på fokusindikatorn för att följa sin position kan även en partiell klippning göra indikatorn praktiskt taget osynlig — en 2 px kontur med den övre pixeln klippt ser ut som en 1 px linje, lätt att förväxla med en kant. Det utökade kriteriet behandlar fokusin­dikatorn som ett förstklassigt UI-element som förtjänar sin fulla begränsningsruta på skärmen. Att åta sig 2.4.12 tvingar team att rationalisera sin budget för klistriga element, vilket ofta förbättrar layouten för alla.