CodePark/ questions / Keyboard access
START PRACTICINGPRACTICE
Frontend question · Accessibility › Keyboard access

The user clicks the empty page above this form and presses Tab three times. In what order does focus move?

<input placeholder="Name">
<button tabindex="2">Save</button>
<a href="/help" tabindex="1">Help</a>
Help, Save, Name

Elements with a positive tabindex come first, from the smallest number up. So Help (1) comes before Save (2). After them come all elements with tabindex="0" or natural focus, in DOM order. That is the Name input.

"Name, Save, Help" is the tempting wrong answer, because it matches the order on screen. Positive tabindex breaks that match, which is why you should never use it. Use 0 to make something focusable in DOM order, and -1 to focus it only from script.