Do you think you may need to use our automated fix to remove tab indexes from focusable elements on your WordPress site? This article explains how to easily remove tabindex to correct tab order accessibility issues in WordPress – no coding required!
How to Fix Tab Order Modified Accessibility Errors in WordPress
If your website’s tab order is messed up and no longer going from left to right and top to bottom, this may be because the tab order has been modified by adding tabindex attributes to focusable elements on your site. This can be easily fixed without writing code using the WordPress Accessibility Checker plugin.
Step 1
Click into the Accessibility Checker plugin settings in your WordPress dashboard (you must be logged in with an administrator account to access these settings).
Step 2
Go to the “Fixes” tab in the Settings Tabs navigation.
Step 3
Check the box for Remove Tab Index, then scroll to the bottom of the page and click the “Save Changes” button.
Note: Automated accessibility fixes use JavaScript or other methods to modify how your website functions. Occasionally, a WordPress theme or extension may conflict with or prevent our fixes from working as expected. We recommend testing these fixes on a local or staging copy of your website first.
Not seeing the fix?
The Remove Tab Index accessibility fix should start working immediately; however, if you don’t see the fix, it could be because you’re seeing a cached version of your website. Try clearing the cache in any caching plugins and on your hosting account, then look at your site in an incognito window to confirm the fix worked.
Note: Turning on a fix will not instantly remove related issues from Accessibility Checker reports. After turning on a fix, you can clear issues from reports by running a full site scan in Accessibility Checker Pro or by saving any individual post/page to trigger a rescan of that post/page only.
What This Fix Does
When enabled, the Remove Tab Index fix helps improve accessibility by ensuring that focusable elements on a web page (like input fields, links, and buttons) can be navigated through in a logical sequence that matches their presentation on the page.
Focusable elements are parts of a webpage that can be selected or activated using a keyboard, ensuring users can interact with all functions (like following a link, typing in a form field, or pressing a button) without a mouse.
It is generally considered best practice to never set a positive tabindex greater than 0 as doing so interferes with how users naturally move through interactive elements on a web page.
This fix will change any positive tabindex values to 0 using JavaScript. Examples of elements that will be set to tabindex="0" include:
- Links without an
hrefattribute that already have atabindexvalue defined. - Links, buttons or other focusable elements with a positive
tabindex. - Spans, divs, or any other non-natively focusable elements that already have a positive
tabindexdefined.
This fix will not modify any elements that have been removed from the tab order using tabindex="-1".
Impact on Accessibility
Having a positive tabindex value on an HTML element can mess with the natural tab order of the page, making navigation confusing for keyboard users. Instead of following the logical top-bottom, left-right sequence, a user’s focus can jump around unexpectedly, making it hard to predict where the focus will go next.
This inconsistency can be particularly challenging for those who rely on keyboard navigation as their sole means of navigating a web page. It can also be quite jarring for screen reader users, who may have the page’s content read to them out of order and not in a meaningful sequence as their focus jumps around.
This fix helps restore a meaningful sequence to your WordPress website.
Associated Checks
The following checks in Accessibility Checker are associated with this fix:
