Focus order and the ADA

An order that keeps the meaning

Success Criterion 2.4.3 applies when a page can be navigated in sequence and that sequence affects meaning or operation. Focusable components must receive focus in an order that preserves meaning and operability.

The order does not have to match the visual layout exactly, and it can differ from the reading order as long as the page stays understandable and operable. What it must not do is jump somewhere that breaks the relationships on the page, such as moving from a field to the "Submit" button before the remaining fields, or landing inside content that is not visible.

Arrow-key movement inside a composite widget such as a tree or tab list is not sequential navigation under this criterion.

Where order goes wrong on public sites

• Error summaries inserted at the end of the page, away from the form.
• Off-canvas menus and drawers that stay in the tab order while closed.
• Multi-step applications that replace content and leave focus on nothing.
• Pop-up content added to the end of the document, far from the control that opened it.

School district enrollment and permit applications have many steps, which makes these problems frequent and costly: someone can fill in half a form while focus sits on the wrong part of the page.

Put the error summary where focus can find it

After a failed submit, the summary of problems should come before the form and receive focus.

form.addEventListener("submit", e => {
  const errors = validate();
  if (errors.length) {
    e.preventDefault();
    document.body.append(buildSummary(errors));   // far below the form
  }
});

form.addEventListener("submit", e => {
  const errors = validate();
  if (errors.length) {
    e.preventDefault();
    const summary = buildSummary(errors);
    summary.tabIndex = -1;
    form.before(summary);
    summary.focus();
  }
});

Closed drawers must leave the tab order

Moving a drawer off screen with a transform does not remove it from keyboard navigation. Focus can land on invisible links.

.drawer { transform: translateX(-100%); }
.drawer.open { transform: none; }

.drawer { transform: translateX(-100%); visibility: hidden; }
.drawer.open { transform: none; visibility: visible; }
/* or: <aside class="drawer" inert> while closed */

Multi-step forms: move focus with the content

When a step is replaced, focus should go to the new step's heading, so the next Tab reaches its first field.

nextBtn.addEventListener("click", () => {
  stepContainer.innerHTML = renderStep(2);   // focus is lost
});

nextBtn.addEventListener("click", () => {
  stepContainer.innerHTML = renderStep(2);
  const h = stepContainer.querySelector("h2");
  h.tabIndex = -1;
  h.focus();
});

Traversal order in mobile apps

Screen readers and switch access follow the semantic order, which can diverge from the visual layout. The Compose properties used below need Compose UI 1.5 or later and may require an experimental opt-in. SwiftUI:

ZStack {
    PayButton()
    AmountDue(amount)
}

ZStack {
    PayButton().accessibilitySortPriority(1)
    AmountDue(amount).accessibilitySortPriority(2)
}
.accessibilityElement(children: .contain)

Jetpack Compose:

Box {
    PayButton(onPay, Modifier.align(Alignment.BottomEnd))
    AmountDue(amount)
}

Box(Modifier.semantics { isTraversalGroup = true }) {
    AmountDue(amount, Modifier.semantics { traversalIndex = 0f })
    PayButton(
        onPay,
        Modifier.align(Alignment.BottomEnd)
            .semantics { traversalIndex = 1f }
    )
}

A test routine

1. Press Tab through each template from the top. Does focus move in the order you would read and complete the page?
2. Open every menu, dialog and drawer. Does focus move into it when it opens (and, as good practice, back to the trigger when it closes)?
3. Submit a form with errors, and change steps. Where does focus land?
4. Make sure focus never lands on something that is hidden or off screen.

Common mistakes are positive tabindex values that reorder the page, and CSS that reorders elements visually while the source order stays different. Tools can flag positive tabindex, but they cannot judge whether the order is meaningful.

Ship it when

• Tab order keeps the page's meaning and operability on every template.
• New content appears next to the control that caused it, or receives focus.
• Closed or hidden content is not focusable.
• Step changes and error summaries receive focus.

For mobile screens, review the order with a screen reader on, not just by looking. See mobile apps for how the Title II rule applies.

Sources

• Understanding SC 2.4.3: Focus Order (W3C), opens in a new tab
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), opens in a new tab

Standard version: WCAG 2.1 (W3C Recommendation, 5 June 2018), as named in the Title II web rule. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official ADA statute and regulations, and ask a lawyer how they apply to you.