Accessible Focus Time ms

Accessible focus appearance time (ms)

People who navigate with the Tab key need every focusable element to flash a visible focus indicator immediately. In practice that means an accessible focus delay of basically nothing: focus_delay = 0 ms for the visual change. If you do animate the indicator, keep the transition under about 200 ms so it does not trail behind the user's next keystroke. WCAG 2.1 2.4.7 Focus Visible (Level AA) spells this out: any keyboard-operable interface has to offer a mode where the focus indicator is visible.

A few patterns show up again and again. The skip-link ("Skip to main content") should surface on the very first Tab press. Your tab order ought to track the visual reading order. And the aria-current="page" attribute marks the active item in navigation. One thing to never do is write outline: none without putting an indicator back; that is among the most common WCAG failures auditors find. A solid baseline to fall back on is outline: 2px solid currentColor; outline-offset: 2px;.

Applications

Reach for this calculator when you are budgeting interaction latency: forms, single-page apps with virtualized lists, modal dialogs where focus must land inside the dialog within one frame, and custom widgets like comboboxes or tree views. Take the per-element delay, multiply by how many elements the user has to step through to reach the target, and check the total. If it runs past a few hundred milliseconds, rework the order or drop in a skip link.

FAQ

Can I animate the focus ring? Sure, as long as the transition stays under 200 ms and you leave the element where it is. Stick to animating color, opacity or box-shadow.

What about :focus-visible vs :focus? Go with :focus-visible so the ring shows up for keyboard focus but stays hidden after a mouse click. Keyboard users keep their cue and mouse users are left alone.

How do I test focus order? Start at the top of the page and tap Tab over and over, checking where focus lands each time. axe DevTools and Lighthouse will also flag missing or invisible focus states for you.