Ensure aria-braillelabel and aria-brailleroledescription Have a Bon-Braille Equivalent
Blind
Low vision
Hearing
Mobility
WCAG 2.2 Level A
Written and researched for humans by humans
Casandra Visser
Author
Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments:
0
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)
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