Zustand Widget-Zustand

`aria-modal`

Teilt assistiver Technologie mit, den Rest der Seite als inaktiv zu behandeln, während ein Dialog geöffnet ist. Auf role="dialog" oder role="alertdialog" auf "true" setzen. Macht den Hintergrund nicht tatsächlich inaktiv — in Kombination mit dem inert-Attribut oder einer Fokusfalle verwenden.

Verwendung

Auf einem role="dialog"- oder role="alertdialog"-Element, das die Interaktion mit dem Rest der Seite blockieren soll, solange es geöffnet ist. Mit aria-modal="true" wird der Screenreader angewiesen, seinen virtuellen Cursor auf den Dialog zu beschränken und Hintergrundinhalte als nicht erreichbar anzukündigen.

Ein modaler Dialog hat drei Verantwortlichkeiten:

aria-modal="true" — teilt assistiver Technologie mit, dass es sich um einen modalen Dialog handelt.
Hintergrund inaktiv schalten — realisiert über das inert-Attribut auf dem umgebenden Inhalt oder durch JavaScript-gesteuerte Fokusfallen. Ohne diese Maßnahme können Tastaturnutzer den Dialog per Tab verlassen.
Initialer Fokus — setzt den Fokus beim Öffnen in den Dialog und stellt ihn beim Schließen auf das auslösende Element zurück.

aria-modal allein deckt die Screenreader-Seite ab; es verhindert nicht, dass ein Tastaturnutzer per Tab am Dialog vorbeispringt. Die Browser-Unterstützung für das automatische Ableiten der Inertheit aus aria-modal ist inkonsistent — daher sollte es stets kombiniert eingesetzt werden.

Das native HTML-Element <dialog> mit .showModal() übernimmt alle drei Aufgaben automatisch. Es sollte bevorzugt werden, wenn dies praktikabel ist.

Synchronisation

Gültige Werte sind "true" und "false". "true" wird gesetzt, während der Dialog geöffnet ist; während er geschlossen ist, wird das Attribut entweder entfernt oder auf "false" gesetzt (typischerweise befindet sich der geschlossene Dialog gar nicht im DOM, sodass das Attribut keine Rolle spielt).

aria-modal wird mit zwei Beschriftungsattributen kombiniert:

aria-labelledby="<dialog-title-id>" — verweist auf die sichtbare Überschrift.
aria-describedby="<dialog-body-id>" — optional, für eine kurze Beschreibung.

Gemeinsam sorgen sie dafür, dass der Screenreader eine kohärente Eröffnungsankündigung ausgibt: „Dialog, Konto löschen?, Diese Aktion kann nicht rückgängig gemacht werden.“

Häufige Fehler

aria-modal="true" ohne Fokusfalle — Tastaturnutzer können in den Hintergrund gelangen.
Verwendung von aria-modal auf einem nicht-modalen Popover oder Tooltip. role="dialog" sollte nur für echte modale Dialoge verwendet werden; ein Popover ist kein Dialog.
Fehlendes aria-labelledby — der Screenreader kündigt nur „Dialog“ ohne Namen an.
Der Fokus wird beim Öffnen des Dialogs nicht in diesen verschoben.
Der Fokus wird beim Schließen nicht auf das ursprünglich auslösende Element zurückgesetzt.
Der Hintergrund wird mit aria-hidden="true" statt mit inert markiert — der Tastaturfokus kann weiterhin entweichen; nur der virtuelle Cursor des Screenreaders ist eingeschränkt.
Zwei gleichzeitig geöffnete modale Dialoge mit aria-modal="true". Der Zugänglichkeitsbaum gerät in einen inkonsistenten Zustand; es sollte immer nur einer gleichzeitig angezeigt werden.

Beispiel

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="confirm-title"
  aria-describedby="confirm-body"
>
  <h2 id="confirm-title">Konto löschen?</h2>
  <p id="confirm-body">Diese Aktion kann nicht rückgängig gemacht werden.</p>

  <button type="button" autofocus>Abbrechen</button>
  <button type="button">Löschen</button>
</div>