ElementInternals: ariaBrailleLabel-Eigenschaft

Baseline 2024

Newly available

Since September 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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

Browser-Kompatibilität

Siehe auch

ElementInternals.ariaBrailleRoleDescription