Fokus er ikke delvis skjult

Silktide kontrollerer at ingen del av en kontroll skjules bak annet innhold, for eksempel et informasjonsbanner for informasjonskapsler eller en fast topptekst, når kontrollen velges med tastaturet. Selv en delvis skjult kontroll kan gjøre det vanskelig for en tastaturbruker å vite hvor på siden de befinner seg.

De vanligste årsakene er elementer som holder seg fast på samme sted mens siden rulles:

Bannere øverst eller nederst på siden, for eksempel varsler om informasjonskapsler
Faste navigasjonsfelt og bunntekster
Popup-dialogbokser som lar fokuset flyttes bak dem

Dette er den strengere -versjonen på nivå AAA (kriterium 2.4.12) av Fokus er ikke skjult: Kontrollen på flagger bare kontroller som er fullstendig dekket, mens denne flagger all tildekking.

Hvorfor dette er viktig

Personer som navigerer med tastaturet, følger indikatoren for for å vite hvilken kontroll de er på. Når en del av en kontroll med fokus forsvinner under et informasjonsbanner for informasjonskapsler eller en fast bunntekst, kan brukeren gå glipp av indikatoren, feiltolke kontrollens etikett eller miste plassen sin – og en kontroll som er delvis dekket på skjermen din, kan være fullstendig dekket på en mindre skjerm.

Slik løser du det

Foretrekk innhold som ruller med siden fremfor elementer som ligger fast oppå den.
Når et fast banner eller en fast topptekst må bli værende, kan du bruke CSS-egenskapene scroll-padding eller scroll-margin, slik at elementer med fokus rulles fri av det – se WCAG-teknikk C43.
For dialogbokser og popup-vinduer må du holde 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 hvert element som kan få fokus, både i skrivebords- og mobilvisning av siden.
Simulerer at nettleseren ruller hvert element med fokus til midten av skjermen (se merknaden om rulling nedenfor).
Kontrollerer om et annet element ligger oppå elementet med fokus. Overlappende elementer med gjennomsiktige eller delvis gjennomsiktige bakgrunner ignoreres, siden fokusindikatoren fortsatt er synlig gjennom dem.
Flagger kontrollen hvis en del av den er dekket av et ugjennomsiktig element. Hvis du bare trenger å oppfylle nivå AA, er det tilfellene der kontrollen er fullstendig dekket, som rapporteres av Fokus er ikke skjult.

Hvorfor vi simulerer rulling

Hvor mye en nettleser ruller mellom hver 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 element med fokus. Testing ved én nøyaktig vindusstørrelse ville flagget 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 generøse tilnærmingen flagger problemer som påvirker alle skjermstørrelser på samme måte, 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 unnslippe bak den, blir derfor kanskje ikke flagget med mindre den er åpen når siden lastes inn.

Feilsøking

Jeg kan se elementet med fokus uten problemer

Kontroller siden i 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.