Signatur
Beschreibung
Die Eigenschaft ariaBrailleRoleDescription der Element-Schnittstelle spiegelt das ARIA-Attribut aria-brailleroledescription wider. Liest du die Eigenschaft, bekommst du den aktuellen Attributwert. Schreibst du sie, wird das Attribut direkt im DOM geändert.
Das Attribut enthält eine für Braille optimierte, meist abgekürzte Rollenbeschreibung. Braillezeilen zeigen nur wenige Zeichen gleichzeitig an, deshalb sind lange Beschreibungen wie „Folie“ oder „Diagrammknoten“ dort unpraktisch. Screenreader geben die Beschreibung aus aria-brailleroledescription auf der Braillezeile aus. Für die Sprachausgabe verwenden sie weiterhin aria-roledescription.
Verwende die Eigenschaft nur, wenn das Element auch ein gültiges, nicht leeres aria-roledescription hat. Ohne dieses Attribut ignorieren Hilfstechnologien die Braille-Variante. Außerdem sollte der Braille-Wert sich wirklich von der normalen Beschreibung unterscheiden, also tatsächlich kürzer sein.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $wert | string | null | null | Beim Schreiben: die neue Braille-Rollenbeschreibung. null entfernt das Attribut aria-brailleroledescription. |
Rückgabewert
aria-brailleroledescription oder null, wenn das Attribut nicht gesetzt ist.Beispiele
Wert auslesen
// HTML: <div id="folie" role="article" aria-roledescription="Folie" aria-brailleroledescription="fol">…</div>
const folie = document.getElementById('folie');
console.log(folie.ariaRoleDescription);
console.log(folie.ariaBrailleRoleDescription);Braille-Beschreibung setzen und entfernen
const knoten = document.createElement('div');
knoten.role = 'group';
knoten.ariaRoleDescription = 'Diagrammknoten';
knoten.ariaBrailleRoleDescription = 'dgknt';
console.log(knoten.getAttribute('aria-brailleroledescription'));
// Attribut wieder entfernen
knoten.ariaBrailleRoleDescription = null;
console.log(knoten.hasAttribute('aria-brailleroledescription'));Präsentationsfolien mit Feature-Erkennung auszeichnen
const unterstuetzt = 'ariaBrailleRoleDescription' in Element.prototype;
document.querySelectorAll('.slide').forEach((slide, i) => {
slide.setAttribute('role', 'group');
slide.setAttribute('aria-roledescription', 'Folie');
if (unterstuetzt) {
slide.ariaBrailleRoleDescription = 'fol';
} else {
// Fallback: Attribut direkt setzen
slide.setAttribute('aria-brailleroledescription', 'fol');
}
slide.setAttribute('aria-label', `${i + 1}`);
});// Wichtig · Fallstricke
- Nur zusammen mit
aria-roledescription: Fehltaria-roledescriptionoder ist es leer, wirdaria-brailleroledescriptionignoriert. - Setze den Braille-Wert nicht identisch zur normalen Rollenbeschreibung. Das bringt keinen Nutzen. Leere Strings oder reine Leerzeichen sind ebenfalls ungültig.
- Verwende Abkürzungen, die Nutzer verstehen. Kryptische Kürzel erschweren die Orientierung mehr, als sie Platz sparen.
- Kompatibilität: Das Attribut kommt aus ARIA 1.3 und ist relativ neu. Ältere Browser kennen die gespiegelte Eigenschaft möglicherweise nicht. Dort liefert das Schreiben der Eigenschaft keinen Fehler, legt aber nur eine normale JS-Eigenschaft an und kein Attribut. Mit
setAttribute()bist du auf der sicheren Seite. Auch die Unterstützung durch Screenreader ist noch uneinheitlich. - Der Wert ist reiner Text und wird nicht als HTML ausgewertet, deshalb besteht kein XSS-Risiko.