Element: ariaNotify() Methode

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die ariaNotify() Methode des Element Interfaces legt fest, dass ein bestimmter Text von einem Screenreader, sofern verfügbar und aktiviert, angesagt werden soll.

Syntax

ariaNotify(announcement)
ariaNotify(announcement, options)

Parameter

announcement

Ein String, der den anzusagenden Text angibt.

options Optional

Ein Optionsobjekt mit den folgenden Eigenschaften:

priority

Ein enumerierter Wert, der die Priorität der Ansage angibt. Mögliche Werte sind:

normal: Die Ansage hat normale Priorität. Sie wird nach jeder Ansage gesprochen, die ein Screenreader gerade macht.
high: Die Ansage hat hohe Priorität. Sie wird sofort angesagt und unterbricht dabei jede Ansage, die ein Screenreader gerade macht.

Die ariaNotify() Methode kann verwendet werden, um programmatisch eine Ansage des Screenreaders auszulösen. Diese Methode bietet ähnliche Funktionalitäten wie ARIA Live-Bereiche, mit einigen Vorteilen:

Live-Bereiche können nur Ansagen machen, nachdem Änderungen am DOM vorgenommen wurden, wohingegen eine ariaNotify()-Ansage jederzeit gemacht werden kann.
Live-Bereich-Ansagen beinhalten das Vorlesen des aktualisierten Inhalts des geänderten DOM-Knotens, wohingegen der ariaNotify()-Ansageinhalt unabhängig vom DOM-Inhalt definiert werden kann.

Entwickler umgehen oft die Beschränkungen von Live-Bereichen, indem sie versteckte DOM-Knoten mit Live-Bereichen verwenden, die mit dem anzusagenden Inhalt aktualisiert werden. Dies ist ineffizient und fehleranfällig, und ariaNotify() bietet eine Möglichkeit, solche Probleme zu vermeiden.

Einige Screenreader lesen mehrere ariaNotify()-Ansagen nacheinander vor, aber dies kann nicht über alle Screenreader und Plattformen hinweg garantiert werden. Normalerweise wird nur die aktuellste Ansage gesprochen. Es ist zuverlässiger, mehrere Ansagen zu einer zusammenzufassen.

Zum Beispiel sollten die folgenden Aufrufe:

elemRef.ariaNotify("Hello there.");
elemRef.ariaNotify("The time is now 8 o'clock.");

besser kombiniert werden:

elemRef.ariaNotify("Hello there. The time is now 8 o'clock.");

Ein ariaNotify()-Aufruf kann auf jedem Element im DOM ausgelöst werden, außer auf solchen, die der Browser nicht als "interessant" für die Barrierefreiheit erachtet und die beim Erstellen des Barrierefreiheitsbaums ignoriert werden. Welche Elemente ignoriert werden, variiert je nach Browser, aber die Liste umfasst im Allgemeinen Containerelemente mit wenig bis gar keinem semantischen Wert, wie die Elemente <html> und <body>.

ariaNotify()-Ansagen erfordern keine transiente Aktivierung; Sie sollten darauf achten, Screenreader-Benutzer nicht mit zu vielen Benachrichtigungen zu überfluten, da dies zu einer schlechten Benutzererfahrung führen könnte.

Ansageprioritäten

Eine ariaNotify()-Ansage mit priority: high wird vor einer ariaNotify()-Ansage mit priority: normal angesagt.

ariaNotify()-Ansagen sind ungefähr gleichwertig mit den folgenden ARIA Live-Bereich-Ansagen:

ariaNotify() priority: high: aria-live="assertive".
ariaNotify() priority: normal: aria-live="polite".

Allerdings haben aria-live-Ansagen Vorrang vor ariaNotify()-Ansagen.

Sprachauswahl

Screenreader wählen eine geeignete Stimme (in Bezug auf Akzent, Aussprache etc.) für ariaNotify()-Ansagen basierend auf der Sprache, die im lang Attribut des Elements angegeben ist, oder, falls das Element kein spezifiziertes lang-Attribut hat, dem lang-Attribut seines nächsten Vorfahren. Wenn im HTML kein lang-Attribut angegeben ist, wird die Standardsprache des User-Agents verwendet.

Berechtigungspolitik-Integration

Die Nutzung von ariaNotify() in einem Dokument oder <iframe> kann von einer aria-notify Berechtigungspolitik gesteuert werden.

Insbesondere, wenn eine definierte Politik die Nutzung blockiert, schlagen alle mit ariaNotify() erstellten Ansagen stillschweigend fehl (sie werden nicht gesendet).

Beispiele

Für ein umfangreicheres Beispiel siehe das Accessible shopping list example auf der Document.ariaNotify() Seite. Das Beispiel würde genauso funktionieren, wenn Sie ariaNotify() auf einem Element-Referenz anstatt auf dem Document-Objekt aufrufen würden.

Grundlegende `ariaNotify()`-Nutzung

Dieses Beispiel beinhaltet einen <button>, der beim Klicken eine Ansage für den Screenreader auf sich selbst auslöst.

html

<button>Press</button>

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

document.querySelector("button").addEventListener("click", () => {
  document.querySelector("button").ariaNotify("You ain't seen me, right?");
});

Ergebnis

Die Ausgabe ist wie folgt:

Versuchen Sie, einen Screenreader zu aktivieren und dann den Button zu drücken. Sie sollten "You ain't seen me, right?" vom Screenreader gehört werden.