Tab through any page and see where focus goes

The checker reports what happens when Tab is pressed. That finds the most common keyboard failures quickly, but it is not a keyboard audit, and a clean result does not mean a page works from the keyboard.

• It cannot judge whether the order is logical. It flags likely problems; reading the numbered screenshot against the layout is your job.
• It does not press Enter, Space or arrow keys. Menus, tabs, sliders, grids and other widgets that use arrow keys inside a single Tab stop are not tested, and neither are custom keyboard shortcuts or whether controls actually work when activated.
• It checks that focus is visible, not that it is clear. Indicator contrast and thickness (2.4.13, AAA) are not measured.
• It sees one state of the page. A first visit, on a 1280 by 800 desktop window, with motion reduced. Mobile layouts, signed-in pages and content that opens only after a click are not covered, and focus inside embedded frames is not followed.

Treat the results as a map of where to look, then confirm with a keyboard yourself. Our keyboard accessibility guide covers manual testing step by step.

Computed styles cannot tell you whether focus is visible: an outline the same colour as the background changes the styles but not the screen, and an indicator drawn on a parent card or a pseudo-element does not show up on the element at all. So the checker looks at pixels. At each stop it captures the element while focused, removes focus, captures again, and restores focus. Chrome keeps the keyboard focus style when focus is restored by script after a key press, so both captures are of the real keyboard state. Transitions and animations are switched off first, so indicators are captured in their final state, and the text cursor is hidden so it cannot pass for an indicator.

When something changed, a third capture checks that the area is not changing on its own, as videos and carousels do. Those stops are marked as unknown rather than passed. To decide whether focus is hidden, the checker asks the browser which element is on top at five points across the focused element, after the browser has scrolled it into view. If something else is on top at every point, focus is entirely hidden.

2.5.8 Target Size (Minimum) asks for pointer targets of at least 24 by 24 CSS pixels. A target can be smaller and still pass in five ways, and the checker handles them as follows.

• Spacing:a 24 pixel circle centred on the small target must not touch any other target, or another small target's circle. Measured.
• Inline: a link inside a sentence of text. Detected from the surrounding text.
• User agent: a native control the browser sizes, such as an unstyled checkbox. Detected by comparing it with the same control on a blank page.
• Equivalent: another control on the page does the same thing and is large enough. Not detected; check failures for this.
• Essential: the size is essential to the information, as with pins on a map. Not detected; check failures for this.

The enhanced AAA criterion, 2.5.5 Target Size (Enhanced), asks for 44 by 44 pixels. The checker reports against the AA minimum only. To measure targets on a phone screen, where they matter most, use the Target Size Checker, which opens on a 390 pixel phone viewport.

• No visible focus: never remove the outline without putting something in its place. A :focus-visible rule shows it to keyboard users without showing it on mouse clicks.
• Hidden behind a sticky header: set scroll-padding-topon the page to the header's height, so the browser scrolls focused elements clear of it. Cookie banners that cover content need the same space at the bottom, or should not cover content at all.
• Positive tabindex: replace it with tabindex="0" and change the source order instead.
• Focus on hidden things: closed menus and off-canvas panels should be hidden or inert, not just moved off-screen. Skip links should appear when focused.
• Traps and dialogs: keep focus in a modal dialog only while it is open, close it with Escape, and send focus back to the control that opened it.
• Small targets: add padding or a min-height and min-width of 24 pixels to icon buttons, or space them apart.

:focus-visible {
  outline: 3px solid #0f766e;
  outline-offset: 2px;
}

html {
  /* Height of the sticky header */
  scroll-padding-top: 5rem;
}

For more depth, see the guides to focus management, skip links, accessible dialogs and accessible menus.