Recommended practice Priority: Minor
A decorative element is still announced to screen readers
An element marked as decorative (role="presentation" or role="none") also has ARIA attributes or can receive keyboard focus, so some screen readers ignore it and others do not. This is a recommended practice beyond the WCAG 2.2 AA level.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen reader users may hear stray, meaningless items or land on an empty stop while pressing Tab, for example on a decorative icon or divider. It is a small annoyance, but extra noise makes browsing products and filling in forms slower.
Who is affected
- screen reader users
- keyboard users
How to fix it
If the element is truly decorative, remove global ARIA attributes (such as aria-label or aria-describedby) and any tabindex from it, so it is ignored consistently. If it carries meaning or should be clickable, remove role="presentation" or role="none" and give it a proper role and an accessible name instead. Never put a decorative role on a link, button or form field.
On Shopify
Usually comes from icon snippets or sections in the theme, or from an app. Fix the markup in the theme's snippets or sections (Liquid) or ask the app developer.
On Shoptet (CZ)
Decided by the template or an add-on. Check whether a newer template version fixes it; otherwise ask Shoptet or a partner, or correct your own inserted code.
On PrestaShop
Usually in the theme's .tpl files or a module's templates. Override the template in the theme instead of editing the module directly.
On WooCommerce
Usually comes from the theme, a page builder or a plugin. Fix it in a child theme template or report it to the plugin author, so updates do not undo the fix.
Standards
Not a WCAG success criterion: a recommended practice that makes the site easier to use.
Automated check: axe-core rule presentation-role-conflict.
dequeuniversity.com, github.com