Tab order needs to follow the source order

• Rule: axe/tabindex
• Checks: Elements should not have tabindex greater than zero
• WCAG: none; a best practice, not a WCAG success criterion
• Fix class: mechanical: A fix needs no authored text or visual decision.

Who it affects

• People who use a keyboard or a switch device instead of a mouse.
• People who use a screen reader or a braille display, most of them blind.

How to fix it

An element has a tabindex of 1 or more to make it come first

Remove the positive tabindex from links, buttons and form fields, and change it to 0 on a custom control. Then move the element in the markup to where it belongs in the reading order, since a positive value sends it ahead of every other element.

<form role="search">
  <label for="site-search">Search</label>
  <input type="search" id="site-search" name="q">
  <button type="submit">Search</button>
</form>

Several elements use positive values to set a custom order

Treat each the same way, removing the value or using 0 on custom controls, and order the markup so the visual and reading orders match. Where CSS reorders the layout, with order, flex-direction: row-reverse or grid placement, change the markup order instead.

An element that is not a control needs focus

Use tabindex="0" to add it to the tab order where it sits in the markup, or tabindex="-1" to focus it only from script.

Fixes that fail

Swapping every positive value for tabindex="0"

The order is fixed, but links and buttons gain a redundant attribute and non-interactive elements keep a needless tab stop. Remove the attribute unless a custom control needs it.

More on the rule

axe-core’s documentation of the rule

CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.