---
title: ARIA Braille Equivalent | Accessibility Rule
description: aria-braille attributes must have a non-braille equivalent
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/aria-braille-equivalent
  md: https://testingbot.com/support/accessibility/web/rules/aria-braille-equivalent/index.md
---
# Make sure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent

Rule ID: aria-braille-equivalentUser Impact: seriousGuidelines: 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:

- [aria-command-name](https://testingbot.com/support/accessibility/web/rules/aria-command-name)
- [aria-conditional-attr](https://testingbot.com/support/accessibility/web/rules/aria-conditional-attr)
- [aria-deprecated-role](https://testingbot.com/support/accessibility/web/rules/aria-deprecated-role)
- [aria-hidden-body](https://testingbot.com/support/accessibility/web/rules/aria-hidden-body)
- [aria-hidden-focus](https://testingbot.com/support/accessibility/web/rules/aria-hidden-focus)