Focus States That Survive a Redesign: A Keyboard-First Checklist
Redesigns silently break focus states; I run a 6-point check before every ship Replace :focus with :focus-visible so mouse clicks stay quiet, keyboards stay loud A 3:1 contrast outline against both themes is the bar I hold Tab the whole page once with the mouse unplugged, no exceptions A visual refresh almost always eats the keyboard experience. The design looks cleaner, the colors are nicer, and…
Designers often inadvertently break focus states during redesigns, causing issues for keyboard users. Six steps can prevent this from happening:
1. Replace :focus with :focus-visible to ensure mouse clicks don't show a focus ring, while keyboard users receive a clear indication.
2. Verify that the 3:1 contrast ratio is maintained between the outline color and the background, whether it's light, dark, or any other theme. This ensures keyboard users can perceive the focus state.
3. Test the entire page by pressing Tab without a mouse plugged in to catch any missed focus states.
4. Run a quick visual refresh check, as design changes often eliminate the focus outline unnoticed.
5. Swapping component libraries can also break focus states, so always check after such changes.
6. Apply a 3:1 contrast ratio to the outline color against both themes for maximum visibility.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
