Niek Derksen naar home van niekderksen.nl

Over digitale toegankelijkheid

Dialoogvenster

Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk.

Een dialoogvenster is een venster dat over de content van je pagina heen verschijnt. Vaak staat hier een melding waar de gebruiker meteen iets mee moet doen. Je blokkeert daarmee de achtergrond zodat bezoekers eerst de melding moeten afhandelen voordat ze verder kunnen.

Technische opbouw

  • (4.1.2) De component moet<dialog>-element gebruiken
    • Voor foutmeldingen en waarschuwingen: Gebruik role="alertdialog" op de container
  • (2.4.6) Het dialoogvenster moet een naam hebben die het onderwerp beschrijft
  • (4.1.2) Het dialoogvenster moet aria-labelledby hebben met het id van de zichtbare titel
  • (2.4.3) Gebruik autofocus op het gewenste element

Optioneel

  • Bij simpele dialoogvensters:
    • (4.1.2) Het dialoogvenster moet aria-describedby hebben met het id van de content in het venster

Toetsenbordbediening

  • Tab:
    • Verplaatst focus naar het volgende focusbare element in het dialoogvenster. Focus gaat van het laatste naar het eerste element.
  • Shift + Tab:
    • Verplaatst focus naar het vorige focusbare element. Focus gaat van het eerste naar het laatste element.
  • Escape:
    • Sluit het dialoogvenster

Focus management

  • Focus moet altijd binnen het dialoogvenster blijven totdat je het sluit.
  • Bij onomkeerbare acties: zet autofocus op de minst destructieve knop

Voorbeeld dialoogvenster

See the Pen Dialoogvenster by Niek (@niekd) on CodePen.

Bronnen