Presentation role conflict

What it is

In HTML, you can tell screen readers to ignore a purely decorative element by giving it `role="presentation"` or `role="none"`. However, if that same element also has global ARIA attributes (like `aria-label`, `aria-describedby`, `aria-hidden`, etc.) or a `tabindex` attribute, the browser and screen reader disagree about whether to expose the element — creating a conflict. Some screen readers will override the presentational role and announce the element anyway, while others will silently discard it, leading to unpredictable and often broken experiences for users who rely on assistive technology.

Why it matters

Screen reader users — including people with visual impairments — depend on a consistent, predictable page structure. When presentational-role conflicts exist, they can cause screen readers to announce decorative or layout elements that serve no informational purpose, cluttering the experience and confusing users. This violates WCAG 2.1 Success Criterion 4.1.2 (Name, Role, Value), which is a Level A requirement — the most basic level of accessibility compliance. Failing Level A criteria creates legal exposure under laws like the ADA (US), EN 301 549 (EU), and the Equality Act (UK), and can result in lawsuits or regulatory complaints. Fixing these conflicts also demonstrates a baseline commitment to accessibility that protects your brand reputation and broadens your potential customer base.

How to fix it

1. Audit your HTML for any element that has role="presentation" or role="none" AND also carries one or more global ARIA attributes (aria-label, aria-describedby, aria-hidden, aria-live, etc.) or a tabindex attribute.
2. Decide the element's true purpose: if it is purely decorative or a layout spacer, it should have no ARIA attributes and no tabindex — keep only role="presentation" or role="none" (or remove the role entirely if the element already has no semantic meaning, e.g. a <div> or <span>).
3. If the element actually needs to convey information or be focusable, remove role="presentation"/role="none" instead and keep the ARIA attributes that describe it accurately.
4. Never combine role="presentation" or role="none" with any global ARIA attribute or a positive/zero tabindex — these combinations are inherently contradictory and will always trigger this rule.
5. After editing, validate your changes with an automated accessibility checker (e.g. axe DevTools browser extension) and test manually with a screen reader (NVDA + Firefox or VoiceOver + Safari) to confirm the element is no longer announced.
6. Re-run your accessibility scan to confirm the presentation-role-conflict finding is resolved before deploying.

<!-- ❌ WRONG: role="presentation" conflicts with aria-label and tabindex -->
<div role="presentation" aria-label="decorative divider" tabindex="0">
  <img src="divider.png" alt="">
</div>

<!-- ✅ CORRECT (option A): purely decorative — remove all conflicting attributes -->
<div role="presentation">
  <img src="divider.png" alt="">
</div>

<!-- ✅ CORRECT (option B): element actually needs to be announced — remove the presentational role -->
<div aria-label="Section divider" tabindex="0">
  <img src="divider.png" alt="">
</div>

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• How to fix this specific rule — Deque/axe (rule reference)
• WCAG 2 overview — W3C WAI
• ARIA basics — MDN