Fokus ikke delvist skjult

Silktide tester, at når et kontrolelement vælges med tastaturet, er ingen del af det skjult bag andet indhold, f.eks. en cookiebanner eller en fastklæbet sidehoved. Selv et delvist tildækket kontrolelement kan gøre en tastaturbruger usikker på, hvor de befinder sig på siden.

De mest almindelige årsager er elementer, der forbliver faste, mens siden ruller:

Bannere øverst eller nederst på siden, f.eks. cookiemeddelelser
Fastklæbede navigationsbjælker og sidefødder
Pop op-dialoger, der gør det muligt at flytte fokus bag dem

Dette er den strengere -version på niveau AAA (kriterium 2.4.12) af Fokus ikke skjult: tjekket på markerer kun kontrolelementer, der er helt tildækkede, mens dette tjek markerer enhver tildækning.

Hvorfor det er vigtigt

Personer, der navigerer med tastaturet, følger for at vide, hvilket kontrolelement de er på. Når en del af et fokuseret kontrolelement forsvinder under et cookie- banner eller en fastklæbet sidefod, kan brugeren overse indikatoren, fejlfortolke kontrolelementets tekst eller miste sin placering – og et kontrolelement, der er delvist tildækket på din skærm, kan være helt tildækket på en mindre skærm.

Sådan løser du det

Foretræk indhold, der ruller med siden, frem for elementer, der er fastgjort oven på den.
Når et fast banner eller sidehoved skal blive stående, skal du bruge CSS-egenskaberne scroll-padding eller scroll-margin, så fokuserede elementer ruller fri af det – se WCAG-teknik C43.
For dialoger og pop op-vinduer skal du fastholde fokus i dem, mens de er åbne, så intet bagved kan få fokus. De fleste dialogbiblioteker og det indbyggede <dialog>-element gør dette for dig.

Sådan tester Silktide dette

Simuler en tastaturbruger, der tabulerer gennem hvert element, der kan få fokus, i både desktop- og mobilvisning af siden.
Simuler, at browseren ruller hvert fokuseret element lodret til midten af skærmen (se bemærkningen om rulning nedenfor).
Tjek, om et andet element ligger oven på det fokuserede element. Overlappende elementer med gennemsigtige eller halvgennemsigtige baggrunde ignoreres, da fokusindikatoren forbliver synlig gennem dem.
Marker kontrolelementet, hvis en del af det er tildækket af et ugennemsigtigt element. Hvis du kun skal opfylde niveau AA, er det de helt tildækkede tilfælde, som Fokus ikke skjult rapporterer.

Hvorfor vi simulerer rulning

Hvor meget en browser ruller mellem Tab-tryk, varierer med vinduesstørrelsen, så om et fastklæbet sidehoved dækker et fokuseret element, kan variere mellem skærme, der kun er få pixels forskellige i højden. Test ved én præcis vinduesstørrelse ville markere problemer, som ingen med et lidt anderledes vindue kunne genskabe.

I stedet evaluerer Silktide hvert element, som om det er rullet til midten af skærmen. Denne bevidst generøse tilgang markerer problemer, der konsekvent påvirker alle skærm- størrelser, og undgår problemer, der kun påvirker én bestemt vindueshøjde. W3C angiver ikke, hvordan dette kriterium skal testes.

Dialoger, der åbnes, efter siden er indlæst

Hvis en side indeholder en dialog, der som standard er lukket, antager Silktide, at fokus ikke kan forlade den, mens den er åben – sådan fungerer en korrekt bygget dialog. En fejlbehæftet dialog, der lader fokus slippe ud bag den, bliver derfor muligvis ikke markeret, medmindre den er åben, når siden indlæses.

Fejlfinding

Jeg kan sagtens se det fokuserede element

Tjek i et mindre vindue: Elementer, der skjules af fastklæbede sidehoveder eller sidefødder, støder ofte kun sammen ved bestemte vindueshøjder. Hvis du konkluderer, at elementet aldrig er væsentligt skjult, kan du ignorere fundet.