Fokus inte dolt

Silktide testar att ett interaktivt element som väljs med tangentbordet inte är helt dolt bakom annat innehåll, till exempel en cookie-banner eller ett fast sidhuvud. En tangentbordsanvändare som inte kan se det valda elementet har inget sätt att veta var på sidan hen befinner sig.

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

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

Den här kontrollen omfattar fullständig övertäckning, enligt kraven på nivå AA (kriterium 2.4.11). Den striktare följeslagaren på , Fokus inte delvis dolt, markerar även interaktiva element som bara är delvis täckta.

Varför detta är viktigt

Personer som navigerar med tangentbord följer indikatorn för för att veta vilket interaktivt element de befinner sig på. När fokus flyttas till ett interaktivt element som ligger bakom en cookie-banner eller en fast sidfot försvinner indikatorn: användaren kan inte se vad ett tryck på Enter kommer att göra, eller ens var hen befinner sig, och kan därför överge sidan helt.

Så åtgärdar du problemet

Föredra innehåll som rullar med sidan framför element som ligger fasta ovanpå den.
När en fast banner eller ett fast sidhuvud måste ligga kvar använder du CSS-egenskaperna scroll-padding eller scroll-margin så att fokuserade element rullas fram så att de inte täcks – se WCAG-teknik C43.
För dialogrutor och popup-fönster ska du låsa fokus inuti dem medan de är öppna, så att inget bakom dem kan få fokus. De flesta dialogbibliotek och det inbyggda <dialog>-elementet 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 till mitten av skärmen (se anmärkningen om rullning nedan).
Kontrollera om något annat element ligger ovanpå det fokuserade elementet. Överlappande element med transparenta eller halvtransparenta bakgrunder ignoreras, eftersom fokusindikatorn fortfarande syns genom dem.
Markera det interaktiva elementet om det är helt täckt av ett täckande element. Delvis överlappning markeras inte av den här kontrollen – det är det som Fokus inte delvis dolt testar.

Varför vi simulerar rullning

Hur mycket en webbläsare rullar mellan tryck på Tab varierar med fönsterstorleken, vilket innebär att ett fast sidhuvud kan täcka ett fokuserat element på vissa skärmar men inte på andra som bara är några pixlar olika i höjd. Om man testar med en enda exakt fönsterstorlek skulle man markera 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 medvetet generösa tillvägagångssätt markerar problem som påverkar alla skärmstorlekar på ett konsekvent sätt och undviker problem som bara påverkar en enda exakt fönsterhöjd. W3C anger inte hur detta kriterium ska testas.

Dialogrutor som öppnas efter att sidan har lästs in

Om en sida innehåller en dialogruta som är stängd som standard antar Silktide att fokus inte kan lämna den medan den är öppen – vilket är hur en korrekt byggd dialogruta fungerar. En felaktig dialogruta som låter fokus hamna bakom den kanske därför inte markeras om den inte är öppen när sidan läses in.

Felsökning

Jag kan se det fokuserade elementet utan problem

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