WCAG 2.4.7: Focus Visible

Why a visible focus indicator matters

For anyone who navigates without a mouse — keyboard-only users, people using switch devices or sip-and-puff controls, many people with motor or visual disabilities, and plenty of power users — the focus indicator is the cursor. It is the single piece of feedback that answers "where am I, and what will Enter or Space do right now?" Remove it and the page becomes unusable: pressing Tab moves focus invisibly, and the only way to find a button is to tab blindly and hope.

This is one of the most common and most damaging accessibility failures on the web, and it is almost always self-inflicted: a CSS reset or a designer's dislike of the "ugly" default ring leads someone to write outline: none with nothing to replace it. The fix costs a few lines of CSS, and a strong, on-brand focus style is a usability win for everyone, not just an act of compliance.

What 2.4.7 actually requires

The criterion has a narrow, testable core. Meet these and keyboard navigation stays usable.

The outline: none trap

By far the most common way to fail 2.4.7 is to remove the default focus outline without putting anything back. It breaks in several ways:

• ✗outline: none (or outline: 0) on a focusable element with no replacement deletes the only cue keyboard users have for where they are — an instant, total failure of 2.4.7.
• ✗A blanket reset like *:focus { outline: none } or :focus { outline: 0 } strips focus from every control on the site at once, including ones you never styled.
• ✗Component libraries and CSS resets (older Normalize/reset stylesheets, some UI kits) sometimes ship outline removal by default — check what your dependencies do, not just your own CSS.
• ✗Setting only a faint colour change (for example a 1px border that barely differs from the resting state) is technically present but practically invisible, and reviewers will treat it as a failure.

If you must remove the default ring for design reasons, the rule is simple: always replace it with an equally or more visible indicator — a custom outline, a box-shadow ring, a thicker border, or a clear background change — and scope it to :focus-visible.

:focus vs :focus-visible

The reason developers reach for outline: none is usually that they dislike seeing a focus ring after a mouse click. The modern fix is the :focus-visible pseudo-class, which lets you keep a strong indicator for keyboard users without it appearing on every click.

The practical pattern: keep a sensible :focus fallback for older engines, then layer a strong, on-brand ring on :focus-visible. Never remove the indicator without adding one back.

Code examples

A strong, modern focus style with :focus-visible

The core pattern: a clearly visible ring for keyboard users, kept off the screen during mouse clicks. The outline-offset gives the ring breathing room so it stays visible against the control.

/* A visible, on-brand indicator for keyboard users */
:focus-visible {
  outline: 3px solid #1d4ed8;   /* >= 3:1 against the background */
  outline-offset: 2px;          /* lift it off the control */
  border-radius: 2px;
}

/* Optional: hide the ring for mouse users only,
   while keeping a fallback for browsers without
   :focus-visible support. */
:focus:not(:focus-visible) {
  outline: none;
}

A box-shadow ring that hugs rounded corners

When a control has a border radius, a box-shadow ring follows the curve neatly. Combine it with a transparent outline so the indicator still shows in Windows High Contrast Mode, where box-shadows are dropped.

.button:focus-visible {
  /* Visible ring that follows rounded corners */
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1d4ed8;
  /* Transparent outline = a visible ring in forced-colors mode */
  outline: 3px solid transparent;
  outline-offset: 2px;
}

A global, accessible default with Tailwind CSS

If you use a utility framework, set one consistent keyboard focus ring across the whole app rather than removing focus per component.

<!-- Per element: a visible ring only for keyboard focus -->
<button
  class="rounded-md bg-blue-700 px-4 py-2 text-white
         focus-visible:outline focus-visible:outline-2
         focus-visible:outline-offset-2
         focus-visible:outline-blue-900"
>
  Save changes
</button>

/* Or set a sensible default once, in your base layer */
@layer base {
  :focus-visible {
    outline: 3px solid theme(colors.blue.700);
    outline-offset: 2px;
  }
}

Respecting Windows High Contrast / forced colors

In forced-colors mode the operating system overrides your colours. Use the system Highlight colour so the focus ring honours the user's theme.

@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}

Common mistakes

• ✗Writing outline: none (or a global *:focus { outline: 0 }) with nothing to replace it — the single most common cause of a 2.4.7 failure.
• ✗Styling focus only on links while leaving buttons, inputs, or custom widgets with no visible indicator.
• ✗Removing focus from custom controls (divs with tabindex, ARIA menus, tabs) that the browser would never style by default.
• ✗A focus indicator so faint it is effectively invisible — a 1px colour shift that does not clearly stand out from the resting state.
• ✗A focus ring that is hidden behind a sticky header, toolbar, or cookie banner when the element receives focus (also a 2.4.11 failure).
• ✗Relying on a box-shadow ring only, which disappears in Windows High Contrast Mode because forced colors removes shadows.
• ✗Inheriting outline removal from a CSS reset or component library and never checking what the dependency actually does.
• ✗Showing the keyboard ring on mouse clicks too, then deleting it to 'clean it up' instead of scoping the style to :focus-visible.

How to test for 2.4.7

1. 1

   Tab through the whole page

   Put the mouse away and press Tab from the top of the page to the bottom. At every stop — links, buttons, inputs, custom widgets — you must be able to see clearly which element now has focus. If focus ever vanishes, you have a failure.

2. 2

   Watch for elements that lose the ring

   Pay special attention to custom buttons, icon-only controls, dropdowns, tabs, and anything built with divs and tabindex. These are where developers most often strip or forget the indicator.

3. 3

   Check the indicator against its background

   Make sure the focus style stands out from the resting state and the surrounding colours. Aim for a ring around 2px thick with at least 3:1 contrast against adjacent colours to also satisfy the stronger WCAG 2.2 guidance.

4. 4

   Test sticky and overlay content

   Tab to elements near sticky headers, footers, and dialogs. Confirm the focused element is not hidden behind them — that is the related 2.4.11 Focus Not Obscured criterion.

5. 5

   Verify forced-colors / high contrast

   Turn on Windows High Contrast Mode (or emulate forced-colors in DevTools) and tab through again. The focus indicator must still be visible — outline-based rings survive, box-shadow-only rings do not.

Focus Visible is a manual check — automated tools cannot reliably judge whether a ring is "visible enough." Pair a keyboard walkthrough with the Keyboard Accessibility Guide and scan a live page with the URL Accessibility Auditor.

Frequently asked questions