Keep the focus ring: a keyboard check for landing pages

A landing page isn't finished when the buttons work with a mouse. Try reaching the same buttons without one.

Press Tab from the top of the page. You should be able to see which link, button or input has focus. Shift+Tab lets you check the path in reverse. If focus disappears, the page can leave a sighted keyboard user guessing where they are.

One CSS rule worth looking for is:

/* Removing this without a replacement hides the focus indicator. */
button:focus {
  outline: none;
}

Don't remove the default outline just because it looks out of place. Style a replacement instead. :focus-visible lets the browser decide when a visible indicator is needed, while you control its appearance:

.cta:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
}

This example styles an existing button or link with the cta class. It doesn't make a plain div keyboard-operable. Prefer a real <button> for an action and a real <a href="..."> for navigation.

The blue is an example, not a promise that it works against every background. Check the ring on your actual page, including dark sections and sticky headers. Make sure it isn't clipped or hidden behind another element.

A small manual check:

• Tab through the navigation, main call to action and form.
• Check that focus stays visible at each stop.
• Use Shift+Tab to go back.
• If there's a menu or dialog, open it with the keyboard and check whether you can close it and return to the trigger.

Don't replace all focus styles with one global reset. Keep the browser's defaults where you haven't supplied a tested alternative. A styled ring is one part of keyboard access, not proof that the whole page is accessible.

Reference: MDN on :focus-visible.