Fokus inte delvis skymt

Silktide testar att ingen del av ett element döljs bakom annat innehåll, till exempel en cookie-banner eller ett fast sidhuvud, när ett reglage markeras med tangentbordet. Även ett delvis täckt reglage kan göra att en tangentbordsanvändare blir osäker på var på sidan hen befinner sig.

De vanligaste orsakerna är element som ligger kvar på en fast plats medan sidan rullas:

Banners längst upp eller längst ned på sidan, till exempel cookie-meddelanden
Fasta navigeringsfält och sidfötter
Popup-dialogrutor som gör att fokus kan flyttas bakom dem

Detta är den striktare versionen på -nivå AAA (kriterium 2.4.12) av Fokus inte skymt: kontrollen på flaggar endast reglage som är helt täckta, medan denna flaggar all täckning.

Varför detta är viktigt

Personer som navigerar med tangentbord följer indikatorn för för att se vilket reglage de befinner sig på. När en del av ett fokuserat reglage försvinner under en cookie-banner eller fast sidfot kan användaren missa indikatorn, misstolka reglagets etikett eller tappa bort sig – och ett reglage som är delvis täckt på din skärm kan vara helt täckt på en mindre skärm.

Så åtgärdar du problemet

Föredra innehåll som rullar med sidan framför element som är fixerade ovanpå den.
När en fast banner eller ett fast sidhuvud måste vara kvar använder du CSS-egenskaperna scroll-padding eller scroll-margin så att fokuserade element rullas förbi det – se WCAG-teknik C43.
För dialogrutor och popup-fönster låser du fokus inuti dem medan de är öppna, så att inget bakom dem kan få fokus. De flesta dialogbibliotek och det inbyggda elementet <dialog> gör detta åt dig.

Så testar Silktide detta

Simulera en tangentbordsanvändare som tabbar genom alla fokuserbara element, både i dator- och mobilvyer av sidan.
Simulera att webbläsaren rullar varje fokuserat element vertikalt till mitten av skärmen (se kommentaren om rullning nedan).
Kontrollera om något annat element ligger ovanpå det fokuserade elementet. Överlappande element med genomskinliga eller halvgenomskinliga bakgrunder ignoreras, eftersom fokusindikatorn fortfarande är synlig genom dem.
Flagga reglaget om någon del av det täcks av ett ogenomskinligt element. Om du bara behöver uppfylla nivå AA är det fallen där reglaget är helt täckt som rapporteras av Fokus inte skymt.

Varför vi simulerar rullning

Hur mycket en webbläsare rullar mellan tryckningar på Tabb varierar beroende på fönstrets storlek. Därför kan det skilja sig mellan skärmar som bara är några pixlar olika i höjd om ett fast sidhuvud täcker ett fokuserat element. Om man testar med en enda exakt fönsterstorlek skulle man flagga problem som ingen med ett något annorlunda fönster kan återskapa.

I stället utvärderar Silktide varje element som om det hade rullats till mitten av skärmen. Detta avsiktligt generösa tillvägagångssätt flaggar problem som påverkar alla skärmstorlekar på ett konsekvent sätt och undviker sådana som endast påverkar en exakt fönsterhöjd. W3C anger inte hur detta kriterium ska testas.

Dialogrutor som öppnas efter att sidan har laddats

Om en sida innehåller en dialogruta som är stängd som standard antar Silktide att fokus inte kan lämna den när den är öppen – vilket är så en korrekt byggd dialogruta fungerar. En felaktig dialogruta som låter fokus smita ut bakom den kanske därför inte flaggas om den inte är öppen när sidan laddas.

Felsökning

Jag kan se det fokuserade elementet utan problem

Kontrollera i ett mindre fönster: element som skyms av fasta sidhuvuden eller sidfötter kolliderar ofta bara vid vissa fönsterhöjder. Om du kommer fram till att elementet aldrig skyms på ett meningsfullt sätt kan du ignorera resultatet.