Names, roles & states
A Braille-Only Label Has No Matching Spoken Label
The control has a short label for braille displays but no normal label, so people using speech hear nothing useful about what it is.
aria-braille-equivalentWCAG 2.0Introduced in WCAG 2.0.Level AA — the minimum. Missing it blocks people outright.
- Status
- SeriousSerious — Significant friction, or information that is lost.CurrentScanners run this rule today.
- Owner
- DesignDevTest
- Audit
- AutomatedA scanner finds it, and a clean scan means it's fixed.
Why it matters
aria-braillelabel and aria-brailleroledescription give a shorter version of a label for braille displays. A braille display is a device that shows text as raised dots. These attributes only add a short form. They don't replace the normal label.
If there is no normal label, screen readers have nothing to say aloud. Many browsers will also ignore the braille version. The control ends up with no usable name at all.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Screen reader users | They hear only "button" or nothing at all, with no clue what the control does. | High impact |
| Voice control users | They can't say the control's name to click it, because it has no name. | High impact |
| Low-vision users (magnification) | Affected if they also use a screen reader, as many do. | Partial impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | It relates to WCAG 4.1.2 at Level A, the minimum. Complaints under Australia's Disability Discrimination Act point to WCAG, and EN 301 549 applies in Europe. | High impact |
| Conversion | An unnamed button in checkout or sign-up can stop a screen reader user from finishing. | Moderate impact |
| SEO | No real search benefit — don't sell it as one. | Low impact |
| Brand trust | It shows someone tried to help braille users but broke the basics. | Low impact |
| Cost to fix | Usually a one-line fix. Fix it once in the shared component. | High impact |
Fixing it in code
An icon button with a braille label
Don't
<button aria-braillelabel="ok">
<svg aria-hidden="true">…</svg>
</button>A screen reader says: “button”
Do
<button aria-label="Confirm order" aria-braillelabel="ok">
<svg aria-hidden="true">…</svg>
</button>A screen reader says: “Confirm order, button”
The braille label is only a short form. It needs a full label to shorten.
A custom role with a braille description
Don't
<div role="group" aria-label="Summer sale"
aria-brailleroledescription="sld">…</div>A screen reader says: “Summer sale, group”
Do
<div role="group" aria-label="Summer sale"
aria-roledescription="slide"
aria-brailleroledescription="sld">…</div>A screen reader says: “Summer sale, slide”
aria-brailleroledescription only works alongside aria-roledescription.
Designer's handoff note
For each icon-only control, write down its full spoken name first. Add a braille short form only if users have asked for one.
Quick test
Tool
VoiceOver (opens in a new tab) (on every Mac)
Checklist
- Pass
- You hear a clear name, like "Confirm order, button".
- Fail
- You hear only the role, like "button", or nothing.
Check these at the same time
- An ARIA attribute is used where it isn't allowed
aria-allowed-attr
What a green scan still misses
A scanner checks that a normal label exists. It can't tell whether the label and the braille short form make sense, or mean the same thing.
Reference
- Rule ID
aria-braille-equivalent- Raised by
- axe-core: “aria-braille attributes must have a non-braille equivalent”
- WCAG
- 4.1.2 Name, Role, Value (opens in a new tab) · Level A · since WCAG 2.0
- Other standards
- EN 301 549 9.4.1.2
- Last reviewed
- 14 October 2026