When :focus-visible beats removing outlines
Global resets that set outline: none on every focused element still appear in older themes. During audits we tab through navigation and watch focus disappear—a failure under WCAG 2.4.7 Focus Visible.
Separate pointer from keyboard
The :focus-visible pseudo-class lets browsers show a ring only when focus should be obvious—typically keyboard activation. Pair it with a visible custom style so brand colours stay on brief.
Document the pattern
We ask clients to add a short “Focus styles” section to their design system: default ring colour, offset, and exceptions (e.g. skip link). Auditors then spend less time debating whether a custom shadow counts as visible focus.
Test with real tasks
Tab from the logo through the main menu into a search field. If you lose track of position on the third item, users will too. Record a ten-second clip for your ticket—faster than paragraphs of description.