CODEWITHSUNDEEP
validationuser-interfaceaccessibilitytab-orderingwcag2.0
Kirkland
Kirkland

Reputation: 2533

Whats the proper tab order for invalid inputs?

For accessibility reasons, the first invalid input in a form ought to be focused upon form submission. This prevents the non-sighted user from being forced to hunt for the invalid inputs.

My question pertains to tab order. After the first invalid input is focused, when the user clicks tab again, should the focus go to the next invalid input or just the next element in the normal tab order?

Take this pseudo code for example. If input numbers 2 and 4 have errors, when the form is submitted then focus will be moved to input number 2. The next time the user presses the tab key does the focus go to input 3 or 4?

<input id="1">
<input id="2"> <-- invalid
<input id="3">
<input id="4"> <-- invalid
<input id="5">
<button type="submit">

Upvotes: 1

Views: 189

Answers (2)

user810937
user810937

Reputation: 54

Focus the next element in the normal tab order. Tab order should remain 1-2-3-4-5.

Upvotes: 1

Adam
Adam

Reputation: 18875

The technique you use is quite different from the one proposed by the W3C (G139: Creating a mechanism that allows users to jump to errors)

When users enter data input that is checked, and input errors are detected, a link to that error is provided so that the user does not have to search for it.

Your approach might be "Re-displaying a form with a summary of errors (future link)"

In your case, you should not modify the tab order and only show the missing fields, but you may provide a button to toggle the view between all fields, or only the missing fields.

The following fields were missing or invalid, please fill them below (or return to the full form)

Upvotes: 1

Related Questions