"Elements should not have tabindex greater than zero" - Nonzero Tabindex Breaks Validation & 508 Compliance

Question

We are running a tool called Axe to check the validity and 508-compliance/accessibility of HTML pages.

This error comes up as a violation:

Elements should not have tabindex greater than zero

The app is structured with top links and a nav bar. If we don't put in a tabindex, the tabbing starts from those elements. The idea is to hit the form inputs directly when coming onto the page. Surely that makes sense and should be allowed (even for disabled users)? Then why is a legitimate use case getting flagged?

<input id="phone" name="phone" tabindex="5" placeholder="" class="input-block-level" type="text" value="222">

Answer 1

Having a tabindex greater than zero is allowed in HTML in spite of what AXE is saying.

However, the way that you're using tabindex is presenting information to sighted users that is essentially being made unavailable to non-sighted users because they can't tab to it.

A better way to approach this would be to use hidden "skip links".

The idea is simple enough: provide a link at the top of the page which jumps the user down to an anchor or target at the beginning of the main content.

https://webaim.org/techniques/skipnav/