How to fix presentation role conflict on WooCommerce

Steps for WooCommerce

1. In your WordPress admin, go to Appearance → Theme File Editor (or use a child theme and a local code editor for safer editing).
2. Search your active theme's template files and any custom blocks/widgets for 'role="presentation"' and 'role="none"'.
3. Also check any page builder output (Elementor, Divi, etc.) by inspecting the live page with browser DevTools — identify which widget or block is generating the conflicting element.
4. If it's in theme files, edit the relevant template file to remove the conflicting ARIA attribute or tabindex as described in the generic steps.
5. If it's generated by a page builder plugin, edit the widget/element settings and remove any custom ARIA attribute that was added in the plugin's Advanced/Accessibility fields.
6. Update and clear any caching plugin (e.g. WP Rocket, W3 Total Cache). Re-scan with axe to confirm the fix.

<!-- ❌ 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>

What is presentation role conflict?

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.

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.

See the complete Presentation role conflict guide for every platform and the full background.