tabindex
tabindex should not be greater than 0
Checks that tabindex values are 0 or negative, not a positive number.
Applies to. Applies to elements with a tabindex attribute whose value parses as a valid integer.
Expectation. The tabindex value is 0 or negative. A positive tabindex reorders keyboard tab order explicitly, which is fragile to maintain as a page changes and usually indicates the natural DOM order should be fixed instead.
What a finding reports.
value: thetabindexvalue, a whole number above 0.
These data.details fields help to read and reproduce a finding. Apart from reasonCode and the few fields Output schema names as stable, they are not a stable contract: a field may be renamed or dropped in a minor release, so don’t build on them.
Examples
<div tabindex="0">Focusable</div>
tabindex="0" places the element in the natural tab order without reordering anything.
<div tabindex="3">Reordered</div>
A positive tabindex pulls this element out of the document's natural tab order and ahead of everything else, which usually surprises keyboard users.
How to check
When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.
TABINDEX_POSITIVE
- Click just before the start of the page, then press Tab repeatedly, watching the focus outline.
- Note when the element the report names gets focus, compared with where it sits on screen.
- Check whether the focus order still follows the visual and reading order of the page.
Pass. Focus moves through the page in an order that matches its layout and meaning.
Fail. The positive tabindex makes focus jump out of reading order, which can fail WCAG 2.4.3 (F44) and is against best practice.