Same UI, Three CSS Builds: How One Reset Line Breaks Keyboard Navigation

A technical experiment rebuilt the same preference form three times using identical HTML but different CSS to test whether visual equivalence equals functional equivalence. The baseline browser version naturally displayed focus rings that moved across fields as users tabbed through the form, giving keyboard users a clear position indicator. A common CSS reset — widely used in real projects — included ':focus { outline: none; }', which silently erased all focus indicators while leaving the interface visually unchanged for mouse users. The third pass replaced that rule with ':focus-visible', restoring keyboard navigation cues without altering the mouse experience. The exercise demonstrates that visual QA alone cannot detect accessibility regressions, since it checks appearance but not what the interface communicates to non-mouse users.