Accesibilidad y arquitectura del CSS

Foco visible y accesible

Aquí cambiamos el chip: hasta ahora escribías CSS para que se viera bien. Ahora vas a escribirlo para que todo el mundo pueda usarlo, navegue como navegue. Eso es accesibilidad, y separa a quien hace webs de quien hace webs de verdad.

El foco indica qué elemento recibirá el teclado. ⚠️ Trampa clásica: matarlo con outline: none "porque es feo". Si lo quitas sin alternativa, dejas a ciegas a quien navega con teclado, y son muchísimas personas. :focus-visible resuelve el dilema de toda la vida: muestra el anillo de foco cuando se navega con teclado, pero no en cada clic de ratón. Lo mejor de los dos mundos.

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

Respetar las preferencias del usuario

El sistema operativo expone preferencias que CSS puede leer con media queries:

/* Reduce o elimina animaciones para quien lo pide (mareos, vestibular) */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Adapta el tema al modo oscuro del sistema */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f172a;
    --texto: #e2e8f0;
  }
}

Contraste

⚠️ Trampa clásica: ese gris clarito sobre blanco que queda tan elegante en tu pantalla nueva y a plena luz del día es, para mucha gente, ilegible. El texto debe tener contraste suficiente sobre su fondo. Las pautas WCAG AA piden una ratio mínima de 4.5:1 para texto normal y 3:1 para texto grande. No lo dejes al ojímetro: comprueba siempre el contraste con una herramienta.

Arquitectura: BEM

A medida que el CSS crece, la mayor dificultad no es escribirlo sino mantenerlo sin que se te derrumbe encima. ⚠️ Trampa clásica: nombres mágicos tipo .azul2 o .cajaFinal que en una semana ni tú sabes qué hacen. BEM (Block, Element, Modifier) es una convención de nombres que hace tu CSS predecible y legible de un vistazo:

.tarjeta { }              /* Block: el componente */
.tarjeta__titulo { }      /* Element: una parte del bloque (doble guion bajo) */
.tarjeta--destacada { }   /* Modifier: una variante (doble guion) */

<article class="tarjeta tarjeta--destacada">
  <h2 class="tarjeta__titulo">Hola</h2>
</article>

Controlar la especificidad

La especificidad decide qué regla gana cuando varias afectan al mismo elemento. Una buena arquitectura la mantiene baja y plana:

• Prefiere clases a IDs o a selectores de etiqueta encadenados.
• Evita anidar en exceso: .menu .lista .item a es frágil y difícil de sobrescribir.
• Reserva !important para casos excepcionales; suele ser síntoma de una especificidad descontrolada.

BEM, al usar clases planas de un solo nivel, mantiene la especificidad constante y te ahorra las guerras de !important (esas en las que solo pierdes tú).

Y con esto cierras el track de Web. Para un segundo y mira atrás: empezaste con un <h1> y ya manejas semántica, layout, formularios, animaciones, accesibilidad y CSS moderno mantenible. Sabes construir interfaces completas y bien hechas. Felicidades de verdad. 🎉

Lo único que les falta es moverse: reaccionar al clic, validar, actualizar datos sin recargar la página... eso es JavaScript, y es justo lo que viene ahora. Llevas medio camino y la mejor parte está empezando.