Braille ARIA attributes must have a non-braille equivalent

How to provide a non-braille equivalent?

Always pair aria-braillelabel with aria-label (or another accessible name technique) and pair aria-brailleroledescription with aria-roledescription.

<button aria-braillelabel="***">
  <svg aria-hidden="true">...</svg>
</button>

<button
  aria-label="3 out of 5 stars"
  aria-braillelabel="***"
>
  <svg aria-hidden="true">...</svg>
</button>

<div
  role="region"
  aria-brailleroledescription="sld"
>
  Slide content
</div>

<div
  role="region"
  aria-roledescription="slide"
  aria-brailleroledescription="sld"
  aria-label="Introduction"
>
  Slide content
</div>

The aria-braillelabel overrides the accessible name on braille displays. The aria-brailleroledescription overrides the role description on braille displays. Both must have a standard counterpart so users without a braille display receive the same information.

Only add a braille attribute when the standard value does not work well in braille, for example when it is too verbose or contains symbols that a braille display renders poorly. Do not use it to duplicate the accessible name or to shorten ordinary words: braille translation software already contracts those.

Why is this important?

aria-braillelabel and aria-brailleroledescription are intended only for braille displays. Users of other assistive technologies, screen readers, or speech recognition software rely on the standard aria-label and aria-roledescription attributes. Without these, those users receive no accessible name or role description.