Recommended practice Priority: Minor · experimental check: may need a manual look
A keyboard-focusable element does not say what it is
An element that can be reached with the Tab key, such as a clickable div or span, has no role that tells assistive technology it is a button, link or other control. axe marks this check as experimental, so results need a manual review. This is a recommended practice, not a WCAG AA requirement.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
A keyboard or screen reader user lands on the element but hears only its text, or nothing, without "button" or "link". They cannot tell that it can be activated, so options like a size picker, a filter or "add to wishlist" may be skipped.
Who is affected
- screen reader users
- keyboard users
- voice control users
How to fix it
Use native elements for controls: <button> for actions and <a href> for navigation. If a custom element must stay, add a suitable role (button, link, tab, checkbox and so on) plus the keyboard behaviour that role expects. If the element is not interactive, remove its tabindex so it does not receive focus. Because this rule is experimental, confirm each result manually before changing code.
On Shopify
Usually caused by custom code in the theme or apps, for example colour swatches, quick view or wishlist buttons. Replace the clickable div or span with a <button> in the Liquid snippet, or ask the app developer to fix it.
On Shoptet (CZ)
Decided by the template and add-ons. Report the element to Shoptet or the add-on developer; custom code you added yourself can be fixed directly.
On PrestaShop
Usually comes from theme JavaScript or modules such as variant pickers and sliders. Fix the markup in the theme's .tpl files and scripts, or ask the module author.
On WooCommerce
Often comes from page-builder widgets or plugins that make divs clickable. Update the plugin or change the markup in a child theme template so controls are real buttons or links.
Standards
Not a WCAG success criterion: a recommended practice that makes the site easier to use.
Automated check: axe-core rule focus-order-semantics.
dequeuniversity.com, github.com