typestar

Focus order and tabindex in HTML

There are three values of tabindex and only two of them are a good idea.

<!-- Focusable by script, so a dialog can move focus here -->
<h2 id="dialog-title" tabindex="-1">Delete this branch?</h2>

<!-- A scrollable region should be reachable by keyboard -->
<div class="log" tabindex="0" role="region" aria-label="Build log">
  <pre>compiling typestar v0.4.1</pre>
</div>

<!-- Do not do this: it runs before every other control on the page -->
<input type="text" tabindex="3" name="never">

How it works

  1. tabindex="0" puts a non-interactive element in the natural order.
  2. tabindex="-1" makes it focusable by script only, for moving focus to.
  3. A positive tabindex jumps the queue and breaks the order for everyone.

The run, in numbers

Lines
10
Characters to type
415
Tokens
56
Three-star pace
75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 45 seconds.

Type this snippet

Step 1 of 4 in Focus and visibility, step 9 of 15 in Accessible HTML.

← Previous Next →