Recommended practice Priority: Serious
The keyboard order is forced into an unexpected sequence
Some elements have a tabindex value greater than 0, which makes them jump ahead of everything else when someone moves through the page with the Tab key. 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
Keyboard users expect focus to move in the order they see on screen. With tabindex above 0, focus jumps around, for example from the logo straight to a newsletter field and then back to the menu, so people lose their place and may miss important fields at checkout.
Who is affected
- keyboard users
- screen reader users
- people with motor disabilities
How to fix it
Replace every positive tabindex with tabindex="0" (to make an element focusable in its natural place) or remove it entirely. If the order still feels wrong, change the order of elements in the HTML so it matches the visual order, instead of forcing it with tabindex. Use tabindex="-1" only for elements that should receive focus from a script.
On Shopify
Usually comes from custom code in theme sections or from an app such as a pop-up or chat widget. Search the theme code for tabindex and fix it in Liquid, or ask the app developer.
On Shoptet (CZ)
If it comes from your own inserted code or a third-party widget, fix that code; if it comes from the template, ask Shoptet or a partner.
On PrestaShop
Check the theme's .tpl files and module templates for tabindex values above 0, and override module templates in the theme rather than editing modules.
On WooCommerce
Often added by pop-up, form or chat plugins, or by the theme. Search the page source for tabindex, fix it in the child theme 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 tabindex.
dequeuniversity.com, github.com, www.w3.org