Tabindex
Moderate effortFound on 6% of audited stores.
Remove or replace all positive tabindex values (tabindex="1" or higher) on your page elements, using tabindex="0" for focusable elements and tabindex="-1" only when programmatic focus is needed.
What it is
The `tabindex` attribute controls the order in which keyboard users move through interactive elements on a page using the Tab key. A value of `tabindex="0"` means an element joins the natural tab order based on where it appears in the HTML. A value of `tabindex="-1"` removes the element from the tab order but still allows it to receive focus via JavaScript. A positive value — like `tabindex="1"`, `tabindex="5"`, or any number above zero — forces a custom tab order that almost always creates a confusing, broken experience for keyboard and screen-reader users. This accessibility rule flags any element with a tabindex value greater than 0.
Why it matters
Positive tabindex values hijack the natural reading and navigation order, causing keyboard-only users and screen-reader users to jump around the page unpredictably — often skipping important links, buttons, or form fields entirely, or hitting them in an illogical sequence. This directly violates WCAG 2.1 Success Criterion 2.4.3 (Focus Order) and can expose your store to legal accessibility complaints or lawsuits, which are increasingly common in e-commerce. Beyond legal risk, a broken keyboard experience means customers who rely on keyboard navigation (including many users with motor disabilities) may be unable to complete checkout, contact forms, or product searches — directly costing you conversions and revenue. Fixing this is also a signal of overall code quality that can indirectly support SEO through improved Core Web Vitals and reduced bounce rates from frustrated users.
How to fix it
- Audit your pages for any element with a tabindex attribute set to a value of 1 or higher — search your theme files and custom code for 'tabindex' and review the values found.
- For each element with a positive tabindex, decide whether it truly needs to be focusable: if it is a standard interactive element (link, button, input, select, textarea), remove the tabindex attribute entirely and let the browser handle focus order naturally.
- If you need a non-interactive element (like a div or span) to be reachable by keyboard, change its tabindex to '0' — this inserts it into the tab order at its natural position in the HTML source.
- If an element should only receive focus via JavaScript (e.g., a modal dialog backdrop or a tooltip trigger), set tabindex='-1' so it is focusable programmatically but not in the Tab-key flow.
- Reorder your HTML source so that the visual reading order matches the DOM (source) order — this eliminates the need for positive tabindex values altogether.
- Verify the fix by tabbing through the page with only the keyboard and confirming the focus order follows a logical, top-to-bottom, left-to-right visual sequence with no unexpected jumps.
Fix it on your platform
Pick your platform for the exact steps.
How to fix tabindex on Shopify
- In your Shopify admin, go to Online Store → Themes → click the three-dot menu next to your active theme → Edit code.
- Use the search icon (🔍) at the top of the file list to search across all theme files for 'tabindex'.
- For each result, open the file (common locations: layout/theme.liquid, sections/.liquid, snippets/.liquid) and locate the tabindex attribute.
- Change any tabindex value greater than 0 to '0' (or remove the attribute if the element is a native interactive element like a button or a link).
- Click Save on each file you modify.
- If you use a third-party theme, check the theme's support documentation or contact the theme developer, as some themes have accessibility options in the Theme Settings (Online Store → Themes → Customize → Theme settings).
How to fix tabindex on WooCommerce
- In your WordPress admin, go to Appearance → Theme File Editor (or use a child theme and edit files via FTP/SFTP).
- Search for 'tabindex' across your theme and child theme files — focus on header.php, footer.php, page.php, and any custom template parts.
- Also search active plugins: go to Plugins → Plugin File Editor and check any plugin that adds custom UI components.
- Change any tabindex value greater than 0 to '0', or remove the attribute from native interactive elements.
- Alternatively, install the 'Accessibility Checker' plugin (by Equalize Digital) to scan for this issue automatically and pinpoint the exact files and line numbers.
- Save changes and clear any caching plugin (e.g., WP Rocket, W3 Total Cache) under Settings → [your cache plugin] → Clear Cache.
How to fix tabindex on BigCommerce
- In your BigCommerce control panel, go to Storefront → Themes → click Customize next to your active theme, then open the theme's Edit Theme Files option (available in the Advanced section of the Customize panel, or via the Stencil CLI for developer access).
- Search your template files (templates/layout/, templates/components/, templates/pages/) for 'tabindex'.
- Edit the relevant .html template files and change any tabindex value greater than 0 to '0', or remove it from standard interactive elements.
- If using the Cornerstone theme or a derivative, also check assets/js/ for any JavaScript that dynamically sets tabindex via setAttribute.
- Push your changes via the Stencil CLI ('stencil push') or save directly in the control panel file editor.
- Clear the CDN cache under Server Settings → Cache Settings if available.
How to fix tabindex on Wix
- Open your site in the Wix Editor.
- Click on any element you suspect has a custom tab order set — in the Wix Editor, right-click the element and look for 'Accessibility Settings' or 'Settings'.
- In the element's settings panel, look for a 'Tab Order' or 'Keyboard Focus' field and ensure it is not set to a custom positive number.
- For Wix Studio or sites using Velo (Wix's developer platform): open the Velo Dev Mode panel, search your page code and site code files for 'tabIndex' (capital I), and change any value above 0 to 0 or -1 as appropriate.
- Wix does not expose direct HTML editing for most elements, so if a widget or App Market component is the source, contact the app developer or replace the component.
- Publish your site and verify keyboard tab order by testing with the Tab key in a browser.
How to fix tabindex on Squarespace
- In your Squarespace admin, go to Website → Pages, then open the page in the editor.
- Squarespace does not allow direct HTML editing of most elements; however, you can inject custom HTML/CSS via Settings → Advanced → Code Injection (site-wide) or via a Code Block on a specific page.
- If you added a Code Block or Embed Block containing elements with positive tabindex values, click the block to edit it, find the tabindex attribute in your HTML, and change the value to '0' or remove it.
- If the issue comes from Squarespace's own theme components (not custom code you added), report it to Squarespace Support — you cannot directly edit their native template HTML.
- For developer-mode templates (legacy Squarespace 7.0 with Developer Mode enabled), edit the template files via SFTP and search for 'tabindex' in .html and .block files.
- After changes, reload your live site and test tab order with the keyboard.
How to fix tabindex on Webflow
- Open your project in the Webflow Designer.
- Select the element flagged with a positive tabindex — check its settings in the right-hand panel under the Element Settings tab (the gear icon).
- Look for the 'Tab Index' field in the element settings panel and change the value to '0' (to include in natural tab order) or leave blank/remove to use the default.
- For elements you cannot configure via the Designer panel, switch to the project's Custom Code section: go to Project Settings → Custom Code and check the Head and Body code injection areas for hardcoded tabindex attributes.
- Also check any Embed components on the canvas that contain raw HTML with tabindex set — click the Embed element and edit the HTML directly in the embed editor.
- Publish the site and verify the tab order by pressing Tab through the page in a browser.
How to fix tabindex on Adobe Commerce (Magento)
- On your server, navigate to your active theme directory: app/design/frontend/[Vendor]/[Theme]/.
- Use a file search tool (e.g., 'grep -r "tabindex" app/design/frontend/ --include=".phtml" --include=".html" --include="*.xml"') to find all occurrences of tabindex in template files.
- Edit the relevant .phtml or .html template files and change any tabindex value greater than 0 to '0', or remove the attribute from native form elements and links.
- Also check JavaScript files under web/js/ in your theme for any dynamic setAttribute('tabindex', N) calls where N is greater than 0.
- After editing, run 'bin/magento setup:static-content:deploy' and 'bin/magento cache:clean' to apply changes.
- If using Page Builder or a third-party extension as the source, check the extension's admin configuration or contact the vendor.
How to fix tabindex on WordPress.org
- Access your theme files via Appearance → Theme File Editor in the WordPress admin, or connect via FTP/SFTP to wp-content/themes/[your-theme]/.
- Search all PHP, HTML, and JavaScript files for 'tabindex' — pay special attention to header.php, footer.php, functions.php, and any page-builder output.
- Change any tabindex value greater than 0 to '0' or remove the attribute from natively interactive elements.
- If the issue is in a page builder (Elementor, Divi, Beaver Builder), open the affected element's advanced settings in the page builder UI — look for an 'Accessibility' or 'Custom Attributes' panel where tabindex may be set, and correct it there.
- For plugin-generated markup, check the plugin's settings panel or contact the plugin author.
- After saving, purge your cache (if using a caching plugin) and verify by tabbing through the page.
How to fix tabindex on Headless / Custom (I build in code)
- Search your entire codebase for 'tabindex' (HTML attributes) and 'tabIndex' (JSX/React prop) using your IDE's global search or a command like 'grep -r "tabindex" src/'.
- Review every occurrence: remove the tabindex attribute entirely from native interactive elements (buttons, links, inputs), set non-native focusable elements to tabindex='0', and use tabindex='-1' only for elements that receive programmatic focus via JavaScript.
- Refactor your component or page source order so the DOM order matches the intended visual/reading order — this eliminates the need for positive tabindex values.
- Run an automated accessibility audit (e.g., axe DevTools browser extension or 'axe-core' in your CI pipeline) to confirm no elements with tabindex > 0 remain.
- Manually test keyboard navigation by tabbing through every interactive element on each page type and confirming the order is logical.
How to fix tabindex on Wix Studio
- Open Wix Studio editor and navigate to the page or component with the issue.
- If the element is inside a Custom Element or HTML Component, click it → 'Edit Code' and remove positive tabindex attributes from the markup.
- For Velo/Studio code panels, search your page and masterpage code for 'tabindex' and remove any value above 0.
- If using a Studio block, select the block → 'Edit Block' → inspect the inner HTML widgets for embedded tabindex values.
- Publish and verify with keyboard-only navigation.
How to fix tabindex on Magento Open Source
- Follow the same template-override approach as Adobe Commerce: locate the .phtml or UI-component .html file, create an override in app/design/frontend/<Vendor>/<theme>/, and correct all positive tabindex values.
- Flush the Magento cache and redeploy static content after saving changes.
- Verify with keyboard-only navigation through the storefront.
How to fix tabindex on PrestaShop
- Connect via FTP/SFTP or use the Admin File Manager. Navigate to themes/<your-theme>/templates/ and search all .tpl (Smarty) files for 'tabindex'.
- Edit the offending .tpl file and remove or set the tabindex to 0. Always work in a child theme or custom theme to avoid losing changes on updates.
- Also check any installed modules (modules/<module-name>/views/templates/) for positive tabindex values and override them via the theme's module template override folder.
- Clear the PrestaShop cache: Admin → Advanced Parameters → Performance → 'Clear cache'. Verify with keyboard navigation.
Does your site have this issue?
Run a free SEOLZ scan to find tabindex — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Tabindex?
The `tabindex` attribute controls the order in which keyboard users move through interactive elements on a page using the Tab key. A value of `tabindex="0"` means an element joins the natural tab order based on where it appears in the HTML. A value of `tabindex="-1"` removes the element from the tab order but still allows it to receive focus via JavaScript. A positive value — like `tabindex="1"`, `tabindex="5"`, or any number above zero — forces a custom tab order that almost always creates a confusing, broken experience for keyboard and screen-reader users. This accessibility rule flags any element with a tabindex value greater than 0.
Why does tabindex matter?
Positive tabindex values hijack the natural reading and navigation order, causing keyboard-only users and screen-reader users to jump around the page unpredictably — often skipping important links, buttons, or form fields entirely, or hitting them in an illogical sequence. This directly violates WCAG 2.1 Success Criterion 2.4.3 (Focus Order) and can expose your store to legal accessibility complaints or lawsuits, which are increasingly common in e-commerce. Beyond legal risk, a broken keyboard experience means customers who rely on keyboard navigation (including many users with motor disabilities) may be unable to complete checkout, contact forms, or product searches — directly costing you conversions and revenue. Fixing this is also a signal of overall code quality that can indirectly support SEO through improved Core Web Vitals and reduced bounce rates from frustrated users.
How do I fix tabindex?
Remove or replace all positive tabindex values (tabindex="1" or higher) on your page elements, using tabindex="0" for focusable elements and tabindex="-1" only when programmatic focus is needed.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- ARIA basics — MDN