Avoid using a positive tabindex on a form field

A common pattern is to give the first input field in a form a tabindex="1". Easy for sighted mouse users, they can start filling out the form right away.

But the main disadvantage for keyboard users is, that a positive tabindex hijacks the natural tab order of a page. Maybe they don’t want to fill out the form, but access the top menu. Don’t make decisions for your user.

Avoid using a positive tabindex in your forms, and leave the natural tab order of a web page intact. Learn more about keyboard focus in the section about Focus handling.

Examples

Don’t: add a positive tabindex to a form field.

<!-- do not copy, this is not keyboard user-friendly -->
<label for="first-name">First name</label>
<input id="first-name" tabindex="1" autocomplete="given-name">

Do: leave to natural tab order of a web page intact.

<label for="first-name">First name</label>
<input id="first-name" autocomplete="given-name">

Resources

WCAG Success Criteria for focus order

Accessible focus management in web forms is necessary to meet the WCAG success criterion: 2.4.3 Focus Order (Level A).