CSS Reset Study: Why Visual QA Misses Keyboard Nav
An experiment building the same interface three ways shows identical mouse behavior but completely different keyboard navigation results.
Stock photo for illustration only, not from the actual event
- Visual QA and mouse testing cannot catch underlying accessibility differences.
- Three interface versions share identical HTML markup with different CSS.
- Pressing the Tab key reveals stark contrasts in focus management.
An essay on Dev.to explores a small preferences form built three times using the exact same HTML markup, with only the CSS changing between versions. The experiment tests the distinction between decoration, which carries no functional weight, and affordance, which does, highlighting what standard visual QA often fails to spot.
The baseline version (Pass One) relies entirely on browser defaults. The heading looks like a heading, inputs have visible borders, and buttons look clickable. Crucially, pressing the Tab key sequentially navigates through the email field, checkbox, link, and button, with the browser automatically displaying a focus ring to narrate the user's position.
Stock photo for illustration only, not from the actual event
In the second version (Pass Two), a standard CSS reset is applied. Visually and to a mouse click, all three pages look identical, meaning visual QA would pass them instantly. However, pressing the Tab key through Pass Two yields zero visual feedback, as the focus ring vanishes entirely across every form element.
Many common CSS resets strip away browser defaults to create a consistent canvas, but they frequently discard accessibility features like focus outlines in the process. Developers must consciously restore or define new focus indicators to ensure keyboard-only users can successfully navigate the interface.
The third version (Pass Three) restores focus handling by implementing a custom focus ring matching the design system's color and weight. Tab navigation in Pass Three behaves similarly to the browser default while maintaining a tailored visual aesthetic.
Source: Dev.to
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment