Fokus ikke skjult
Silktide tester, at når et kontrolelement vælges med tastaturet, er det ikke helt skjult bag andet indhold såsom en cookiebanner eller en fastgjort sidehoved. En tastaturbruger, der ikke kan se det valgte kontrolelement, har ingen mulighed for at vide, hvor på siden vedkommende er.
De mest almindelige årsager er elementer, der forbliver fastgjort, mens siden ruller:
- Bannere øverst eller nederst på siden, såsom cookiemeddelelser
- Fastgjorte navigationsbjælker og sidefødder
- Pop op-dialogbokse, der tillader, at fokus flyttes bag dem
Dette tjek omfatter fuldstændig skjulning, som krævet på niveau AA (kriterium 2.4.11). Den strengere ledsager på , Fokus ikke delvist skjult, markerer også kontrolelementer, der kun er delvist dækket.
Hvorfor det er vigtigt
Personer, der navigerer med tastaturet, følger indikatoren for for at vide, hvilket kontrolelement de befinder sig på. Når fokus flyttes til et kontrolelement, der er skjult under et cookiebanner eller en fastgjort sidefod, forsvinder indikatoren: Brugeren kan ikke se, hvad et tryk på Enter vil gøre, eller endda hvor vedkommende er, og kan helt opgive siden.
Sådan løser du det
- Foretræk indhold, der ruller med siden, frem for elementer, der er fastgjort oven på den.
- Hvor et fastgjort banner eller sidehoved skal blive, skal du bruge CSS-egenskaberne
scroll-paddingellerscroll-margin, så fokuserede elementer ruller fri af det – se WCAG-teknik C43. - For dialogbokse og pop op-vinduer skal fokus fastholdes 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 mobilvisninger 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.
- Markér kontrolelementet, hvis det er helt dækket af et massivt element. Delvist overlap markeres ikke af dette tjek – det er det, som Fokus ikke delvist skjult tester.
Hvorfor vi simulerer rulning
Hvor meget en browser ruller mellem tryk på Tab, varierer med vinduets størrelse, så om et fastgjort sidehoved dækker et fokuseret element, kan variere mellem skærme, der kun adskiller sig med få pixels i højden. Test ved én præcis vinduesstørrelse ville markere problemer, som ingen med et lidt anderledes vindue kunne genskabe.
I stedet vurderer Silktide hvert element, som om det var rullet til midten af skærmen. Denne bevidst gavmilde tilgang markerer problemer, der konsekvent påvirker alle skærmstørrelser, og undgår dem, der kun påvirker én bestemt vindueshøjde. W3C angiver ikke, hvordan dette kriterium skal testes.
Dialogbokse, der åbner, efter siden er indlæst
Hvis en side indeholder en dialogboks, der som standard er lukket, antager Silktide, at fokus ikke kan forlade den, mens den er åben – hvilket er sådan, en korrekt opbygget dialogboks fungerer. En fejlbehæftet dialogboks, 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 fastgjorte sidehoveder eller sidefødder, kolliderer ofte kun ved bestemte vindueshøjder. Hvis du konkluderer, at elementet aldrig er meningsfuldt skjult, kan du ignorere fundet.