Focusvalkuil in modaal venster

Silktide identificeert pagina's die een modaal dialoogvenster bevatten - een pop-up die interactie met de rest van de pagina blokkeert - en vraagt je te controleren of de toetsenbordfocus correct wordt beheerd terwijl het dialoogvenster geopend is. Dit is een handmatige controle: geautomatiseerd testen kan het dialoogvenster vinden, maar niet waarnemen hoe het zich gedraagt wanneer het wordt geopend en gesloten.

Waarom dit belangrijk is

Wanneer een modaal dialoogvenster geopend is, is de pagina erachter zichtbaar maar inactief. Als de uit het dialoogvenster kan ontsnappen, moeten gebruikers van het toetsenbord en een door inhoud tabben die ze niet kunnen zien of gebruiken, lezen ze de onderliggende pagina buiten de context en raken ze volledig hun positie kwijt. En als de focus niet wordt teruggezet wanneer het dialoogvenster wordt gesloten, komen ze bovenaan de pagina terecht en moeten ze terug navigeren naar de plek waar ze waren.

Zo los je dit op

Open elk dialoogvenster op de pagina en controleer het uitsluitend met een toetsenbord:

Wanneer het dialoogvenster wordt geopend, verplaatst de focus zich erin - doorgaans naar het eerste bedieningselement of naar het dialoogvenster zelf.
Door op Tab en Shift+Tab te drukken, beweegt de focus door de bedieningselementen van het dialoogvenster zonder ooit de pagina erachter te bereiken.
Door op Escape te drukken, wordt het dialoogvenster gesloten (voor dialoogvensters die kunnen worden gesloten).
Wanneer het dialoogvenster wordt gesloten, keert de focus terug naar het element waarmee het werd geopend.

Als een van deze punten niet werkt, corrigeer dan je implementatie van het dialoogvenster. Het native element <dialog> dat met showModal() wordt geopend, biedt het grootste deel van dit gedrag automatisch; aangepaste dialoogvensters moeten dit met scripts implementeren. Als alles correct werkt, .

Zo test Silktide dit

Zoek naar aanwijzingen dat een pagina een modaal dialoogvenster bevat: een native element <dialog>, een element met role="dialog" of role="alertdialog", een element met aria-modal="true", of een element met een gebruikelijke klassenaam voor modale vensters dat ook focusbare bedieningselementen bevat.
Wanneer een van deze elementen wordt gevonden, maak je één controleprompt voor de pagina aan.

Silktide kan het dialoogvenster niet openen en het focusgedrag tijdens runtime niet waarnemen. Daarom mislukt deze controle nooit automatisch - er wordt gevraagd om dit te verifiëren.

Problemen oplossen

De pagina heeft geen zichtbaar modaal venster

Veel websites leveren op elke pagina markup voor dialoogvensters mee (een nieuwsbriefpop-up, een cookiedialoogvenster of een verborgen zoekoverlay) die alleen onder bepaalde omstandigheden verschijnt. De prompt is nog steeds van toepassing: controleer het gedrag van het dialoogvenster in de toestand waarin het wordt geopend. Als de markup ongebruikt is en nooit kan worden geopend, kun je overwegen deze te verwijderen.

Onze dialoogvensters komen uit een bibliotheek van derden

Bekende bibliotheken voor dialoogvensters beheren de focus doorgaans correct, maar configuratie en aangepaste inhoud kunnen dit verstoren. Controleer het gedrag op je eigen pagina's in plaats van te vertrouwen op de documentatie van de bibliotheek.