Visible focus & focus appearance

The single most damaging line in front-end CSS is *:focus { outline: none; }. It’s often added to kill the “ugly” default ring, but it strips the only signal a keyboard user has for where they are. Once it’s gone, tabbing through the page moves an invisible cursor — the user can’t tell which link or button is active, so they can’t know what Enter will do. The default outline isn’t sacred, but it must be replaced, not deleted. Modern CSS makes this easy: style :focus-visible so the indicator shows for keyboard users without putting a ring around every mouse click.

/* Removes focus everywhere, gives nothing back */
*:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}

/* Visible ring for everyone by default */
:focus {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}

/* Where supported, suppress the ring only for non-keyboard focus */
:focus:not(:focus-visible) {
  outline: none;
}

A focus ring that technically exists but is a 1 px pale-grey hairline is barely better than none. Two thresholds decide whether an indicator is strong enough. Non-text Contrast (1.4.11, AA) requires the indicator to have at least a 3:1 contrast ratio against the colours next to it — both the component it surrounds and the page behind it. Focus Appearance (2.4.13, AAA) adds a size floor: the indicator must cover an area at least equal to a 2 px-thick perimeter of the control (or a 4 px line along the shortest side) and have 3:1 contrast against the unfocused state. Thin, washed-out rings fail both — especially for low-vision users.

/* 1px and ~1.4:1 against white — fails contrast and area */
:focus-visible {
  outline: 1px solid #d0d0d0;
  outline-offset: 0;
}

:focus-visible {
  outline: 3px solid #0b5fff; /* ~5:1 on white */
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid #ffffff;       /* light inner edge */
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #0b1f44;    /* dark outer halo */
}

Focus Not Obscured is new in WCAG 2.2 and catches a problem strong rings can’t solve. A position: sticky or fixed header (or a cookie bar, or a floating chat widget) overlays the top of the page. When a keyboard user tabs to a link that the browser scrolls just under that header, the control — and its focus ring — sit behind the overlay. At AA (2.4.11) the control must not be entirely hidden; at AAA (2.4.12) no part of it may be hidden. The browser scrolls the element to the very top edge, which is exactly where your fixed header is, so the default behaviour fails. The fix is pure CSS: reserve the header’s height with scroll-margin-top.

.site-header {
  position: fixed;
  inset-block-start: 0;
  height: 64px;
}
/* No scroll-margin: focused links land under the header */

:root {
  --header-h: 64px;
}
/* Keep focused/scrolled targets clear of the fixed header */
a, button, input, select, textarea, [tabindex] {
  scroll-margin-top: calc(var(--header-h) + 8px);
}

/* Reserve header height for ALL programmatic scrolling */
html {
  scroll-padding-top: 72px; /* >= header height */
}