aria-braille-equivalent

Ensure that each element that works on braille displays also works on screen readers and other assistive technologies.

Description

The aria-braillelabel and aria-brailleroledescription attribute helps braille displays to properly display an element.

The aria-braillelabel attribute shouldn’t be used as a replacement to aria-label or alt text. Whenever the aria-braillelabel attribute is used, you need to also use an alt text or aria-label to make images or other elements accessible to users of assistive technologies like screen readers.

Similarly, the aria-brailleroledescription attribute shouldn’t be used as a replacement to aria-roledescription. Whenever the aria-brailleroledescription attribute is used, you need to also use the aria-roledescription attribute.

Success criteria

For this accessibility check to pass, your website must adhere to the following rules:

Example

In the following example, the image tag uses a valid aria-braillelabel attribute. However, it doesn’t have an alt text or an aria-label associated with it, which breaks the aria-braille-equivalent rule.

In contrast, the following code snippet has an alt text along with the aria-braillelabel attribute. Hence, this code snippet doesn’t break the aria-braille-equivalent rule.

Consider the following example in which the button element uses an aria-brailleroledescription attribute without using an aria-roledescription attribute. This code snippet breaks the aria-braille-equivalent rule.

In contrast, the following code snippet uses an aria-roledescription attribute along with the aria-brailleroledescription attribute. Hence, this code snippet does not break the aria-braille-equivalent rule.

How to fix?

You can follow these steps to fix issues if this rule gets flagged:

• Check if your site uses the aria-braillelabel attribute on any element without using an associated aria-label attribute or an alt text. If so, add a suitable alt text or an aria-label attribute to that element.

• Check if your site uses the aria-brailleroledescription attribute on any element without using an associated aria-roledescription attribute. If so, add a suitable aria-roledescription attribute to that element.

Reference

• WCAG 4.1.2: Name, Role, Value
• aria-braillelabel HTML attribute
• aria-brailleroledescription HTML attribute