Rolle Fenster

`alertdialog`

Ein Dialog, der eine dringende Meldung übermittelt und eine Benutzerreaktion erfordert. Verbindet Dialog-Semantik mit Alert-Ankündigung. Nur für destruktive Bestätigungen, blockierende Fehler oder andere Unterbrechungen verwenden, die keinen Aufschub dulden.

Wann verwenden

Ausschließlich für Unterbrechungen: ein Fehler, der die Fortsetzung der Arbeit verhindert, eine „Soll der Eintrag wirklich gelöscht werden?“-Bestätigung oder eine Warnung vor ungespeicherten Änderungen beim Navigieren. Für gewöhnliche Modaldialoge ist alertdialog überdimensioniert — dort empfiehlt sich role="dialog".

Der Unterschied zu role="dialog" besteht darin, dass ein Alertdialog beim Erscheinen wie ein role="alert" angekündigt wird — assertiv und sofort. Das ist bei echten Unterbrechungen angemessen; Missbrauch führt zu Screenreader-Ermüdung.

aria-labelledby (verweist auf den Titel) und aria-describedby (verweist auf den Beschreibungstext) sind beide erforderlich. Der Alertdialog muss mindestens eine fokussierbare Schaltfläche enthalten, damit er geschlossen werden kann.

Tastatur- und Fokusverhalten

Gemäß dem APG-Muster für Alertdialoge:

Beim Öffnen wandert der Fokus in den Alertdialog — typischerweise zur sichersten Schaltfläche (Abbrechen), damit ein versehentliches Drücken von Enter keine destruktive Aktion auslöst.
Tab / Shift+Tab bewegt den Fokus innerhalb des Dialogs.
Escape schließt den Alertdialog und gibt den Fokus an das auslösende Element zurück.
Der Rest der Seite ist inert, solange der Alertdialog geöffnet ist.

Der initiale Fokus sollte sorgfältig gewählt werden: Bei „Löschen?“-Dialogen sollte standardmäßig „Abbrechen“ fokussiert sein — niemals die destruktive Schaltfläche.

Häufige Fehler

role="alertdialog" für jeden Modaldialog verwenden. Screenreader konfrontieren Benutzerinnen und Benutzer dann bei jedem Öffnen eines Modals mit einer assertiven Ankündigung.
Initialer Fokus auf der destruktiven Schaltfläche (Löschen, Verwerfen) — ein versehentlicher Tastendruck zerstört die Arbeit der Benutzerin oder des Benutzers.
Fehlendes aria-describedby für den Beschreibungstext. Benutzerinnen und Benutzer hören Titel und Schaltflächen, aber nicht die Warnung selbst.
Alertdialog ohne Schaltflächen — er kann nicht geschlossen werden, obwohl die Rolle eine aktive Reaktion erfordert.
Automatisches Schließen des Alertdialogs nach einem Timeout. Das widerspricht der Semantik „erfordert eine Reaktion“.

Beispiel

<div
  role="alertdialog"
  aria-modal="true"
  aria-labelledby="confTitle"
  aria-describedby="confDesc"
>
  <h2 id="confTitle">Entwurf löschen?</h2>
  <p id="confDesc">„Unbenannter Entwurf (12. März)“ wird dauerhaft gelöscht. Diese Aktion kann nicht rückgängig gemacht werden.</p>
  <button type="button" autofocus>Abbrechen</button>
  <button type="button">Entwurf löschen</button>
</div>