Names, roles & states
An Element Marked to Be Ignored Is Still Announced
Something marked as decoration still gets announced or takes keyboard focus. Screen reader users then hear clutter that was meant to stay silent.
presentation-role-conflictBest practiceBest practice — not a WCAG requirement, but it helps people all the same.
- Status
- MinorMinor — Cosmetic, or best practice.CurrentScanners run this rule today.
- Owner
- DesignDevTest
- Audit
- AutomatedA scanner finds it, and a clean scan means it's fixed.
Why it matters
role="none" or role="presentation" tells assistive technology to treat an element as plain decoration. A screen reader is software that reads the page aloud. But if that element can also take focus, or carries a label, the browser drops the "ignore me" role.
The element is then announced as a real image, table or list. People hear noise, or stop on things that do nothing. The team's intent is lost, and nobody can see it on screen.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Screen reader users | They hear decorative images, layout tables or empty items announced as if they matter. | Partial impact |
| Low-vision users (magnification) | Affected only if they also use a screen reader. | Partial impact |
| Keyboard-only users | Tab may stop on a decoration that does nothing when pressed. | Partial impact |
| Cognitive and neurodivergent users | Extra, meaningless stops make the page harder to follow for some people. | Partial impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | This is a best practice, not a WCAG 2.2 requirement. It rarely drives a complaint under the Disability Discrimination Act on its own. | Low impact |
| Conversion | Small effect. Extra stops slow people down but rarely block a purchase. | Low impact |
| SEO | No search benefit at all. | Low impact |
| Brand trust | A cluttered screen reader experience feels careless, even when everything technically works. | Low impact |
| Cost to fix | Usually a one-line fix: remove the focus or the label, or remove the role. | High impact |
Fixing it in code
A decorative image that takes focus
Don't
<img src="divider.png" alt="" role="presentation" tabindex="0">A screen reader says: “divider dot png, image”
Do
<img src="divider.png" alt="" role="presentation">A screen reader says: “(nothing — the image is skipped)”
Without tabindex, nothing overrides the decorative role, so it stays silent.
A layout table with a description
Don't
<table role="presentation" aria-describedby="intro">…</table>A screen reader says: “table, 2 columns, 3 rows”
Do
<table role="presentation">…</table>A screen reader says: “(the cell text is read as plain content)”
Removing aria-describedby lets the browser honour the decorative role.
Designer's handoff note
Mark each element in your designs as either decoration or content. Decoration should never be clickable or need a label.
If something needs a label or a click, it isn't decoration — design it as a real control or image.
Quick test
Tool
NVDA (opens in a new tab) (free for Windows)
Checklist
- Pass
- Decorative items are skipped and never take focus.
- Fail
- You hear a decoration announced, or Tab stops on it.
Check these at the same time
- An ARIA attribute is used where it isn't allowed
aria-allowed-attr - An element has an ARIA role that doesn't suit it
aria-allowed-role - Hidden content can still receive keyboard focus
aria-hidden-focus - An image has no text alternative
image-alt
What a green scan still misses
A scanner finds the conflict but can't tell which you meant. You decide whether the element is decoration or real content.
Reference
- Rule ID
presentation-role-conflict- Raised by
- axe-core: “Elements marked as presentational should be consistently ignored”
- WCAG
- Best practice — not a WCAG requirement
- Last reviewed
- 14 October 2026