Skip to main content
All website issues
Ease of Use

Keyboard navigation order may confuse users

What this means for your business

Keyboard navigation is disrupted on parts of your page. Visitors who can't use a mouse — due to disability, injury, or preference — may get stuck or be unable to reach important content like menus or forms.

How to fix it
Medium
30–60 minutes

  1. 1Find elements in your HTML with tabindex values greater than 0 (e.g., tabindex="1", tabindex="2"). These override the natural tab order and usually cause confusing navigation.
  2. 2Replace positive tabindex values with tabindex="0" to include the element in the natural tab order, or remove the tabindex attribute entirely if the element is naturally focusable (buttons, links, inputs).
  3. 3Never use tabindex="-1" on elements users need to interact with — this removes them from the tab order entirely, making them inaccessible by keyboard.
  4. 4Test keyboard navigation by pressing Tab through your entire page. Every interactive element should be reachable and in a logical order that matches the visual layout.
  5. 5Fix the visual order of your HTML to match the logical reading order rather than using tabindex to create an artificial tab sequence.

On WordPress

Page builder plugins (Elementor, Divi) sometimes add tabindex attributes to elements. Check page builder output in the HTML source and override with CSS/JS where needed. The WP Accessibility plugin can identify tabindex issues.

On Shopify

Search your theme liquid files for "tabindex" to find where it's being set. Shopify's own components follow accessibility best practices, so issues are usually in custom theme code or app scripts.

Does your site have this problem?

SiteSprout scans your site, tells you which issues you actually have in plain English, and keeps watch so nothing breaks silently.

Scan your site free