jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-Tools

Kostenlose ARIA Live Region Generator

Erstelle barrierefreie ARIA-Live-Regionen für Screenreader-Ankündigungen.

Tool wird geladen...

Was ist ARIA Live Region Generator?

Eine ARIA-Live-Region ist ein HTML-Element, das Screenreader auf Inhaltsänderungen überwachen und automatisch für den Benutzer ankwendigen. Dies ermöglicht dynamische Inhaltsaktualisierungen —wie Formularvalidierungsfehler, Statusmeldungen oder Chat-Nachrichten —die vorgelesen werden, ohne den Tastaturfokus zu verschieben. Das aria-live-Attribut steuert, wie dringend Änderungen angekündigt werden (polite oder assertive).

Kurze Antwort

Erstellen Sie eine ARIA-Live-Region, um dynamische Inhaltsaktualisierungen für Screenreader-Nutzer anzukündigen. Verwenden Sie role=status (polite) für beratende Updates und role=alert (assertive) für kritische Warnungen. Die Region muss beim Seitenladen im DOM vorhanden sein, und Inhalte sollten über textContent statt innerHTML aktualisiert werden.

Last updated: 2026-05-28

Einschränkungen

  • ARIA-Live-Regionen funktionieren nur mit Screenreadern, die sie unterstützen. Benutzer, die visuell ohne Screenreader browsen, sehen keine visuelle Anzeige von Live-Region-Updates, es sei denn, Sie fügen eine hinzu.
  • aria-live=assertive unterbricht Screenreader sofort, was für Benutzer, die auf audiotaktung angewiesen sind, störend sein kann. Verwenden Sie es sparsam und nur für wirklich kritische Meldungen.
  • Häufige oder schnelle textContent-Updates können dazu führen, dass Screenreader Ankündigungen in die Warteschlange stellen und in Verzug geraten. Entprellen Sie Updates, die mehr als einmal pro Sekunde auftreten.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Wählen Sie den Regionstyp basierend auf der Kritikalität der Updates —status für beratend, alert für dringend, log für sequenzielle Updates.
  2. Konfigurieren Sie aria-atomic (gesamte Region oder nur Änderungen lesen) und aria-relevant (welche DOM-Änderungstypen Ankündigungen auslösen).
  3. Kopieren Sie das HTML-Snippet mit oder ohne den JavaScript-Update-Helfer.
  4. Platzieren Sie die Live-Region beim Seitenladen im DOM, damit Screenreader sie registrieren können.

Wofür du es nutzen kannst

  • Fügen Sie eine Status-Region für Formularrückmeldungen hinzu, die Screenreader ankwendigen, ohne den Fokus zu verschieben.
  • Erstellen Sie eine Alert-Region für kritische Fehlermeldungen, die den Benutzer sofort unterbrechen.
  • Bauen Sie ein Chat-Nachrichtenprotokoll, bei dem neue Nachrichten in der Reihenfolge ihres Erscheinens angekündigt werden.

Anwendungsfalle

Praxisbeispiele

Beispiel

Formularvalidierungs-Status

Ein Formular muss Validierungsfehler für Screenreader-Nutzer ankwendigen. Erstellen Sie eine polite-Status-Region und aktualisieren Sie deren textContent mit Fehlermeldungen nach dem Absenden. Screenreader lesen die Fehler vor, ohne den Fokus vom Formular zu entfernen.

Beispiel

Asynchroner Suchergebnis-Zähler

Eine Suchseite aktualisiert Ergebnisse während der Eingabe. Eine aria-live-polite-Region kündigt nach jedem Tastendruck '12 Ergebnisse gefunden' an, ohne die Eingabe zu unterbrechen.

Haufige Fehler

  • aria-live assertive für nicht-kritische Updates verwenden —assertive unterbricht die aktuelle Screenreader-Sprache und kann desorientierend wirken.
  • Vergessen, die Live-Region vor dem Senden von Updates zum DOM hinzuzufügen —die Region muss beim Seitenladen existieren, damit Screenreader sie erkennen.
  • Die Live-Region zu häufig aktualisieren —schnelle Updates können Screenreader-Nutzer überfordern. Entprellen oder dämpfen Sie häufige Updates.

Überprüfung

  1. Testen Sie mit einem Screenreader (VoiceOver auf Mac, NVDA auf Windows), um zu bestätigen, dass Ankündigungen zur richtigen Zeit und mit dem richtigen Inhalt ausgelöst werden.
  2. Überprüfen Sie, dass die Live-Region beim Seitenladen im DOM vorhanden ist und die korrekten role- und aria-live-Attribute aufweist.

FAQ

Fragen zu ARIA Live Region Generator

Was ist der Unterschied zwischen role=status und role=alert?

role=status verwendet standardmässig aria-live=polite —Screenreader warten, bis die aktuelle Sprache beendet ist, bevor sie ankwendigen. role=alert verwendet aria-live=assertive —Screenreader unterbrechen die aktuelle Sprache sofort. Verwenden Sie status für beratende Updates wie Speicherbestätigungen. Verwenden Sie alert für kritische Meldungen wie Sitzungszeitüberschreitungswarnungen.

Sollte ich aria-atomic true oder false verwenden?

aria-atomic=true veranlasst Screenreader, den gesamten Region-Inhalt bei jeder Änderung vorzulesen. aria-atomic=false bewirkt, dass nur der geänderte Teil vorgelesen wird. Verwenden Sie true für kurze Meldungen, bei denen der Kontext wichtig ist (wie Fehlerzusammenfassungen). Verwenden Sie false für lange Protokolle, bei denen nur neue Einträge angekündigt werden müssen.

Verwandte Tools

Weitere html-tools

Auch ausprobieren

Auch ausprobieren