Make sure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent

Rule ID: aria-braille-equivalent User Impact: serious Guidelines: WCAG 2.0

The aria-braillelabel and aria-brailleroledescription attributes are used to provide braille-specific labels and descriptions for assistive technologies. Misplacing or misusing these attributes can lead to accessibility issues. Follow these guidelines to ensure proper implementation:

1. Correct Element Placement

Ensure that the aria-braillelabel or aria-brailleroledescription attributes are applied directly to the correct element, not to its parent or child.

Correct:


  <button aria-label="Submit" aria-braillelabel="Braille Submit">Submit</button>

Incorrect:


  <div aria-braillelabel="Braille Submit">
    <button aria-label="Submit">Submit</button>
  </div>

2. Requirements for aria-braillelabel

When using the aria-braillelabel attribute, the element must also have an accessible name provided by an aria-label or another naming attribute.

Correct:


  <span aria-label="Download File" aria-braillelabel="Braille Download">📁 Download</span>

Incorrect:


  <span aria-braillelabel="Braille Download">📁 Download</span>

3. Requirements for aria-brailleroledescription

When using the aria-brailleroledescription attribute, ensure the element also has an aria-roledescription attribute to provide context for its role.

Correct:


  <div role="navigation" aria-roledescription="Main Menu" aria-brailleroledescription="Braille Main Menu">
    Menu
  </div>

Incorrect:


  <div role="navigation" aria-brailleroledescription="Braille Main Menu">
    Menu
  </div>

4. Remove Unnecessary Attributes

If the aria-braillelabel or aria-brailleroledescription attribute does not serve a clear purpose or is misused, it should be removed to maintain clarity and functionality.

Correct:


  <div aria-label="Menu">Menu</div>

Incorrect:


  <div aria-label="Menu" aria-braillelabel="Braille Label That Adds No Value">Menu</div>

Common Mistakes to Avoid

Using aria-braillelabel without an aria-label or similar naming attribute.
Using aria-brailleroledescription without an aria-roledescription.

Warning: Failing to provide corresponding attributes can result in these ARIA braille attributes being ignored or, worse, causing confusion in assistive technologies.

Other Rules

Interested in other web accessibility rules? Please see these other rules: