Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
Document: 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 eineexperimentelle Technologie
Überprüfen Sie dieBrowser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
DieariaNotify() Methode desDocument-Interfaces gibt an, dass eine bestimmte Zeichenkette von einemScreenreader angekündigt werden sollte, falls verfügbar und aktiviert.
Syntax
ariaNotify(announcement)ariaNotify(announcement, options)Parameter
announcementEine Zeichenkette, die den anzukündigenden Text spezifiziert.
optionsOptionalEin Optionsobjekt, das die folgenden Eigenschaften enthält:
priorityEin enumerierter Wert, der die Priorität der Ankündigung angibt. Mögliche Werte sind:
Rückgabewert
Keiner (undefined).
Beschreibung
DieariaNotify() Methode kann verwendet werden, um programmatisch eine Screenreader-Ankündigung auszulösen. Diese Methode bietet eine ähnliche Funktionalität wieARIA Live-Bereiche, mit einigen Vorteilen:
- Live-Bereiche können nur nach Änderungen am DOM Ankündigungen machen, während eine
ariaNotify()-Ankündigung jederzeit gemacht werden kann. - Live-Bereichsankündigungen beinhalten das Lesen des aktualisierten Inhalts des geänderten DOM-Knotens, während
ariaNotify()-Ankündigungen unabhängig vom DOM-Inhalt definiert werden können.
Entwickler umgehen oft die Einschränkungen von Live-Bereichen, indem sie versteckte DOM-Knoten mit Live-Bereichen darauf verwenden, deren Inhalte mit dem anzukündigenden Inhalt aktualisiert werden. Dies ist ineffizient und fehleranfällig, undariaNotify() bietet eine Möglichkeit, solche Probleme zu vermeiden.
Einige Screenreader lesen mehrereariaNotify()-Ankündigungen in der Reihenfolge, aber dies kann nicht bei allen Screenreadern und Plattformen garantiert werden. Normalerweise wird nur die neueste Ankündigung gesprochen. Es ist zuverlässiger, mehrere Ankündigungen in einer zu kombinieren.
Zum Beispiel, die folgenden Aufrufe:
document.ariaNotify("Hello there.");document.ariaNotify("The time is now 8 o'clock.");würden besser kombiniert:
document.ariaNotify("Hello there. The time is now 8 o'clock.");ariaNotify()-Ankündigungen erfordern keinetransiente Aktivierung; Sie sollten darauf achten, Screenreader-Nutzer nicht mit zu vielen Benachrichtigungen zu überlasten, da dies zu einer schlechten Benutzererfahrung führen könnte.
Ankündigungsprioritäten
EineariaNotify()-Ankündigung mitpriority: high wird vor einerariaNotify()-Ankündigung mitpriority: normal angekündigt.
ariaNotify()-Ankündigungen sind in etwa gleichbedeutend mit ARIA-Live-Bereichsankündigungen wie folgt:
ariaNotify()priority: high:aria-live="assertive".ariaNotify()priority: normal:aria-live="polite".
Jedoch habenaria-live-Ankündigungen Vorrang vorariaNotify()-Ankündigungen.
Sprachauswahl
Screenreader wählen eine geeignete Stimme aus, umariaNotify()-Ankündigungen vorzulesen (in Bezug auf Akzent, Aussprache usw.) basierend auf der Sprache, die im<html>-Element mittels deslang-Attributs angegeben ist, oder der Standard-Sprache des Benutzeragenten, falls keinlang-Attribut gesetzt ist.
Integration der Berechtigungspolitik
Die Verwendung vonariaNotify() in einem Dokument oder<iframe> kann durch einearia-notifyBerechtigungsrichtlinie gesteuert werden.
Insbesondere, wenn eine definierte Richtlinie die Nutzung blockiert, schlagen alle mitariaNotify() erstellten Ankündigungen stillschweigend fehl (sie werden nicht gesendet).
Beispiele
GrundlegendeariaNotify()-Nutzung
Dieses Beispiel enthält eine<button>, die beim Klicken eine Screenreader-Ankündigung auslöst.
<button>Press</button>html,body { height: 100%;}body { display: flex; justify-content: center; align-items: center;}document.querySelector("button").addEventListener("click", () => { document.ariaNotify("Hi there, I'm Ed Winchester.");});Ergebnis
Die Ausgabe ist wie folgt:
Versuchen Sie, einen Screenreader zu aktivieren und dann die Schaltfläche zu drücken. Sie sollten "Hi there, I'm Ed Winchester." vom Screenreader gesprochen hören.
Beispiel einer zugänglichen Einkaufsliste
Dieses Beispiel ist eine Einkaufsliste, die das Hinzufügen und Entfernen von Artikeln ermöglicht und die Gesamtkosten aller Artikel verfolgt. Wenn ein Artikel hinzugefügt oder entfernt wird, lesen Screenreader eine Ankündigung vor, um zu sagen, welcher Artikel hinzugefügt/entfernt wurde und was die aktualisierte Gesamtsumme ist.
HTML
Unser HTML enthält ein<form>, das zwei<input>-Elemente enthält — eintext-Eingabefeld zur Eingabe von Artikelnamen und einnumber-Eingabefeld zur Eingabe von Preisen. Beide Eingaben sindrequired, und dasnumber-Eingabefeld hat einenstep-Wert von0.01, um zu verhindern, dass Nicht-Preiseingaben (wie große Dezimalzahlen) eingegeben werden.
Unterhalb des Formulars haben wir eineungeordnete Liste zum Rendern der hinzugefügten Artikel und ein<p>-Element, um die Gesamtkosten anzuzeigen.
<h1><code>ariaNotify</code> demo: shopping list</h1><form> <div> <label for="item">Enter item name</label> <input type="text" name="item" required /> </div> <div> <label for="price">Enter item price</label> <input type="number" name="price" step="0.01" required /> </div> <div> <button>Submit</button> </div></form><hr /><ul></ul><p>Total: £0.00</p>html { box-sizing: border-box; font: 1.2em / 1.5 system-ui;}body { width: 600px; margin: 0 auto;}form { padding: 0 50px;}div { display: flex; margin-bottom: 20px;}label { flex: 2;}input { flex: 4; padding: 5px;}form button { padding: 5px 10px; font-size: 1em; border-radius: 10px; border: 1px solid gray;}li { margin-bottom: 10px;}li button { font-size: 0.6rem; margin-left: 10px;}JavaScript
Unser Skript beginnt mit mehreren Konstantendefinitionen zum Speichern von Referenzen auf das<form>, unsere beiden<input>-Elemente sowie unsere<ul>- und<p>-Elemente. Wir schließen auch einetotal-Variable ein, um den Gesamtpreis aller Artikel zu speichern.
const form = document.querySelector("form");const item = document.querySelector("input[type='text']");const price = document.querySelector("input[type='number']");const priceList = document.querySelector("ul");const totalOutput = document.querySelector("p");let total = 0;In unserem nächsten Codeblock definieren wir eine Funktion namensupdateTotal(), die eine Aufgabe hat — den im<p>-Element angezeigten Preis auf den aktuellen Wert dertotal-Variablen zu aktualisieren:
function updateTotal() { totalOutput.textContent = `Total: £${Number(total).toFixed(2)}`;}Als Nächstes definieren wir eine Funktion namensaddItemToList(). Innerhalb des Funktionskörpers erstellen wir zuerst ein<li>-Element, um einen neu hinzugefügten Artikel zu speichern. Wir speichern den Artikelnamen und den Preis indata-*-Attributen auf dem Element und setzen dessen Textinhalt gleich mit einer Zeichenkette, die den Artikel und den Preis enthält. Wir erstellen auch ein<button>-Element mit dem Text "Remove <item-name>", fügen dann das Listenelement zur ungeordneten Liste hinzu und die Schaltfläche zum Listenelement.
Der zweite Hauptteil des Funktionskörpers ist eineclick-Ereignislistener-Definition auf der Schaltfläche. Wenn die Schaltfläche geklickt wird, greifen wir zuerst eine Referenz auf das übergeordnete Element der Schaltfläche — das Listenelement, in dem sie sich befindet. Wir ziehen dann die Zahl, die imdata-price-Attribut des Listenelements enthalten ist, von dertotal-Variablen ab, rufen dieupdateTotal()-Funktion auf, um den angezeigten Gesamtpreis zu aktualisieren, rufen dannariaNotify() auf, um den entfernten Artikel und die neue Gesamtsumme anzukündigen. Schließlich entfernen wir das Listenelement aus dem DOM.
function addItemToList(item, price) { const listItem = document.createElement("li"); listItem.setAttribute("data-item", item); listItem.setAttribute("data-price", price); listItem.textContent = `${item}: £${Number(price).toFixed(2)}`; const btn = document.createElement("button"); btn.textContent = `Remove ${item}`; priceList.appendChild(listItem); listItem.appendChild(btn); btn.addEventListener("click", (e) => { const listItem = e.target.parentNode; total -= Number(listItem.getAttribute("data-price")); updateTotal(); document.ariaNotify( `${listItem.getAttribute( "data-item", )} removed. Total is now £${total.toFixed(2)}.`, { priority: "high", }, ); listItem.remove(); });}Unser letzter Codeblock fügt einensubmit-Ereignislistener zum<form> hinzu. Innerhalb der Handler-Funktion rufen wir zuerstpreventDefault() auf dem Ereignisobjekt auf, um das Absenden des Formulars zu stoppen. Wir rufen dannaddItemToList() auf, um das neue Element und dessen Preis in der Liste anzuzeigen, den Preis zurtotal-Variablen hinzuzufügen, rufenupdateTotal() auf, um die angezeigte Gesamtsumme zu aktualisieren, dann rufen wirariaNotify() auf, um den hinzugefügten Artikel und die neue Gesamtsumme anzukündigen. Schließlich leeren wir die aktuellen Eingabefeldwerte, um das nächste Element hinzuzufügen.
form.addEventListener("submit", (e) => { e.preventDefault(); addItemToList(item.value, price.value); total += Number(price.value); updateTotal(); document.ariaNotify( `Item ${item.value}, price £${ price.value }, added to list. Total is now £${total.toFixed(2)}.`, { priority: "high", }, ); item.value = ""; price.value = "";});Ergebnis
Die Ausgabe ist wie folgt:
Versuchen Sie, einen Screenreader zu aktivieren und dann einige Artikel hinzuzufügen und zu entfernen. Sie sollten sie vom Screenreader angekündigt hören.