HTML tabindex: keep focus order aligned with reading order

Implementation choice

An inspection page includes a short in-page link to its findings. The link and form controls already receive keyboard focus in document order. The findings heading can use tabindex=-1 as a programmatic focus target after a navigation action, without becoming another routine Tab stop. Positive tabindex values would pull controls ahead of nearby text and make the page hard to understand. Arrange the DOM in a useful order before considering any focus override.

<main>
  <h1>Inspection I-47</h1>
  <p><a href="#findings">Skip to findings</a></p>
  <section aria-labelledby="findings">
    <h2 id="findings" tabindex="-1">Findings</h2>
    <p>The seal code matches the intake record.</p>
    <a href="/inspections/I-47/evidence">Open evidence list</a>
  </section>
</main>

What remains outside the markup

The fragment target already supports navigation. Tabindex=-1 makes a heading focusable by script without adding it to ordinary sequential focus; browser fragment behavior may vary and should be tested on the target devices.

Cost and limits

The attribute costs no network bytes worth measuring. The expensive failure is a positive-tabindex sequence that must be maintained every time controls are added, removed, or rearranged.

Common Mistakes

• Do not assign positive tabindex to repair a poor DOM order.
• Do not make every heading a Tab stop.
• Do not assume visual order matches keyboard order after CSS rearrangement.

Connected lessons

• HTML focus order: use native controls and keep DOM order usable
• HTML skip link: reach main content before repeated navigation
• HTML anchors: use href for navigation and stable fragment targets