How to fix presentation role conflict on Shopify

Steps for Shopify

1. In your Shopify admin, go to Online Store → Themes → Actions → Edit code.
2. Search across all Liquid/HTML files for occurrences of role="presentation" or role="none" using the search bar at the top of the code editor (search for 'role="presentation"' and 'role="none"').
3. Open each flagged file (commonly layout/theme.liquid, sections/.liquid, snippets/.liquid) and inspect the element for conflicting ARIA attributes or tabindex.
4. Remove the conflicting attribute(s) following the decision logic in the generic steps above.
5. Save the file and preview your storefront. Use Chrome's axe DevTools extension to re-scan and confirm the issue is resolved.
6. If your theme is from the Theme Store and you cannot safely edit it, consider reaching out to the theme developer or installing an accessibility-focused app (e.g. UserWay or accessiBe) as a temporary measure — but note these cannot fully substitute for clean code.

What is presentation role conflict?

When an HTML element is given `role="presentation"` or `role="none"`, it signals to screen readers: "ignore this element — it carries no meaning, it's only here for visual layout." However, if that same element also carries global ARIA attributes (like `aria-label`, `aria-describedby`, `aria-hidden`, etc.) or a `tabindex`, a direct conflict is created. The browser and screen reader receive two contradictory instructions at once: "treat this as meaningless" and "here's meaningful information about it." Different screen readers resolve this conflict differently — some honour the role and ignore the ARIA, others do the opposite — leading to unpredictable and broken experiences for assistive-technology users.

Screen reader users — including many shoppers who are blind or have low vision — may hear garbled, repeated, or missing announcements when navigating your store if this conflict exists on interactive or decorative elements. This directly harms conversions by making it harder to browse products, read descriptions, or complete checkout. Under WCAG 2.1 Success Criteria 4.1.2 (Name, Role, Value), this is a recognized failure that can create legal exposure under accessibility laws such as the ADA (US), EN 301 549 (EU), and the Equality Act (UK). Resolving it also improves your overall accessibility audit score, which is increasingly scrutinized in enterprise purchasing decisions and legal compliance reviews.

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