Fokus ikke skjult

Silktide tester at et kontrollelement som velges med tastaturet, ikke er fullstendig skjult bak annet innhold, for eksempel et informasjonsbanner om informasjonskapsler eller en fast topptekst. En tastaturbruker som ikke kan se det valgte kontrollelementet, har ingen mulighet til å vite hvor på siden vedkommende befinner seg.

De vanligste årsakene er elementer som blir stående fast mens siden rulles:

Bannere øverst eller nederst på siden, for eksempel meldinger om informasjonskapsler
Faste navigasjonsfelt og bunntekster
Dialogbokser som lar fokuset flytte seg bak dem

Denne kontrollen dekker fullstendig tildekking, slik det kreves på -nivå AA (kriterium 2.4.11). Den strengere følgekategorien på , Fokus ikke delvis skjult, markerer også kontrollelementer som bare er delvis tildekket.

Hvorfor dette er viktig

Personer som navigerer med tastaturet, følger indikatoren for for å vite hvilket kontrollelement de står på. Når fokuset flyttes til et kontrollelement som ligger under et banner om informasjonskapsler eller en fast bunntekst, forsvinner indikatoren: Brukeren kan ikke se hva Enter-tasten vil gjøre, eller engang hvor vedkommende befinner seg, og kan derfor forlate siden helt.

Slik løser du det

Foretrekk innhold som ruller med siden, fremfor elementer som er festet oppå den.
Når et fast banner eller en fast topptekst må bli stående, bruker du CSS-egenskapene scroll-padding eller scroll-margin slik at fokuserte elementer rulles forbi det – se WCAG-teknikk C43.
For dialogbokser og popup-vinduer låser du fokuset inne i dem mens de er åpne, slik at ingenting bak dem kan få fokus. De fleste dialogbiblioteker og det innebygde <dialog>-elementet gjør dette for deg.

Slik tester Silktide dette

Simulerer en tastaturbruker som tabber gjennom alle fokuserbare elementer, både i skrivebords- og mobilvisning av siden.
Simulerer at nettleseren ruller hvert fokuserte element vertikalt til midten av skjermen (se merknaden om rulling nedenfor).
Kontrollerer om et annet element ligger oppå det fokuserte elementet. Overlappende elementer med gjennomsiktige eller delvis gjennomsiktige bakgrunner ignoreres, siden fokusindikatoren fortsatt er synlig gjennom dem.
Marker kontrollelementet hvis det er fullstendig dekket av et ugjennomsiktig element. Delvis overlapping markeres ikke av denne kontrollen – det er det Fokus ikke delvis skjult tester.

Hvorfor vi simulerer rulling

Hvor mye en nettleser ruller mellom Tab-trykk, varierer med vindusstørrelsen. Derfor kan det variere mellom skjermer som bare er noen få piksler forskjellige i høyden, om en fast topptekst dekker et fokusert element. Testing ved én nøyaktig vindusstørrelse ville markert problemer som ingen med et litt annerledes vindu kunne gjenskape.

I stedet evaluerer Silktide hvert element som om det var rullet til midten av skjermen. Denne bevisst romslige tilnærmingen markerer problemer som konsekvent påvirker alle skjermstørrelser, og unngår problemer som bare påvirker én bestemt vindushøyde. W3C spesifiserer ikke hvordan dette kriteriet skal testes.

Dialogbokser som åpnes etter at siden er lastet inn

Hvis en side inneholder en dialogboks som er lukket som standard, antar Silktide at fokuset ikke kan forlate den mens den er åpen – slik en korrekt bygget dialogboks skal fungere. En mangelfull dialogboks som lar fokuset slippe ut bak den, blir derfor kanskje ikke markert med mindre den er åpen når siden lastes inn.

Feilsøking

Jeg kan se det fokuserte elementet uten problemer

Kontroller et mindre vindu: Elementer som skjules av faste topptekster eller bunntekster, kolliderer ofte bare ved bestemte vindushøyder. Hvis du konkluderer med at elementet aldri er vesentlig skjult, kan du ignorere funnet.