Element: ariaBrailleRoleDescription property

<string>

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

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".

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

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

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

JavaScript

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

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).

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

Result