The HTML aria-braillelabel attribute
The aria-braillelabel attribute is a separate label used only for braille output, such as *** for three stars. The normal accessible name is almost always the better experience, says the WAI-ARIA 1.3 Working Draft, the only version that has this attribute.
Overview
The aria-braillelabel attribute holds a version of an element's label that's meant to be converted into braille. Version 1.3 of WAI-ARIA introduced it, so the 1.2 Recommendation has no such attribute, and the latest published 1.3 text is a draft dated June 4, 2026.
The draft's example is a rating button. With aria-braillelabel="****" on a button around an image with the alt text 4 stars, the draft says a braille display would show btn **** rather than the verbose btn gra 4 stars, where gra is short for graphic.
The accessible name stays as it was, so that button is still named 4 stars. The braille string maps to its own accessibility API property, and Chrome and Firefox expose it there.
Assistive technology can already convert the accessible name to braille, so in the draft's words authors are "strongly discouraged" from using this attribute to replicate aria-label. It's for cases where the name can't give an adequate braille representation.
The draft asks for four things when you do use it. The element has a valid accessible name. The value isn't empty or only whitespace. It isn't identical to the name. Last, it uses no Unicode Braille Patterns, U+2800 to U+28FF, or else uses nothing but those patterns and isn't only the blank U+2800.
Syntax
<button aria-braillelabel="***">
<img src="rating.png" alt="3 out of 5 stars">
</button>Values
| Value |
|---|
| A string (braille-specific name). |
Example
<p>Move the slider. The name and the braille label change together.</p>
<label for="stars">Rating</label>
<input id="stars" type="range" min="1" max="5" value="3">
<p><span id="rating" role="img" aria-label="3 out of 5 stars" aria-braillelabel="***">★★★</span></p>
<p role="status" id="out">Name: 3 out of 5 stars. Braille label: ***</p>
<script>
const stars = document.getElementById('stars');
const rating = document.getElementById('rating');
stars.addEventListener('input', function () {
const count = Number(stars.value);
rating.setAttribute('aria-label', count + ' out of 5 stars');
rating.setAttribute('aria-braillelabel', '*'.repeat(count));
rating.textContent = '\u2605'.repeat(count);
document.getElementById('out').textContent = 'Name: ' + rating.getAttribute('aria-label') + '. Braille label: ' + rating.getAttribute('aria-braillelabel');
});
</script>Best practices
- Reserve
aria-braillelabelfor names whose braille conversion falls short, since misuse might inhibit understanding on braille interfaces. - Localize the value yourself, because you're solely responsible for aligning it with the document language.
- Tell users the attribute is in use. The draft says authors need a way to communicate this to users, and gives product documentation as one place to do it.
- A name that changes needs a new braille string too, or braille output describes an old state.
