Element.ariaBrailleLabel — Eigenschaft · JavaScript-Referenz

Signatur

Element.ariaBrailleLabel

Beschreibung

Die Eigenschaft ariaBrailleLabel gehört zur ARIA-Reflection der Schnittstelle Element. Sie spiegelt das Inhaltsattribut aria-braillelabel: Wenn du die Eigenschaft liest, bekommst du den Attributwert. Wenn du sie setzt, wird das Attribut im DOM geschrieben. Das funktioniert genauso wie getAttribute("aria-braillelabel") und setAttribute(...), ist aber kürzer.

Mit aria-braillelabel gibst du eine für Braille optimierte Fassung des zugänglichen Namens an. Bildschirmleser lesen weiter den normalen Namen vor, zum Beispiel aus aria-label, dem Textinhalt oder einem <label>. Auf der Braillezeile erscheint dagegen der Text aus aria-braillelabel. Das ist praktisch, wenn ein langer Name auf der Zeile zu viel Platz braucht oder wenn es eine gängige Kurzform gibt. Beispiele sind Schachfiguren, Spielkarten, Symbole oder Statusanzeigen wie „3★“.

Setze die Eigenschaft nur, wenn das Element bereits einen zugänglichen Namen hat. Sonst ignorieren Hilfstechnologien sie. Die Braille-Beschriftung sollte nicht leer sein und darf nicht einfach den normalen Namen wiederholen. Nach der Spezifikation soll sie nur eingesetzt werden, wenn Braille-Nutzer dadurch wirklich einen Vorteil haben.

Parameter

Name	Typ	Default	Beschreibung
$value	string \| null	null	Beim Setzen: der neue Text für `aria-braillelabel`. Mit `null` wird das Attribut entfernt.

Rückgabewert

Typ

string | null

Beschreibung

Der aktuelle Wert des Attributs aria-braillelabel als Zeichenkette. Fehlt das Attribut, ist der Wert null.

Beispiele

Braille-Label auslesen

// HTML: <button id="karte" aria-label="Herz Dame" aria-braillelabel="♥D">🂽</button>
const karte = document.querySelector('#karte');
console.log(karte.ariaLabel);
console.log(karte.ariaBrailleLabel);

Herz Dame ♥D

Kurzform für eine Bewertungsanzeige dynamisch setzen

const zeigeBewertung = (el, sterne) => {
  el.textContent = '★'.repeat(sterne);
  el.ariaLabel = `${sterne} von 5 Sternen`;
  // Kurzform nur für Braillezeilen
  el.ariaBrailleLabel = `${sterne}/5*`;
};

const rating = document.querySelector('.rating');
zeigeBewertung(rating, 4);
console.log(rating.getAttribute('aria-braillelabel'));

4/5*

Attribut entfernen und Unterstützung prüfen

const el = document.querySelector('#karte');

if ('ariaBrailleLabel' in Element.prototype) {
  el.ariaBrailleLabel = null; // entfernt das Attribut
} else {
  el.removeAttribute('aria-braillelabel'); // Fallback
}
console.log(el.hasAttribute('aria-braillelabel'));

false

// Wichtig · Fallstricke

Browserunterstützung: Das Attribut ist Teil von ARIA 1.3 und relativ neu. Die Eigenschaft gibt es erst in aktuellen Browsern. Ob Bildschirmleser das Attribut wirklich an die Braillezeile weitergeben, hängt von Browser und Bildschirmleser ab, etwa NVDA, JAWS oder VoiceOver. Für ältere Umgebungen nimmst du setAttribute('aria-braillelabel', …). Das Attribut bleibt dort ohne Wirkung, schadet aber nicht.
Die Eigenschaft wirkt nur, wenn das Element einen zugänglichen Namen hat, etwa über aria-label, aria-labelledby oder den Textinhalt. Sie ersetzt diesen Namen nicht.
Keine leeren Werte und keine reinen Wiederholungen des normalen Namens. Setze sie sparsam ein, denn Braille-Nutzer erwarten meist denselben Text wie in der Sprachausgabe.
Schreibe Wörter aus, statt sie zu kürzen. Braillezeilen verwenden ohnehin eigene Kurzschriften, und eine zusätzliche Abkürzung kann die Darstellung verschlechtern.
Der Wert ist immer eine Zeichenkette. Zahlen werden also in Text umgewandelt.

Siehe auch

Element.ariaMultiSelectable Element.ariaPlaceholder Element.ariaLabel Element.ariaLevel Element.ariaRelevant