ARIA Live Region
Neue Treffer ansagen, ohne den Fokus zu bewegen
Trefferzahl und Statuszeile: zwei Stellen, an denen eine Filterliste stumm bleibt.
Ansage-Regie
Der Fokus bleibt. Die Nachricht kommt zu ihm.
Eine Live Region ist kein sichtbares Pop-up. Sie verbindet eine Änderung im DOM mit dem Ausgabekanal assistiver Technik – zur richtigen Zeit und ohne Fokuswechsel.
Von „Kurs suchen“ bis „1 Kurs gefunden“
Statische Ablaufskizze eines Filters
Der Fokus steht im Suchfeld.
<p id="status" role="status"></p>leer, aber schon im Accessibility Tree- Rückenschule
ausgefiltert - Yoga1 Treffer
- Schwimmen
ausgefiltert
status.textContent = '1 Kurs gefunden';Das Element bleibt bestehen. Nur sein Text ändert sich.role="status" bringt dafür implizit aria-live="polite" und aria-atomic="true" mit. Dringlichkeit wählen
Drei Kanäle, drei unterschiedliche Erwartungen
Die Meldung entscheidet über den Kanal. Nicht die Größe oder Farbe ihrer Box.
role="status"
Trefferzahl, gespeichert, Warenkorb aktualisiert.
Unterbricht die aktuelle Ausgabe nicht.
role="alert"
Sitzung läuft ab, Verbindung verloren, Eingabe blockiert.
Kann die aktuelle Ausgabe sofort unterbrechen.
aria-live="off"
Bereich ändert sich, braucht aber keine proaktive Ansage.
Bei Fokus im Bereich kann die Änderung hörbar sein.
Ein Satz statt einer Zahl
Warum status die ganze Meldung liest
3 Kurse gefunden
1 Kurs gefunden
„1 Kurs gefunden“
Ohne atomare Ausgabe kann assistive Technik nur den geänderten Teil melden. Beim status ist aria-atomic="true" bereits Teil der Rolle.
Zum Kopieren
Vollständiger Filter mit vorbereiteter Statuszeile
Das Beispiel filtert erst beim Absenden. Es verschiebt den Fokus nicht.
HTML
<form id="kursfilter">
<label for="kurssuche">Kurs suchen</label>
<input id="kurssuche" type="search">
<button type="submit">Kurse filtern</button>
</form>
<p id="kursstatus" role="status"></p>
<ul id="kurse">
<li>Rückenschule</li>
<li>Yoga</li>
<li>Schwimmen</li>
</ul>JavaScript
const formular = document.querySelector('#kursfilter');
const suche = document.querySelector('#kurssuche');
const status = document.querySelector('#kursstatus');
const kurse = [...document.querySelectorAll('#kurse li')];
formular.addEventListener('submit', (event) => {
event.preventDefault();
const begriff = suche.value.trim().toLowerCase();
let anzahl = 0;
for (const kurs of kurse) {
const passt = kurs.textContent.toLowerCase().includes(begriff);
kurs.hidden = !passt;
if (passt) anzahl += 1;
}
status.textContent = anzahl === 1
? '1 Kurs gefunden'
: `${anzahl} Kurse gefunden`;
});So prüfen Sie es
Sehen, hören, Fokus kontrollieren
- Prüfen Sie im Quelltext, ob die leere Statuszeile schon vor der Aktion existiert.
- Starten Sie ein Vorleseprogramm und filtern Sie. Die Trefferzahl wird angekündigt.
- Prüfen Sie den Fokus. Er bleibt am ausgelösten Bedienelement.
- Erzeugen Sie denselben Text erneut. Ohne DOM-Änderung entsteht keine neue Ansage.
Quellen für Implementierung und Abnahme
Aus dem Prüfbericht
Zwei Stellen, zwei Befunde
Kritisch aria-live trägt einen Wert, den es nicht gibt Regel aria-valid-attr-value
Für Statusmeldungen gilt polite, für Dringendes assertive. Andere Werte lassen die neue Trefferzahl unangesagt.
Kritisch Eine erfundene Rolle an der Statuszeile Regel aria-roles
role="statusmeldung" wird verworfen. role="status" macht die Zeile zur Statusmeldung, ohne den Fokus zu verschieben.
Zum Mitnehmen
Die Statuszeile, korrigiert
Ein Bereich, der vorher da ist, mit gültiger Rolle und gültigem Wert.
Korrektur in 3 Schritten ansehen
Den Bereich vorher anlegen
Der leere Bereich steht im ausgelieferten HTML. Erst später eingefügte Bereiche werden von Vorleseprogrammen oft nicht beachtet.
KorrekturvergleichSchritt 1 · HTML Vorher
<form id="filter">…</form> <ul id="treffer">…</ul>Nachher
<form id="filter">…</form> <p id="status" role="status" aria-live="polite"></p> <ul id="treffer">…</ul>Markierte Zeilen wurden geändert
So prüfen Sie es Sehen Sie vor dem ersten Filtern in den Quelltext. Der leere Statusabsatz ist bereits da.
Rolle und Höflichkeit richtig schreiben
role="status" nennt den Zweck, aria-live="polite" die Dringlichkeit. Beide Werte stammen aus festen Listen.
KorrekturvergleichSchritt 2 · HTML Vorher
<p id="status" role="statusmeldung" aria-live="laut"></p>Nachher
<p id="status" role="status" aria-live="polite"></p>Markierte Zeilen wurden geändert
So prüfen Sie es Filtern Sie die Liste. Die neue Trefferzahl wird genannt, ohne dass der Fokus springt.
Nur den Text austauschen
Das Skript schreibt in den vorhandenen Bereich. Der Bereich selbst bleibt stehen, damit die Ansage überhaupt ausgelöst wird.
KorrekturvergleichSchritt 3 · JavaScript Vorher
liste.insertAdjacentHTML('beforebegin', '<p role="status">' + anzahl + ' Treffer</p>');Nachher
document.getElementById('status').textContent = anzahl + ' Treffer';Markierte Zeilen wurden geändert
So prüfen Sie es Filtern Sie zweimal hintereinander. Beide Trefferzahlen werden angesagt.