Focus niet volledig bedekt

Silktide controleert of een besturingselement dat met het toetsenbord wordt geselecteerd, niet volledig wordt verborgen achter andere inhoud, zoals een cookiebanner of een vastgezette koptekst. Een toetsenbordgebruiker die het geselecteerde besturingselement niet kan zien, kan niet weten waar die zich op de pagina bevindt.

De meest voorkomende oorzaken zijn elementen die op hun plaats blijven staan terwijl de pagina scrolt:

Banners bovenaan of onderaan de pagina, zoals cookiemeldingen
Vastgezette navigatiebalken en voetteksten
Pop-updialogen die toestaan dat de focus erachter terechtkomt

Deze controle omvat volledige bedekking, zoals vereist op - niveau AA (criterium 2.4.11). De strengere tegenhanger op , Focus niet gedeeltelijk bedekt, markeert ook besturingselementen die slechts gedeeltelijk worden bedekt.

Waarom dit belangrijk is

Mensen die met het toetsenbord navigeren, volgen de indicator voor de om te weten op welk besturingselement ze zich bevinden. Wanneer de focus naar een besturingselement onder een cookiebanner of vaste voettekst gaat, verdwijnt de indicator: de gebruiker kan niet zien wat er gebeurt als die op Enter drukt, of zelfs waar die zich bevindt, en verlaat de pagina mogelijk helemaal.

Zo lost u dit op

Geef de voorkeur aan inhoud die met de pagina meescrolt boven elementen die erbovenop zijn vastgezet.
Als een vaste banner of koptekst moet blijven staan, gebruikt u de CSS-eigenschappen scroll-padding of scroll-margin, zodat elementen met focus vrij van de banner of koptekst in beeld scrollen. Zie WCAG-techniek C43.
Houd bij dialogen en pop-ups de focus binnen de dialoog zolang deze geopend is, zodat niets erachter focus kan krijgen. De meeste dialoogbibliotheken en het native element <dialog> doen dit voor u.

Zo test Silktide dit

Simuleer een toetsenbordgebruiker die met Tab door elk focusbaar element op de pagina gaat, zowel op desktop- als mobiele weergaven.
Simuleer dat de browser elk element met focus verticaal naar het midden van het scherm scrolt (zie de opmerking over scrollen hieronder).
Controleer of een ander element boven op het element met focus ligt. Overlappende elementen met transparante of semitransparante achtergronden worden genegeerd, omdat de focusindicator erdoorheen zichtbaar blijft.
Markeer het besturingselement als het volledig wordt bedekt door een ondoorzichtig element. Gedeeltelijke overlapping wordt niet door deze controle gemarkeerd — daarvoor dient de controle Focus niet gedeeltelijk bedekt.

Waarom we scrollen simuleren

Hoe ver een browser scrolt tussen opeenvolgende Tab-drukken varieert met de venstergrootte. Daardoor kan het per scherm verschillen of een vaste koptekst een element met focus bedekt, zelfs bij schermen die slechts enkele pixels in hoogte verschillen. Testen op één exacte venstergrootte zou problemen markeren die niemand met een iets ander venster zou kunnen reproduceren.

In plaats daarvan beoordeelt Silktide elk element alsof het naar het midden van het scherm is gescrold. Deze bewust ruime aanpak markeert problemen die alle schermformaten op consistente wijze beïnvloeden en voorkomt problemen die alleen bij één exacte vensterhoogte optreden. Het W3C specificeert niet hoe dit criterium moet worden getest.

Dialogen die worden geopend nadat de pagina is geladen

Als een pagina een dialoog bevat die standaard gesloten is, gaat Silktide ervan uit dat de focus de dialoog niet kan verlaten zolang deze geopend is — zo gedraagt een correct gebouwde dialoog zich. Een gebrekkige dialoog die toestaat dat de focus erachter terechtkomt, wordt daarom mogelijk niet gemarkeerd, tenzij deze geopend is wanneer de pagina wordt geladen.

Problemen oplossen

Ik kan het element met focus gewoon zien

Controleer dit in een kleiner venster: elementen die door vaste kopteksten of voetteksten worden bedekt, botsen vaak alleen bij bepaalde vensterhoogten. Als u concludeert dat het element nooit betekenisvol wordt bedekt, kunt u de bevinding negeren.