Ensure aria-braillelabel and aria-brailleroledescription Have a Bon-Braille Equivalent

Web accessibility requirements state that the aria-braillelabel attribute should only ever be used on elements with an accessible name. In addition to this, the aria-brailleroledescription should only ever be used on elements with an aria-roledescription.

Why It Matters

ARIA braille attributes make it possible for labels and role descriptions to be adjusted for a braille display.

However, they cannot be the only attribute providing a label or a role description. When a corresponding label or role description is not used, ARIA will ignore these attributes. It should be noted, though, that this may not happen all the time across screen readers and other assistive technologies.

Fixing the Issue

Ensure the aria-braillelabel or aria-brailleroledescription attribute has not been placed on the wrong element, such as a parent or child of the correct element..
Any elements with an aria-braillelabel attribute need an aria-label attribute or any other attribute that gives it an accessible name.
Any elements with an aria-brailleroledescription attribute need an aria-roledescription attribute.
If an aria-braillelabel or aria-brailleroledescription attribute has no function, it needs to be removed.

Good Code Example (aria-braillelabel)

Code example

<button aria-braillelabel="****">
<img alt="4 stars" src="images/stars.jpg">
</button>

Copy

Bad Code Example (aria-braillelabel)

Code example

<img alt="" aria-braillelabel="****" src="images/stars.jpg"> Copy

Good Code Example (aria-brailleroledescription)

Code example

<div
role="article" id="slide" aria-labelledby="slideheading"
aria-roledescription="slide"
aria-brailleroledescription="sld"
>
<h1 id="slideheading">My vacation in Rome</h1>
</div>

Copy

Bad Code Example (aria-brailleroledescription)

Code example

<div
role="article" id="slide" aria-labelledby="slideheading"
aria-brailleroledescription="slide"
>
<h1 id="slideheading">My vacation in Rome</h1>
</div>

Copy

Ensure aria-braillelabel and aria-brailleroledescription Have a Bon-Braille Equivalent

Written and researched for humans by humans

Why It Matters

Fixing the Issue

Good Code Example (aria-braillelabel)

Bad Code Example (aria-braillelabel)

Good Code Example (aria-brailleroledescription)

Bad Code Example (aria-brailleroledescription)