docs.rodeo

MDN Web Docs mirror

aria-braillelabel

{{AccessibilitySidebar}} 

The global aria-braillelabel property defines a string value that labels the current element, which is intended to be converted into Braille.

Description

The global aria-braillelabel attribute is similar to the global aria-label in that it defines a string value that labels the current element. While aria-label is read by the screen reader, the contents of the aria-braillelabel attribute are converted into Braille; providing the user with a recognizable name of the object in braille.

The purpose of the aria-braillelabel property is to override how assistive technologies localize and express the accessible name of an element in Braille. It should only be used when, without this attribute, the accessible name would not be the desired user experience when converted to braille.

When using aria-braillelabel, ensure that:

[!NOTE] Assistive technologies with braille support can convert the accessible names to braille. Therefore, only use aria-braillelabel when the accessible name is not the user experience you want.

Using only the accessible name, e.g., from content or via aria-label is almost always the better user experience, so don’t use aria-braillelabel to replicate aria-label. Only use aria-braillelabel if the accessible name cannot provide an adequate braille representation.

<button aria-braillelabel="***">
  <img alt="3 out of 5 stars" src="three_stars.png" />
</button>

A braille display may display “btn ***” in Braille rather than the more verbose “btn gra 3 out of 5 stars”.

Values

Associated roles

Used in ALL roles.

Specifications

{{Specifications}} 

See also

In this article

View on MDN