Manche Inhalte ändern sich schnell. Beispiele sind Formfehler, Ladezeiten und Mini-Einkaufswagen. Diese sagt der Screenreader an.
ARIA-Live-Regionen sind HTML-Bereiche mit einer Eigenschaft: aria-live="polite" oder "assertive". Wenn sich diese Bereiche ändern, sagt der Screenreader die Änderung. Der Nutzer muss nicht dorthin gehen. Beispiele: Fehlermeldungen im Formular, "Produkt ist im Einkaufswagen", Anzahl der Suchergebnisse.
Regel WCAG 4.1.3 ist wichtig. Sie gilt bei Änderungen ohne Fokus-Wechsel. Ohne Live-Region merkt der Nutzer nicht immer die Änderung. Zum Beispiel, "Bitte E-Mail angeben" wird gezeigt. Oder die Suche hat 0 Treffer. Das kann frustrieren.
15 Minuten Gespräch: Wir prüfen, ob es wichtig für Ihre Seite ist. Weitere Infos: Überblick zu BFSG, Leistungen, BAFA-Hilfe, häufige Fragen.
ARIA-Live-Regionen
Dynamische Inhalte (Formular-Fehler, Loader, Mini-Carts) werden vom Screenreader angesagt.
Was bedeutet „ARIA-Live-Regionen"?
ARIA-Live-Regionen sind HTML-Bereiche mit dem Attribut aria-live="polite" oder "assertive". Wenn sich der Inhalt dieser Bereiche ändert, sagt der Screenreader die Änderung automatisch an — ohne dass der Nutzer dorthin navigieren muss. Beispiele: Formular-Fehlermeldung, „Produkt im Warenkorb", Such-Ergebniszahl.
Pflicht und Nutzen — WCAG 4.1.3.
WCAG 4.1.3 (Status Messages) ist Level AA und greift überall, wo eine visuelle Statusänderung ohne Fokus-Wechsel passiert. Ohne Live-Region merkt ein Screenreader-Nutzer nicht, dass „Bitte E-Mail angeben" eingeblendet wurde oder dass die Suche 0 Treffer hat. Die Konsequenz ist Frust und Aufgabe.
Wie wir es konkret lösen.
aria-live="polite"für nicht-kritische Updates (Loader, Suchergebnisse).aria-live="assertive"nur für dringende Meldungen (Session-Ablauf, kritische Fehler).role="status"für Statusmeldungen undrole="alert"für Fehlermeldungen — implizite Live-Regionen.- Container muss von Anfang an im DOM sein (auch leer), sonst greift die Live-Funktion nicht.
- Im DigElite-Quick-Check ist genau diese Logik live:
<div id="check-result" role="status" aria-live="polite">.
Verwandte Bausteine unserer Modulsuite
-
Vollständige Tastatur-Navigation
WCAG 2.1.1Jede Funktion erreichbar — ohne Maus. Pflicht für Screenreader-Nutzer, Hilfe für jeden anderen.
-
Heading-Hygiene & Struktur-Manager
WCAG 1.3.1Saubere Outline für Screenreader und Suchmaschinen — eine H1 pro Page, keine Sprünge.
-
Kontrast-Scanner mit Auto-Audit
WCAG 1.4.3Laufende Kontrast-Prüfung im Backend — Regression wird gemeldet, bevor die Redaktion etwas merkt.
-
Skip-Links & semantische Landmarks
WCAG 2.4.1Tastatur springt direkt zum Hauptinhalt — ohne durch Navigation und Header zu hangeln.
Brauchen Sie genau dieses Modul?
15 Minuten Erstgespräch — wir klären, ob es für Ihre Site relevant ist.
Weiterführend:
BFSG-Übersicht ·
Leistungs-Übersicht ·
BAFA-Förderung ·
FAQs
