Notes from the Pass: The Same Interface, Rebuilt Three Times

Also available in Español

The Claim Being Tested

Tuesday's essay drew a line between two kinds of browser default: decoration, which carries no functional weight, and affordance, which does — and argued that visual QA can't tell them apart, because visual QA only checks what a page looks like, never what it communicates. The specific claim under test here: two implementations can pass the same visual review, look identical to a mouse, and still not be equivalent the moment a keyboard is the one navigating.

Three versions of one interface. Same markup. Only the CSS changes.

The Setup

The interface stays small on purpose — a short preferences form:

<form class="pass-demo">
  <h2>Contact preferences</h2>
  <p>Choose how we should reach you.</p>

  <label for="email">Email address</label>
  <input type="email" id="email" name="email">

  <label>
    <input type="checkbox" name="updates">
    Send me product updates
  </label>

  <a href="#">Read our privacy policy</a>

  <button type="submit">Save preferences</button>
</form>

Same markup, unchanged, across all three passes. Only the CSS moves.

Pass One — Browser Defaults

No reset. No utility classes. Just the markup above and whatever the browser decides to do with it.

The heading looks like a heading, the input has a visible border, and the button looks clickable before anyone touches it. None of this was designed — it's what the browser ships by default, and it includes something easy to take for granted: tab into the email field, and a ring appears around it. Tab again, and the ring moves to the checkbox. Tab again, and it lands on the link, then the button. The browser narrates the user's position through the form without being asked to.

This is the baseline. Everything else gets measured against it.

Pass Two — The Nuclear Reset

Now the reset arrives — the kind of baseline a lot of projects reach for on day one, before any real styling has happened:

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

body {
  line-height: 1.5;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus {
  outline: none;
}

Then the utility layer rebuilds the visual design on top of it, matched close enough to Pass One that a mouse can't tell the difference:

.pass-demo h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.pass-demo p { margin-bottom: 1rem; color: #444; }
.pass-demo label { display: block; margin-bottom: 0.25rem; font-size: 0.875rem; }
.pass-demo input[type="email"] {
  border: 1px solid #ccc;
  padding: 0.5rem;
  border-radius: 4px;
  width: 100%;
  margin-bottom: 1rem;
}
.pass-demo a { color: #2563eb; text-decoration: underline; }
.pass-demo button {
  background: #2563eb;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

Open this next to Pass One. Same spacing, same type scale, same blue on the link and the button. Click through it with a mouse and nothing changed.

Now tab through it. The ring that moved from field to field in Pass One is gone — not faint, not restyled, gone. :focus { outline: none; } sits seven lines into a reset nobody scrutinized line by line, doing exactly what it was told, with no idea it just deleted the one signal a keyboard user had for tracking their own position.

Pass Three — The Controlled Reset

Same reset. One line removed, one line added:

/* :focus { outline: none; } — removed */

:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

Visually, Pass Three and Pass Two are still identical to a mouse. :focus-visible doesn't draw a ring on a mouse click in current browsers — it responds to the same input-method signals the browser already uses to judge when a focus indicator is worth showing. Nothing about the mouse experience changes here either.

Tab through it, though, and the ring is back. Not the browser's original ring — a chosen one, at a chosen weight, in a color the design system already owns. But it lands on the same fields, in the same order, doing the same job.

Whether the Claim Held

Put all three side by side and click through them. They read as the same page. That's not an accident — it's the whole point of the experiment. If the reset had visibly broken something, visual QA would have caught it, and there'd be no article.

Tab through them instead, and the equivalence collapses. Pass One and Pass Three narrate every stop. Pass Two says nothing, for every element, all the way through the form.

The claim in Tuesday's essay Most HTML Resets Miss the Point Entirely held. Two implementations reached full visual parity while making entirely different decisions about what the browser was providing for free. Pass One and Pass Three made that decision on purpose — one by leaving the default alone, one by replacing it deliberately. Pass Two never made a decision at all; it inherited an outcome from a rule that was never about focus in the first place. The mouse couldn't surface the difference. The keyboard did, every time.