What This Rule Checks
ARIA braille attributes, such as aria-braillelabel and aria-brailleroledescription, are used to provide custom labels and role descriptions for assistive technologies, specifically Braille readers. These attributes must be applied correctly to the appropriate elements, and the elements they are applied to should have corresponding accessible naming attributes (e.g., aria-label or aria-roledescription).
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.
Why This Matters
Braille display users rely on concise, accurate labels. When braille-specific attributes exist without a standard accessible name, the braille display may show the custom label while the screen reader announces nothing, creating a disconnect between output devices.
How to Fix
To fix ARIA Braille-related attribute issues, follow these best practices:
Check Placement of Braille Attributes: Ensure that the aria-braillelabel or aria-brailleroledescription attributes are applied to the correct element. Avoid placing them on the wrong parent or child elements.
Add a Corresponding Accessible Name: Elements with aria-braillelabel must also have an accessible name attribute like aria-label or another method that defines an accessible name.
Use the Correct Role Descriptions: If using aria-brailleroledescription, ensure the element also has an aria-roledescription attribute to describe the element’s role.
Remove Unnecessary Braille Attributes: If these attributes serve no function on an element, they should be removed.
Code Examples
<!-- Braille label without a corresponding accessible name -->
<button aria-braillelabel="submit">
<img src="arrow.png">
</button>
Copy
<!-- Braille label with matching accessible name -->
<button aria-label="Submit form" aria-braillelabel="submit">
<img src="arrow.png" alt="">
</button>
Copy
Common Mistakes to Avoid
- Adding aria-braillelabel without also providing aria-label or visible text.
- Using aria-brailleroledescription without a corresponding aria-roledescription.
- Applying braille attributes to elements that don’t need custom braille output.
Tip: Remember the first rule of ARIA: don’t use ARIA if a native HTML element can provide the same semantics. Native elements come with built-in keyboard handling and screen reader support that ARIA cannot replicate.
Related WCAG Criteria
- 4.1.2: Name, Role, Value