Tabs accesibles sin una línea de JavaScript

La mayoría de los componentes de pestañas que ves por ahí cargan kilobytes de JavaScript para algo que el navegador ya sabe hacer: gestionar un estado seleccionado entre varias opciones. Eso es, literalmente, un grupo de radio buttons.

La idea

Cada pestaña es un <label> asociado a un <input type="radio"> oculto. Cuando el radio se marca, el CSS reacciona y muestra el panel correspondiente. Cero JS, y de regalo obtienes navegación con flechas del teclado, que el grupo de radios trae de serie.

<label for="tab1">Pestaña 1</label>
<input id="tab1" name="tabs" type="radio" class="sr-only peer" checked />

El truco: :has()

El panel cambia de estilo según si el input hermano está marcado:

label:has(+ input:checked) {
  color: white;
  background: var(--primary);
}

:has(+ input:checked) se lee como “este label que tiene, justo después, un input marcado”. Es CSS mirando hacia adelante.

Accesibilidad real

Como el input sigue siendo enfocable (sr-only, no display:none), el teclado funciona. Solo recuerda añadir un anillo de foco visible:

label:has(+ input:focus-visible) {
  outline: 2px solid var(--primary);
}

Conclusión

Antes de instalar una librería, pregúntate si el navegador ya resuelve el problema. En este caso, una <input> y un selector moderno te ahorran todo el runtime.