ElementInternals: ariaBrailleLabel-Eigenschaft

Baseline 2024

Neu verfügbar

Seit September 2024 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Die ariaBrailleLabel-Eigenschaft der ElementInternals-Schnittstelle spiegelt den Wert des aria-braillelabel-Attributs wider, das das ARIA-Braille-Label des Elements definiert.

Dieses Element-Label kann von unterstützenden Technologien verwendet werden, die Inhalte in Braille präsentieren können, sollte jedoch nur festgelegt werden, wenn ein spezifisches Braille-Label die Benutzererfahrung verbessern würde. Das aria-braillelabel enthält zusätzliche Informationen darüber, wann die Eigenschaft festgelegt werden sollte.

Wert

Ein String, der in Braille umgewandelt werden soll.

Beispiele

Dieses Beispiel zeigt, wie die ariaBrailleLabel-Eigenschaft gelesen und gesetzt wird.

Angenommen, wir haben ein benutzerdefiniertes Element namens <star-rating> definiert, bei dem das interne Braille-Label des Elements als Wert des aria-braillelabel-Attributs des Elements festgelegt wird:

class StarRating extends HTMLElement {
  constructor() {
    super();
    this._internals = this.attachInternals();
    this._internals.ariaRole = "slider";
    this._internals.ariaBrailleLabel = this.ariaBrailleLabel;
  }

  // …
}

customElements.define("star-rating", StarRating);

Und wir fügen das benutzerdefinierte Element mit dem Labeltext "3 von 5 Sternen" und einem aria-braillelabel-Attribut mit dem Wert "3" ein. Dies ermöglicht es einer Braille-Anzeige, "Schieberegler 3" in Braille anzuzeigen, anstatt das ausführlichere "Schieberegler grad 3 von 5 Sternen".

html

<star-rating id="rate" aria-braillelabel="3">3 out of 5 stars</star-rating>

<pre id="log"></pre>

#log {
  height: 100px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logInternals = document.querySelector("#log");
function log(text) {
  logInternals.innerText = `${logInternals.innerText}${text}\n`;
  logInternals.scrollTop = logInternals.scrollHeight;
}

Der Code verwendet die ariaBrailleLabel-Eigenschaft, um das Braille-Label zu lesen und zu setzen.

const el = document.querySelector("star-rating");
log(el._internals.ariaBrailleLabel);
el._internals.ariaBrailleLabel += "*";
log(el._internals.ariaBrailleLabel);

Spezifikationen

Spezifikation
Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariabraillelabel

Browser-Kompatibilität

Siehe auch

ElementInternals.ariaBrailleRoleDescription

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden