aria-braille attributes must have a non-braille equivalent

Rule ID: aria-braille-equivalent
Ruleset: axe-core 4.8
User Impact: Critical
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549

Build more accessible websites with axe DevTools Pro

Find and fix more issues with Intelligent Guided Tests™ by answering a series of simple questions about your page content. Free trial. No credit card needed.

Compliance Data & Impact

User Impact

Critical
▼
Minor
Critical

Disabilities Affected

  • Blind
  • Deafblind
  • Mobility

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • WCAG 2.2 (A)
  • EN 301 549

WCAG Success Criteria [WCAG 2.1 (A)]

  • 4.1.2: MUST: Name, Role, Value

WCAG Success Criteria [WCAG 2.0 (A)]

  • 4.1.2: MUST: Name, Role, Value

WCAG Success Criteria [WCAG 2.2 (A)]

  • 4.1.2: MUST: Name, Role, Value

EN 301 549 Guidelines

  • 9.4.1.2: MUST: Name, Role, Value

How to Fix the Problem

  • The aria-braillelabel or aria-brailleroledescription attribute may have been placed on the wrong element, such as a parent or child of the correct element. The attribute should be put on a different element.
  • The element with aria-braillelabel attribute needs an aria-label attribute or other attribute that gives it an accessible name.
  • The element with aria-brailleroledescription attribute needs a aria-roledescription attribute.
  • The aria-braillelabel or aria-brailleroledescription attribute serves no function and should be removed.

Good aria-braillelabel:

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

Bad aria-braillelabel:

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

Good aria-brailleroledescription

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

Bad aria-brailleroledescription

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

Why it Matters

ARIA braille attributes were introduced to allow adjusting how labels and role descriptions are rendered on a braille display. They cannot be the only attribute providing a label, or a role description. When used without a corresponding label or role description ARIA says to ignore these attributes, although this may not happen consistently in screen readers and other assistive technologies.

Rule Description

WAI-ARIA requires that the aria-braillelabel attribute is only ever used on elements with an accessible name, such as from aria-label. Similarly, aria-brailleroledescription is required to only ever be used on elements with aria-roledescription.

The Algorithm (in simple terms)

Checks that aria-braillelabel is only used on elements with a non-empty label, and that aria-brailleroledescription is only used on elements with a non-empty aria-roledescription.

Resources

Deque University Course Pages (subscription required)

Contribute to axe-core on GitHub

Other Resources

You may also want to check out these other resources.

Refer to the complete list of axe 4.8 rules.

Was this information helpful?

You have already given your feedback, thank you..

Your response was as follows:

Was this information helpful?
Date/Time feedback was submitted: