The HTML aria-brailleroledescription attribute
The aria-brailleroledescription attribute gives an aria-roledescription a shorter braille form, as in sld for slide. WAI-ARIA 1.3, a Working Draft of June 4, 2026, says authors must not use it without aria-roledescription. The 1.2 Recommendation doesn't include it.
Overview
The aria-brailleroledescription attribute abbreviates an element's role description for conversion into braille, in wording the author localizes. Its home is WAI-ARIA 1.3, which is still a draft.
It can't stand alone. The draft says "Authors MUST NOT use aria-brailleroledescription without providing aria-roledescription", and browsers must not expose it otherwise. Chrome and Firefox both still hold a lone value in their accessibility trees, so checking the pair falls to you.
Verbosity is the reason to use it. Braille isn't a one-to-one transliteration of letters and numbers, and the draft keeps this attribute for rare cases when a role description is excessively verbose in braille. Its example gives sld Quarterly Report in place of slide Quarterly Report.
The draft also tells browsers to skip a value that's empty or only whitespace, and it counts the empty braille pattern, U+2800, as whitespace.
The value should differ from what it shortens. The draft says it should not be identical to the element's aria-roledescription or its role. It should also avoid mixing Unicode Braille Patterns with other characters, and the draft strongly discourages those patterns in general.
Syntax
<article aria-roledescription="slide"
aria-brailleroledescription="sld"
aria-labelledby="title">
<h2 id="title">Quarterly report</h2>
</article>Values
| Value |
|---|
| A string (braille-specific role description). |
Example
<p>Read the result for sld, then clear the Braille form field or type slide or article in it.</p>
<label for="full">Role description</label>
<input id="full" type="text" value="slide"><br>
<label for="short">Braille form</label>
<input id="short" type="text" value="sld">
<article id="card" aria-labelledby="card-title" aria-roledescription="slide" aria-brailleroledescription="sld">
<h2 id="card-title" style="margin: 0; font-size: 1em;">Quarterly report</h2>
</article>
<p role="status" id="out"></p>
<script>
const full = document.getElementById('full');
const short = document.getElementById('short');
const card = document.getElementById('card');
const out = document.getElementById('out');
function check(role, value) {
if (!role.trim()) return 'The draft says not to expose it, because aria-roledescription is missing.';
if (!value.replace(/[\s\u2800]/g, '')) return 'The draft says not to expose it, because the value is blank.';
if (value.trim() === role.trim()) return 'The draft says it should differ from aria-roledescription.';
if (value.trim().toLowerCase() === 'article') return "The draft says it should differ from the element's role.";
if (/[\u2800-\u28FF]/.test(value) && /[^\u2800-\u28FF]/.test(value)) return 'The draft says not to mix braille patterns with other characters.';
return 'The pair meets the value rules in the draft.';
}
function update() {
if (full.value.trim()) card.setAttribute('aria-roledescription', full.value);
else card.removeAttribute('aria-roledescription');
card.setAttribute('aria-brailleroledescription', short.value);
out.textContent = check(full.value, short.value);
}
full.addEventListener('input', update);
short.addEventListener('input', update);
update();
</script>Best practices
- Write
aria-roledescriptionfirst, then ask whetheraria-brailleroledescriptionis needed. In the draft's view, the role description by itself almost always serves braille users better. - Hold it to the two uses the draft recommends for braille. One clarifies the purpose of a container such as a group or region, and the other describes a widget more exactly.
- Translate both values together, because the draft leaves localizing this one to you. A Spanish page that uses diapositiva for slide needs a Spanish abbreviation too.
- Test with daily users of assistive technology, including braille readers, so you know the abbreviation makes sense.
