Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

HTML focus order: use native controls and keep DOM order usable

Last updated: 5 Oct 20266 min read
tutorial
IntermediateBy AITrove Editorial

Native links, buttons, and form fields participate in keyboard navigation according to their built-in behavior.

Use it for a real task

A receipt action bar follows the document's reading order: first the record link, then the review button. CSS can arrange them visually, but it should not create a contradictory path for keyboard users. The button has an explicit type so moving it into a form later will not turn it into an accidental submitter.

html
<section aria-label="Receipt actions">
  <a href="/receipts/R-47">Read receipt R-47</a>
  <button type="button">Open review panel</button>
</section>

What the markup guarantees

The panel action requires an implementation if the button is used in a real application; markup alone does not open it. The example shows the correct control shape, not a functioning panel. Preserve a visible focus indicator in CSS.

Cost and limits

Native controls avoid a custom keyboard event layer. Positive tabindex values often create maintenance trouble when new controls are inserted, so follow DOM order instead.

Common Mistakes

  • Do not replace a button with a clickable div.
  • Do not remove focus outlines without a visible replacement.
  • Visual reordering cannot repair a confusing DOM sequence.

Connected lessons

Related: HTML landmarks: give navigation, main content, and page edges clear owners.

Related: HTML labels: bind each control to a durable accessible name.

Related: HTML hidden and inert: remove inactive content from interaction deliberately.

Related: HTML details and dialog: distinguish disclosure from a modal task.

Related: HTML lang, dir, and bdi: keep text pronunciation and direction stable.

Related: HTML link versus button: navigation and actions have different contracts.

Related: HTML required versus aria-required: semantics do not replace validation.

Related: HTML hidden versus aria-hidden: rendering and accessibility are different scopes.

Related: HTML tabindex: keep focus order aligned with reading order.

Continue with HTML manual popover: keep a nonmodal panel open until a deliberate close.

Continue with HTML dialog commands: open and request close with named buttons.

html
accessibility
Storage details