• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Equalize Digital

Equalize Digital

Website Accessibility Consulting, Training, and Development

  • My Account
  • Checkout
  • Services
    • Bespoke Websites
    • Accessibility Audits
    • User Testing
    • Accessibility Remediation
    • Accessibility Monitoring
    • Web Accessibility Training
    • Accessibility for Agencies
  • Accessibility Checker
    • Overview
    • Features
    • Pricing
    • Documentation
    • Support
    • Priority Support Packages
    • Buy Now
  • Company
    • About Us
    • Certified B Corporation
    • Industry Expertise
    • Blog
    • WordPress Accessibility Meetup
    • Accessibility Statement
    • Contact
    • Become An Affiliate
  • Events
  • How can we help?
  • My Account
  • Checkout
Home / Accessibility Checker / Tab Order Modified

Tab Order Modified

Notice Type: Warning
Relevant WCAG Conformance Levels: A

Did a “Tab Order Modified” warning appear in an Accessibility Checker audit of one of your WordPress posts or pages? Read on below for an explanation of this warning, how it impacts your website’s accessibility, and how to fix it.

Table of Contents

  • About the Tab Order Modified Warning
    • What is tab order on a website?
    • What does the Tab Order Modified warning mean?
    • How does Accessibility Checker test for modified tab order?
  • Impact on Accessibility
    • Why should I avoid modifying the tab order?
    • Relevant WCAG 2.1 Success Criteria
      • 1.3.2 Meaningful Sequence – Level A
  • How to Resolve a Tab Order Modified Warning
    • What to do (in short)
    • How to find elements with modified tab order on your WordPress website
    • Example of correctly modified tab order
    • Example of incorrectly modified tab order
    • What if you have elements with incorrectly modified tab order that you cannot fix?

About the Tab Order Modified Warning

What is tab order on a website?

People who are unable to use a mouse navigate the web using their keyboard only. This includes blind and visually impaired users who use a screen reader to read the content on the page and sighted users with mobility issues who cannot physically move or control a mouse.

Tab order is the way that elements on the page are organized so that they can be moved through using the “tab” key on the keyboard. While navigating a website with the keyboard, the tab key shifts focus from one actionable element (like links, buttons, and form fields) on the page to another. Users should be able to tab through interactive items in a logical order, usually from left to right and top to bottom.

What does the Tab Order Modified warning mean?

This warning shows up in Accessibility Checker when the logical tab order on the page has been changed, which can cause navigation issues for keyboard-only users.

Tab order is changed by adding an attribute for tabindex that is greater than 0 to an HTML element. Because all elements, by default have a tab index of 0 if you make the tab index 1 or more (like this: tabindex="1"), it will force the focus to jump first to that element rather than the first element on the page.

How does Accessibility Checker test for modified tab order?

While auditing your page or post content, Accessibility Checker will look for the following HTML elements: a, input, select, textarea, button, datalist, output, and area. Then, for each of these elements, Accessibility Checker looks to see if a tabindex greater than 0 has been set. If the element has a tab index greater than 0, a Tab Order Modified error will be flagged.

Impact on Accessibility

Why should I avoid modifying the tab order?

Tab order is set to ensure that people who are using a keyboard to navigate a web page will receive the information in the order that it is naturally laid out on the page. The default tab order typically allows keyboard users to focus on elements in the same order that a sighted person might see them. This default order ensures that users navigating by keyboard will be moved sequentially through the content on the post or page from top to bottom and from left to right.

If the tab order is modified on a web page, keyboard users may receive information out of order or even miss key sections. This can be confusing for blind and visually imparied users.

Relevant WCAG 2.1 Success Criteria

1.3.2 Meaningful Sequence – Level A

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

2.4.3 Focus Order – Level A

If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

How to Resolve a Tab Order Modified Warning

What to do (in short)

To resolve a Tab Order Modified Warning you need to view the front end of your website on the page or post where the tab order has been modified and test to see if the modification is correct or not.

If the tab order modification does not cause problems, then you can safely ignore the warning in Accessibility Checker. If the modified tab order causes information to be presented out of order, then you need to remove the tab order attribute from the flagged element on your page or post to ensure that it is presented in the correct order.

How to find elements with modified tab order on your WordPress website

First, install the free Accessibility Checker WordPress plugin.

For any pages or posts that have a Tab Order Modified warning in the WordPress editor, you can open the details tab in the Accessibility Checker meta box, then expand the Tab Order Modified warning to see a list of code that caused the error to be flagged.

Example of correctly modified tab order

example tab order modified warning in WordPress Accessibility Checker - code shown below

The screenshot above shows an example of an element that has flagged a Tab Order Modified warning. The code in this example looks like this:

<a id="pojo-a11y-skip-content" class="pojo-skip-content" tabindex="1" accesskey="s" href="#content">Skip to content</a>

In this example, the element that has a modified tab order is a “Skip to content” link that becomes visible when a keyboard user hits the tab key. This link allows users to bypass the navigation menus and get to the content more quickly. This skip to content link is being added by a plugin rather than the theme so it has added a tab index to ensure that the skip link is the first thing the user sees when they hit the tab key. It is generally considered best practice for skip links to be the first things visible on the page, so if this were your website, you would ignore this warning.

Example of incorrectly modified tab order

Elements that frequently modify tab order incorrectly are web forms. It’s not uncommon to see that someone has added a tab index to a form when they shouldn’t have. Here is an example of a tab index added to a Gravity Form:

<div id="gf_1" class="gform_anchor" tabindex="1"></div>

Sometimes people intentionally add a tab index to a form because they’re trying to draw attention to it quickly. Other times they add the tab index accidentally because there is an option to set a tab index in the form block or widget settings and they don’t fully understand what it means. Regardless of why the tab index was added, in this instance, it is not correct to shift the users focus there the first time they hit the tab key, so if this were your website, you would want to find the form where it was inserted and change the tab index setting to 0.

What if you have elements with incorrectly modified tab order that you cannot fix?

Depending upon how you’re adding content to your WordPress website, it is likely that you may encounter an HTML element with a tab index greater than 0 that you cannot change. This may happen if the element is being inserted into your post or page by a third-party plugin.

If you encounter accessibility errors that are caused by a third-party plugin you cannot control, please reference “What to do if a Plugin You’re Using has Accessibility Errors” for ideas on how to proceed. If the element with the modified tab order is in your theme see our article “What to do if there are Accessibility Errors in Your Theme.”

Primary Sidebar

Frequently Asked Questions

  • How to Install & Activate Accessibility Checker
  • Getting Started Quick Guide
  • Why Do We Say 100% Passed Tests, Not 100% Accessible?
  • How to Manually Check Your Website for Accessibility
  • When and How to Ignore Accessibility Errors or Warnings
  • What to do if There are Accessibility Errors in Your Theme
  • What to do if a Plugin You’re Using has Accessibility Errors
  • How to Get Support for Accessibility Checker
  • Can I Hire Equalize Digital to Fix Accessibility Issues on My Website?
  • Additional Resources for Learning About Accessibility
  • How to Test Accessibility Checker for Conflicts with Themes or Plugins
  • What Does “Unlimited Dev Sites” mean?
  • Is there an Accessibility Conformance Report (ACR) or VPAT available for Accessibility Checker?

Rule Documentation

  • A Slider is Present
  • A Video is Present
  • Ambiguous Anchor Text
  • ARIA Hidden
  • Blinking or Scrolling Content
  • Broken ARIA Reference
  • Broken Skip or Anchor Link
  • Duplicate Alternative Text
  • Duplicate Form Label
  • Empty Button
  • Empty Heading Tag
  • Empty Link
  • Empty or Missing Form Label
  • Empty or Missing Table Header
  • iFrame Missing Title
  • Image Animated GIF
  • Image Empty Alternative Text
  • Image Long Alternative Text
  • Image Map Missing Alternative Text
  • Image Missing Alternative Text
  • Improper Use of Link
  • Incorrect Heading Order
  • Insufficient Color Contrast
  • Link Opens New Window or Tab
  • Link to MS Office File
  • Link to Non-HTML File
  • Link to PDF
  • Linked Image Missing or Empty Alternative Text
  • Long Description Invalid
  • Low-quality Alternative Text
  • Missing Language Declaration
  • Missing Subheadings
  • Missing Title
  • Missing Transcript
  • Possible Heading
  • Readability & Simplified Summary
  • Tab Order Modified
  • Text Justified
  • Text Too Small
  • Underlined Text

Free Accessibility Help

Join our WordPress Accessibility Facebook group to connect with a community of web professionals and website owners using WordPress to build a more accessible web. Get answers to accessibility questions and join virtual WP accessibility meetups.

Join the Community

Footer

Equalize Digital Websites for Everyone

Your WordPress accessibility team. Accessibility plugins, rapid audits, and consulting to help you make your website usable by people of all abilities.

  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Company

  • About Equalize Digital
  • WordPress Accessibility Meetup
  • Certified B Corporation
  • Accessibility Statement
  • Blog
  • Events
  • Contact Us

Services

  • Website Development
  • Accessibility Audits
  • User Testing
  • Remediation
  • Ongoing Monitoring
  • Accessibility Training
  • For Agencies

Accessibility Checker

  • Features
  • Pricing
  • Documentation
  • How to Get Support
  • My Account
  • Affiliate Dashboard
  • Become an Affiliate

© 2023 Equalize Digital · Privacy Policy · Terms of Service · Plugin Terms & Refund Policy

WordPress VIP Silver Agency Partnercertified B corporation logo International Association of Accessibility Professionals member