alert
Eine Live-Region, die eine dringende, zeitkritische Meldung übermittelt. Screenreader kündigen sie sofort an und unterbrechen dabei die laufende Sprachausgabe. Sparsam einsetzen — nur für echte Fehler und Warnungen; Missbrauch führt zu Ermüdungserscheinungen bei assistiven Technologien.
Wann verwenden
Für Meldungen, die Benutzerinnen und Benutzer tatsächlich unterbrechen sollen — ein fehlgeschlagener Formularversand, eine bald ablaufende Sitzung, ein verlorener Netzwerkzugang. role="alert" entspricht aria-live="assertive" kombiniert mit aria-atomic="true", was bedeutet, dass der Screenreader die aktuelle Ankündigung abbricht und sofort die Alert-Meldung vorliest.
Sparsamer Einsatz ist geboten. Assertive Ankündigungen unterbrechen die aktuelle Aufgabe; bei jedem gespeicherten Feld oder jeder erfolgreichen Aktion eine auszulösen, wirkt störend. Für nicht dringende Statusänderungen empfiehlt sich stattdessen role="status" (aria-live="polite").
Die wichtigste Regel: Das Alert-Element MUSS im DOM vorhanden sein, bevor die Meldung eingefügt wird, und der Inhalt MUSS hinzugefügt (nicht aus dem verborgenen Zustand eingeblendet) werden, damit die Ankündigung ausgelöst wird. <div role="alert">Fehler</div> nachträglich ins DOM einzufügen, ist bei Screenreadern unzuverlässig. Das sichere Muster: ein leeres <div role="alert"></div> beim Seitenaufbau rendern und seinen Textinhalt bei Bedarf aktualisieren.
Wann alert, wann status
role="alert" verwenden | role="status" verwenden |
|---|---|
| Formularvalidierungsfehler | „Artikel in den Warenkorb gelegt“ |
| Sitzung läuft bald ab | Suchergebnisse aktualisiert |
| Verbindung unterbrochen | „Gespeichert“-Indikator |
| Zahlung fehlgeschlagen | Ladevorgang abgeschlossen |
Häufige Fehler
- Alert-Element wird erst nach der Meldung ins DOM eingefügt — viele Screenreader kündigen es dann nicht an.
hiddenauf einem bereits befüllten Alert umschalten. Die Änderung des Textinhalts löst die Ankündigung aus; das bloße Umschalten der Sichtbarkeit reicht möglicherweise nicht.role="alert"für routinemäßige Statusinformationen verwenden. Das überhäuft Benutzerinnen und Benutzer mit Unterbrechungen.- Mehrere Alerts werden schnell hintereinander eingefügt — spätere Meldungen reihen sich hinter früheren ein, manchmal für Dutzende von Sekunden.
- Eine Alert-Meldung, die weder Feld noch Ursache benennt — „Fehler“ allein ist nichtssagend. „E-Mail-Adresse ist erforderlich.“ ist handlungsleitend.
role="alert"auf einen Container um ein Formular setzen und erwarten, dass Änderungen darin angekündigt werden. Nur Textänderungen am Alert-Element selbst lösen eine Ankündigung aus.
Beispiel
<!-- Beim Seitenaufbau leer rendern -->
<div role="alert" id="formErr"></div>
<script>
// Bei fehlgeschlagenem Absenden:
document.getElementById('formErr').textContent =
'E-Mail-Adresse ist erforderlich.';
</script>