Accesibilidad WCAG 2.2: buenas practicas de CSS para un diseño inclusivo

La accesibilidad web no es opcional. CSS tiene un papel directo en si una interfaz sigue siendo usable para personas con distintas capacidades, dispositivos y condiciones reales de uso.

Por que importa

• una parte enorme de la poblacion vive con alguna discapacidad
• en muchos paises ya existen requisitos legales claros
• las mejoras de accesibilidad casi siempre mejoran el UX general
• una estructura accesible suele ayudar tambien al SEO

Contraste de color

Para WCAG AA, el contraste minimo sigue siendo una base simple:

• texto normal: 4.5:1
• texto grande: 3:1
• componentes UI: 3:1

.button {
  background: #0066cc;
  color: #ffffff;
}
.button-bad {
  background: #7a7a7a;
  color: #999999;
}

Estados de foco

Nunca elimines el foco sin ofrecer una alternativa clara.

button:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25);
}

Preferencias de movimiento

Respeta prefers-reduced-motion para no forzar animaciones innecesarias:

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
  .card:hover {
    transform: none;
  }
}

Lectores de pantalla

El contenido visualmente oculto puede seguir siendo accesible si usas patrones estables como .sr-only. Tambien siguen siendo utiles los skip links para saltar directo al contenido principal.

Espaciado de texto

Tus estilos deben aguantar aumentos de interlineado, espaciado entre letras y espaciado entre palabras sin romper el layout ni esconder contenido.

Touch targets

Mantener objetivos tactiles de al menos 44x44px sigue siendo una regla simple y efectiva para interfaces moviles.

Errores comunes

Checklist rapido

• la navegacion por teclado funciona
• el foco se ve bien
• el contraste pasa WCAG AA
• las animaciones respetan reduced motion
• el texto puede ampliarse
• la interfaz sigue siendo entendible con lector de pantalla

Conclusion

La accesibilidad no se arregla una vez y ya. Se mantiene viva revisando patrones, regresiones y cambios visuales una y otra vez.