References

Beginner-friendly references for web development, with live, editable examples.

The HTML aria-braillelabel attribute

ARIA Accessibility Updated
Quick answer

The aria-braillelabel attribute supplies an accessible name specifically for refreshable braille displays, used in place of the normal name only there. It is an ARIA 1.3 feature for the rare cases where the standard label reads poorly in braille (for example emoji or symbols).

Overview

The aria-braillelabel attribute provides a braille-specific accessible name, used only on refreshable braille displays.

It is one of ARIA's naming and description properties, which give an element an accessible name or description for assistive technology. Whenever you can, associate visible text — a <label>, or aria-labelledby pointing at on-screen text — so sighted and screen-reader users get the same information, rather than hiding it in an invisible string.

Like all ARIA, aria-braillelabel changes only the accessibility tree — what assistive technology perceives — never the element's behavior or appearance. The first rule of ARIA applies: if a native HTML element or attribute conveys this, use that instead, and only reach for ARIA when nothing native fits.

Syntax

<button aria-label="★ Favorite" aria-braillelabel="Favorite">★</button>

Values

Value
A string (braille-specific name).

Example

Live example
<span role="img" aria-label="5 out of 5 stars" aria-braillelabel="5 stars">★★★★★</span>

Best practices

  • Follow the first rule of ARIA — use a native HTML element or attribute that conveys this where one exists, rather than adding ARIA.
  • Prefer referencing visible text (a <label> or aria-labelledby) over an invisible string where possible.
  • Use aria-label only when there is no suitable on-screen text to reference.
  • Keep the name concise and meaningful — it is exactly what a screen reader announces.

Frequently asked questions

What does aria-braillelabel do?
Provides a braille-specific accessible name, used only on refreshable braille displays.
What is the difference between aria-label and aria-labelledby?
aria-label takes a string you write; aria-labelledby references the id of visible text on the page, which is usually preferable.
Does this attribute change what is displayed?
No. Naming and description properties affect only what assistive technology announces, not the visible page.
Do I need aria-braillelabel if native HTML already conveys it?
Usually not. ARIA is for what native HTML cannot express; redundant or incorrect ARIA can make accessibility worse. Reach for it only when no native element fits.