Focus niet gedeeltelijk bedekt

Silktide controleert of er geen deel van een besturingselement verborgen is achter andere inhoud, zoals een cookiebanner of een vastgezette koptekst, wanneer het met het toetsenbord wordt geselecteerd. Zelfs een gedeeltelijk bedekt besturingselement kan ervoor zorgen dat een toetsenbordgebruiker niet zeker weet waar die zich op de pagina bevindt.

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

Banners bovenaan of onderaan de pagina, zoals cookiemeldingen
Vastgezette navigatiebalken en voetteksten
Pop-upvensters waarin de focus erachter kan komen

Dit is de strengere -versie op niveau AAA (criterium 2.4.12) van Focus niet bedekt: de op niveau AA markeert alleen besturingselementen die volledig bedekt zijn, terwijl deze controle elke bedekking markeert.

Waarom dit belangrijk is

Mensen die met het toetsenbord navigeren, volgen de om te weten op welk besturingselement ze zich bevinden. Wanneer een deel van een besturingselement waarop de focus ligt onder een cookiebanner of vaste voettekst verdwijnt, kan de gebruiker de indicator missen, het label van het besturingselement verkeerd interpreteren of de draad kwijtraken. Een besturingselement dat op uw scherm gedeeltelijk bedekt is, kan op een kleiner scherm volledig bedekt zijn.

Zo lost u dit op

Geef de voorkeur aan inhoud die met de pagina meescrolt boven elementen die erbovenop vastgezet zijn.
Wanneer een vaste banner of koptekst moet blijven staan, gebruikt u de CSS-eigenschappen scroll-padding of scroll-margin, zodat elementen waarop de focus ligt vrij van de banner of koptekst in beeld worden gescrold. Zie WCAG-techniek C43.
Houd bij dialoogvensters en pop-ups de focus daarin vast zolang ze geopend zijn, zodat niets erachter focus kan krijgen. De meeste bibliotheken voor dialoogvensters en het native element <dialog> doen dit voor u.

Zo test Silktide dit

Simuleer een toetsenbordgebruiker die met Tab langs elk element gaat dat focus kan krijgen, zowel in de desktop- als in de mobiele weergave van de pagina.
Simuleer dat de browser elk element waarop de focus ligt 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 halftransparante achtergronden worden genegeerd, omdat de focusindicator erdoorheen zichtbaar blijft.
Markeer het besturingselement als een deel ervan door een ondoorzichtig element wordt bedekt. Als u alleen aan niveau AA hoeft te voldoen, rapporteert Focus niet bedekt de gevallen waarin het besturingselement volledig bedekt is.

Waarom we scrollen simuleren

Hoe ver een browser scrolt tussen het indrukken van Tab varieert afhankelijk van de venstergrootte. Daardoor kan het per scherm verschillen of een vaste koptekst een element waarop de focus ligt bedekt, zelfs als de schermhoogte maar enkele pixels verschilt. Testen op één exacte venstergrootte zou problemen markeren die niemand met een iets ander venster kan reproduceren.

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

Dialoogvensters die na het laden van de pagina worden geopend

Als een pagina een dialoogvenster bevat dat standaard gesloten is, gaat Silktide ervan uit dat de focus het niet kan verlaten zolang het geopend is. Zo hoort een correct gebouwd dialoogvenster zich te gedragen. Een gebrekkig dialoogvenster dat de focus erachter laat ontsnappen, wordt daarom mogelijk niet gemarkeerd tenzij het wordt geopend wanneer de pagina wordt geladen.

Problemen oplossen

Ik kan het element waarop de focus ligt goed zien

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