Element: ariaBrailleRoleDescription property

Baseline 2023
Newly available

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

The ariaBrailleRoleDescription property of the Element interface reflects the value of the aria-brailleroledescription attribute, which defines the ARIA braille role description of the element.

This property may be used to provide an abbreviated version of the aria-roledescription value. It should only be used if aria-roledescription is present and in the rare case where it is too verbose for braille. The aria-brailleroledescription contains additional information about when the property should be set.

Value

<string>

The value is a string, an unconstrained value type, that is intended to be converted into braille.

Examples

Getting and setting ariaBrailleRoleDescription

This example shows how you can get and set the ariaBrailleRoleDescription property.

HTML

First we define an <article> element that would be use as a slide in a slideshow. We set the aria-roledescription attribute to "slide", and its braille contraction in aria-brailleroledescription to "sld".

html
<article
  id="article"
  aria-roledescription="slide"
  aria-brailleroledescription="sld"
  aria-labelledby="slide1heading">
  <h1 id="slide1heading">Welcome to my talk</h1>
</article>

JavaScript

To get the element's role description we use the ariaBrailleRoleDescription property. The code below first gets and then logs the value. It then sets the braille role description to "sd" and logs the value again (for illustration only — in production code you would not set this value).

js
const article = document.getElementById("article");
log(article.ariaBrailleRoleDescription);
article.ariaBrailleRoleDescription = "sd";
log(article.ariaBrailleRoleDescription);

Result

Specifications

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

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ariaBrailleRoleDescription

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support