jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML- & Barrierefreiheits-Tools

Kostenlose ARIA Notify Snippet Generator

Generieren Sie ariaNotify()-Aufrufe fur programmatische Screenreader-Ankundigungen mit aria-live-Fallback.

Tool wird geladen...

Was ist ARIA Notify Snippet Generator?

Die ARIA Notify API (Chrome 141+) bietet eine programmatische Möglichkeit, dynamische Inhaltsänderungen für assistive Technologien anzukündigen. Anstatt aria-live-Bereiche manuell zu erstellen und zu verwalten, rufen Sie ariaNotify('message', { priority, duration, silent }) auf. Die API übernimmt die Ankündigungswarteschlange, die Prioritätsreihenfolge und den Promise-basierten Abschluss. Dies ersetzt das gängige Muster des Umschaltens von aria-live-Bereich-textContent zur Auslösung von Screenreader-Ankündigungen.

Kurze Antwort

Verwenden Sie ariaNotify('message', { priority, duration }), um Inhalte programmatisch für Screenreader anzukündigen. Gibt ein Promise zurück, das aufgelöst wird, wenn die Ankündigung abgeschlossen ist. Chrome 141+. Fallback: Verwenden Sie aria-live-Bereiche für ältere Browser.

Last updated: 2026-06-03

Einschränkungen

  • Die ARIA Notify API ist nur Chrome 141+. Firefox und Safari unterstützen sie noch nicht. Ein Fallback zu traditionellen aria-live-Bereichen ist für browserübergreifende Barrierefreiheit erforderlich.
  • ariaNotify() erfordert Benutzeraktivierung für wichtige Prioritätsankündigungen - der Aufruf muss innerhalb einer Benutzergeste (Klick, Tastendruck) erfolgen, sonst wird die Priorität auf normal herabgestuft.
  • Mehrere schnelle Benachrichtigungen können vom Browser zusammengefasst oder verworfen werden. Die API ist für gelegentliche dynamische Ankündigungen konzipiert, nicht für Streaming-Echtzeit-Updates.

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

So nutzt du dieses Tool

  1. Wählen Sie die Benachrichtigungsnachricht und die Prioritätsstufe (normal, important oder none).
  2. Legen Sie die Dauer in Millisekunden oder 0 für manuelles Löschen fest.
  3. Rufen Sie ariaNotify() am entsprechenden Auslösepunkt auf (Formularabsendung, asynchroner Abschluss usw.).
  4. Fügen Sie einen Fallback zu aria-live-Bereichen für Browser hinzu, die die API nicht unterstützen.

Wofür du es nutzen kannst

  • Kündigen Sie Formularabsendungsergebnisse für Screenreader-Benutzer an, nachdem ein AJAX-Speichern abgeschlossen ist.
  • Benachrichtigen Sie Benutzer über neue Inhalte, die per Infinite Scroll oder Live-Updates geladen wurden.
  • Alarmieren Sie Benutzer assistiver Technologien, wenn ein Timer abläuft oder eine Hintergrundaufgabe abgeschlossen ist.

Anwendungsfalle

Praxisbeispiele

Beispiel

Formularabsendungs-Feedback

Ein Formular wird per fetch() abgesendet. Nach der Antwort kündigt ariaNotify('Formular erfolgreich gespeichert', { priority: 'normal' }) das Ergebnis für Screenreader an. Der Benutzer muss nicht zu einer Statusmeldung navigieren - die Ankündigung kommt zu ihm.

Beispiel

Live-Inhaltsaktualisierungs-Ankündigung

Ein Dashboard lädt alle 30 Sekunden neue Daten. Nach jeder Aktualisierung bietet ariaNotify('Dashboard mit 5 neuen Elementen aktualisiert', { priority: 'none', silent: true }) eine Hintergrundbenachrichtigung, die die aktuelle Screenreader-Ausgabe nicht unterbricht.

Haufige Fehler

  • ariaNotify() zu häufig aufzurufen - schnelle Benachrichtigungen können Screenreader-Benutzer überfordern. Reihen Sie wichtige ein und entprellen Sie nicht kritische Aktualisierungen.
  • ariaNotify() für benutzerausgelöste Aktionen zu verwenden, die bereits natives Feedback haben - Schaltflächenklicks und Formularabsendungen haben oft eingebaute Screenreader-Rückmeldungen.
  • Zu vergessen, einen Fallback für ältere Browser einzuschließen - die API ist nur Chrome 141+, daher halten Sie einen aria-live-Bereich als Fallback für Firefox- und Safari-Benutzer bereit.

Überprüfung

  1. Aktivieren Sie einen Screenreader (VoiceOver, NVDA oder ChromeVox) und lösen Sie den ariaNotify-Aufruf aus. Bestätigen Sie, dass die Nachricht korrekt angesagt wird.
  2. Testen Sie mit einem nicht unterstützenden Browser (Firefox), um zu überprüfen, ob der aria-live-Bereich-Fallback die Nachricht ankündigt.

FAQ

Fragen zu ARIA Notify Snippet Generator

Wie unterscheidet sich ariaNotify von aria-live-Bereichen?

ariaNotify() ist eine programmatische API - Sie rufen sie direkt in JavaScript auf, wenn Sie etwas ankündigen möchten. aria-live-Bereiche sind DOM-Elemente, die ankündigen, wenn sich ihr Textinhalt ändert. ariaNotify() übernimmt Warteschlangen, Priorität und Timing automatisch. aria-live-Bereiche erfordern manuelle DOM-Manipulation und können fragil sein - doppelte Ankündigungen, verpasste Aktualisierungen und Timing-Probleme sind häufig.

Was bedeuten die Prioritätsstufen?

normale Ankündigungen warten, bis die aktuelle Screenreader-Ausgabe beendet ist, bevor sie abgespielt werden. wichtige Ankündigungen unterbrechen die aktuelle Ausgabe sofort. none (stille) Benachrichtigungen unterbrechen nicht, stehen aber zur späteren Überprüfung zur Verfügung. Verwenden Sie 'wichtig' sparsam - nur für kritische Benachrichtigungen wie Fehler oder zeitkritische Warnungen.

Wann wird das ariaNotify-Promise aufgelöst?

Das Promise wird aufgelöst, wenn die assistive Technologie die Ankündigung beendet hat. Wenn kein Screenreader aktiv ist, wird es sofort aufgelöst. Dies ermöglicht es Ihnen, Ankündigungen zu verketten oder Aktionen auszuführen, nachdem der Benutzer die Nachricht gehört hat. await ariaNotify('Gespeichert') stellt sicher, dass die nächste Ankündigung nicht überlappt.

Verwandte Tools

Weitere html- & barrierefreiheits-tools

Auch ausprobieren

Auch ausprobieren

CSS- & Design-Tools

CSS-Karussell-Generator

Erstellen Sie natives CSS-Karussell-Markup mit Scroll-Snap, Scroll-Schaltflächen, Scroll-Markierungen und zugänglicher Listenstruktur. Kein JavaScript erforderlich.

Tool öffnen

CSS- & Design-Tools

CSS-Scroll-State-Query-Generator

Erstellen Sie CSS-scroll-state()-Container-Queries für eingerastete, fixierte oder scrollbare Elemente. Enthält einen JavaScript-Fallback für browserübergreifende Unterstützung.

Tool öffnen