How to fix: Avoid positive tabindex values
A tabindex greater than zero forces an unnatural focus order that confuses keyboard users. Keep the DOM order meaningful and use 0 or -1 only.
The fix
Avoid tabindex values greater than 0; rely on the natural DOM order for focus.
Who this affects
Elements with a positive tabindex are visited before every element with tabindex="0" or a natural tab stop, in ascending numeric order, wherever they sit in the document. A keyboard user filling in a form is thrown from a field near the bottom back to one at the top, and a screen-reader user loses the match between reading order and focus order, so the label they last heard belongs to a different control. A single tabindex="3" is enough to pull that one element to the front of the tab sequence, ahead of every other control on the page, while everything else keeps its document order.
Before and after
<button tabindex="3">Buy</button><button>Buy</button> <!-- natural DOM order -->Where this usually comes from
- Someone forced a newly added field or a modal to the front of the tab order with tabindex="1" instead of moving it in the DOM.
- Older form templates and form builders that number every input in sequence, carried over from print-style forms.
- A copied component or a jQuery plugin that ships positive tabindex values in its own markup.
- The visual order was changed with CSS flex or grid order, and tabindex was added to make focus follow the new layout.
- Output from a visual site builder that numbers elements by their position on the canvas.
Checking it yourself
In Firefox devtools open the Accessibility panel and tick Show Tabbing Order; numbered badges appear over every tab stop, and a positive tabindex shows up as a low number in the wrong part of the page. Otherwise click the address bar, press Tab through the page and watch the focus ring, since an early jump into the middle of the content is the symptom. [...document.querySelectorAll('[tabindex]')].filter(e => e.tabIndex > 0) in the console lists the elements responsible.
A scanner finds this one automatically. What it cannot judge, and how the score is built, is on how we test.
Related fixes
Check your site for this issue
Scan any page free against WCAG 2.2 AA and get every automatically detected issue with its fix.