Ensure a Logical Keyboard Focus Order

Disabilities Affected: Mobility, Visual

Success Criterion: 2.4.3

Level: A

When navigating a page using the keyboard (e.g., with the Tab key), interactive elements must receive focus in a logical order that preserves meaning and usability. Typically, this means following the visual reading order (left-to-right, top-to-bottom in English).

Why It Matters

Keyboard users navigate sequentially through interactive elements. If the focus jumps around unpredictably (e.g., from the header to the footer, then back to the main content), it becomes confusing and difficult to operate the page. A logical focus order ensures a predictable and understandable navigation experience.

Fixing the Issue

Structure your HTML document so that the source order of interactive elements naturally corresponds to the desired visual and logical flow. Avoid using tabindex with positive values (e.g., tabindex=”1″, tabindex=”2″), as this overrides the natural document order and is difficult to manage. Use CSS for visual positioning rather than manipulating the DOM order purely for layout purposes. If you must manage focus programmatically (e.g., in modals or complex widgets), ensure the order remains logical and traps are avoided (see Keyboard Accessibility).

Good Code Example

The natural source order usually creates a logical focus order:

Markup

<header>
  <nav>
    <a href="/home">Home</a>
    <a href="/about" id="link1">About</a>
  </nav>
<main>
  <form>
    <label for="search">Search:</label>
    <input type="search" id="search" name="q"> <button type="submit">Go</button>
  </form>
</main><footer>
  <a href="/contact" id="link2">Contact</a>
</footer></header>

Bad Code Example

Using positive tabindex disrupts the natural, logical flow:

Markup

<header>
  <nav>
    <a href="/home">Home</a>
    <a href="/about" id="link1" tabindex="1">About</a>
  </nav>
<main>
  <form>
    <label for="search">Search:</label>
    <input type="search" id="search" name="q" tabindex="3"> <button type="submit">Go</button>
  </form>
</main><footer>
  <a href="/contact" id="link2" tabindex="2">Contact</a>
</footer></header>

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A practical guide for healthcare leaders navigating WCAG compliance.

Learn More

Need help with digital accessibility?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult