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 Regions
Dynamic content (form errors, loader, mini-carts) is announced by the screen reader.
What does "ARIA Live Regions" mean?
ARIA live regions are HTML areas with the attribute aria-live="polite"" or ""assertive"". When the content of these areas changes, the screen reader automatically announces the change—without the user having to navigate there. Examples: form error message, "product in shopping cart," search result number.
Obligation and Benefit — WCAG 4.1.3.
WCAG 4.1.3 (Status Messages) Level AA applies wherever a visual status change occurs without a focus shift. Without a live region, a screen reader user won't notice that "Please enter email address" has been displayed or that the search returned zero results. The consequence is frustration and giving up.
How we will solve it specifically.
aria-live="polite""for non-critical updates (loader, search results).aria-live="assertive""Only for urgent messages (session expiration, critical errors).role="status""for status messages androle="alert""for error messages — implicit live regions.- The container must be in the DOM from the beginning (even if empty), otherwise the live function will not work.
- This logic is exactly what's happening in the DigElite quick check:
<div id="check-result" role="status" aria-live="polite">.
Related building blocks of our module suite
-
Full keyboard navigation
WCAG 2.1.1Every function is accessible — without a mouse. Essential for screen reader users, helpful for everyone else.
-
Heading Hygiene & Structure Manager
WCAG 1.3.1Clean outline for screen readers and search engines — one H1 per page, no jumps.
-
Contrast scanner with auto-audit
WCAG 1.4.3Ongoing contrast checking in the backend — regression is reported before the editorial team notices anything.
-
Skip links & semantic landmarks
WCAG 2.4.1The keyboard jumps directly to the main content — without having to navigate through the navigation and header.
Do you need this exact module?
15-minute initial consultation — we'll clarify whether it's relevant for your site.
Further information:
BFSG overview ·
Performance overview ·
BAFA funding ·
FAQs
