Recommended practice Priority: Minor
An element has a role that does not fit it
An HTML element has a role attribute that is not allowed for that element, for example a <button> marked as a heading or a <nav> menu marked as a button. This is a recommended practice, not a WCAG AA requirement on its own, but it often points to other problems.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen readers may announce the element as something it is not, or announce it differently in each browser, so shoppers expect it to behave in a way it does not. It is usually a small confusion rather than a blocker.
Who is affected
- screen reader users
- voice control users
How to fix it
Use the native HTML element that matches the purpose (<button> for actions, <a href> for navigation, <h2> for headings) and remove the conflicting role. If a custom role is really needed, put it on a neutral element such as <div> or <span> and add the keyboard behaviour that role expects. The allowed roles per element are listed in the W3C "ARIA in HTML" specification.
On Shopify
Usually from custom sections, snippets or apps (menus, sliders, pop-ups). Fix the markup in the relevant Liquid section or snippet, or report it to the app developer.
On Shoptet (CZ)
Usually from the template or custom code. Fix your own custom code; if the template causes it, report it to Shoptet or a partner.
On PrestaShop
Usually from theme .tpl templates or third-party modules (menus, sliders). Correct the markup in the theme or module templates, preferably via an override.
On WooCommerce
Usually from page-builder widgets, menu or slider plugins, or custom theme templates. Fix it in a child theme template or report it to the plugin author.
Standards
Not a WCAG success criterion: a recommended practice that makes the site easier to use.
Automated check: axe-core rule aria-allowed-role.
dequeuniversity.com, github.com, www.w3.org