HTML und CSS · Senior · Frage 34 von 75
Was ist das Minimum für einen barrierefreien modalen Dialog?
- 1Fokus hinein und darin gefangen, Esc, Fokus zurück, inerter Hintergrund
- 2
aria-hidden="true"am Modal selbst plusrole="alert" - 3
z-index: 9999, ein abgedunkelter Hintergrund und ein Schließen-Button genügen
Antwort zeigen
Richtige Antwort: Fokus hinein und darin gefangen, Esc, Fokus zurück, inerter Hintergrund
Erklärung
Nutzer von Tastatur und Screenreader müssen ins Modal gelangen, dürfen nicht per Tab „herausfallen“, müssen es schließen können und dorthin zurückkehren, wo sie waren. Ein natives <dialog> mit showModal() erledigt das meiste: Der Hintergrund wird inert, Esc schließt, der Fokus wandert. Außerdem braucht man eine Bezeichnung über aria-labelledby. aria-hidden am Modal würde es vor Screenreadern verstecken.