Notas desde el pase: La misma interfaz, reconstruida tres veces

También disponible en English

La afirmación a prueba

El ensayo del martes marcó una línea entre dos tipos de valores por defecto del navegador: la decoración, que no tiene peso funcional, y los recursos de interacción (affordance), que sí lo tienen. Argumentó que el QA visual no puede distinguirlos, porque solo comprueba cómo se ve una página, nunca lo que comunica. La afirmación específica que se pone a prueba aquí: dos implementaciones pueden pasar la misma revisión visual, verse idénticas para un mouse y, aun así, no ser equivalentes en el momento en que un teclado es el que navega.

Tres versiones de una misma interfaz. El mismo marcado. Solo cambia el CSS.

La preparación

La interfaz se mantiene pequeña a propósito: un formulario corto de preferencias:

<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>

Mismo marcado, sin cambios, en los tres pases. Solo se mueve el CSS.

Pase Uno — Valores por defecto del navegador

Sin reset. Sin clases de utilidad. Solo el marcado de arriba y lo que sea que el navegador decida hacer con él.

El encabezado parece un encabezado, el campo de entrada tiene un borde visible y el botón parece ejecutable antes de que alguien lo toque. Nada de esto fue diseñado: es lo que el navegador entrega de forma predeterminada e incluye algo fácil de dar por sentado: avanza con la tecla Tab al campo de correo electrónico y aparece un anillo a su alrededor. Avanza de nuevo y el anillo se desplaza a la casilla de verificación. Avanza una vez más y cae en el enlace, luego en el botón. El navegador narra la posición del usuario a través del formulario sin que se lo pidan.

Esta es la línea base. Todo lo demás se mide contra ella.

Pase Dos — El reset nuclear

Ahora llega el reset, el tipo de línea base al que recurren muchos proyectos desde el primer día, antes de haber aplicado cualquier estilo real:

*, *::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;
}

Luego, la capa de utilidades reconstruye el diseño visual encima, ajustándolo lo suficiente al Pase Uno como para que un mouse no pueda notar la diferencia:

.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;
}

Abre esto junto al Pase Uno. Mismo espaciado, misma escala tipográfica, mismo azul en el enlace y el botón. Haz clic a través de él con un mouse y nada cambió.

Ahora navega con el teclado. El anillo que se movía de campo en campo en el Pase Uno desapareció: no está tenue, no cambió de estilo, desapareció. :focus { outline: none; } se ubica siete líneas dentro de un reset que nadie examinó línea por línea, haciendo exactamente lo que se le dijo, sin idea de que acaba de borrar la única señal que tenía un usuario de teclado para rastrear su propia posición.

Pase Tres — El reset controlado

Mismo reset. Una línea eliminada, una línea agregada:

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

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

Visualmente, el Pase Tres y el Pase Dos siguen siendo idénticos para un mouse. :focus-visible no dibuja un anillo al hacer clic con el mouse en los navegadores actuales; responde a las mismas señales de método de entrada que el navegador ya usa para juzgar cuándo vale la pena mostrar un indicador de foco. Nada sobre la experiencia del mouse cambia aquí tampoco.

Navega con la tecla Tab, sin embargo, y el anillo está de vuelta. No el anillo original del navegador: uno elegido, con un grosor elegido, en un color que el sistema de diseño ya posee. Pero cae en los mismos campos, en el mismo orden, haciendo el mismo trabajo.

Si la afirmación se sostuvo

Pon los tres lado a lado y haz clic a través de ellos. Se leen como la misma página. Eso no es un accidente: es todo el punto del experimento. Si el reset hubiera roto algo visiblemente, el QA visual lo habría detectado y no habría artículo.

Navega con el teclado en su lugar y la equivalencia se colapsa. El Pase Uno y el Pase Tres narran cada parada. El Pase Dos no dice nada, para cada elemento, en todo el camino a través del formulario.

La afirmación en el ensayo del martes La mayoría de los resets de HTML pierden el punto por completo se sostuvo. Dos implementaciones alcanzaron una paridad visual completa mientras tomaban decisiones totalmente diferentes sobre lo que el navegador estaba proporcionando de forma gratuita. El Pase Uno y el Pase Tres tomaron esa decisión a propósito: uno al dejar intacto el valor predeterminado, el otro al reemplazarlo deliberadamente. El Pase Dos nunca tomó una decisión; heredó un resultado de una regla que nunca tuvo que ver con el foco en primer lugar. El mouse no pudo revelar la diferencia. El teclado lo hizo, cada vez.