The Crime of 'outline: none'

For decades, naive designers complained that the default browser focus ring was 'ugly' and demanded developers write:

*:focus { outline: none; } /* NEVER DO THIS */

Stripping focus rings without an accessible replacement is the digital equivalent of turning off the computer screen for keyboard users. They press Tab and have zero idea where on the page their focus is located. Clicking blind can trigger irreversible actions like account deletion or unverified charges.

The Modern Standard: WCAG 2.4.7 (Focus Visible) & 2.4.11 (Focus Appearance):

• Focus rings must be clearly visible.
• They must have at least a 3:1 contrast ratio against the adjacent background.
• Use :focus-visible in CSS so rings appear when navigating by keyboard, but stay subtle on mouse clicks.