Pruebas de accesibilidad: color-contrast y focus

El CSS controla el contraste de color, la visibilidad de los indicadores de foco, la visibilidad de los elementos (display:none los elimina del árbol de accesibilidad) y el orden de lectura (el reordenamiento visual mediante flexbox order frente al orden del DOM). Las decisiones de CSS afectan directamente a la posibilidad de que las personas con discapacidad utilicen la interfaz.

WCAG 2.1 AA exige una relación de contraste de 4.5:1 para texto normal y de 3:1 para texto grande (18px o más en negrita, o 24px o más normal). AAA exige relaciones de 7:1 y 4.5:1, respectivamente. Estas relaciones comparan la luminancia del color del texto en primer plano con la luminancia del color de fondo.

Haga clic en cualquier elemento de texto en DevTools → el panel Styles. La muestra de color muestra una insignia con la relación de contraste. Una marca de verificación indica que se cumple; una X indica que no. El selector de color muestra las líneas de umbral AA/AAA en el degradado de color.

axe-core, Lighthouse y Pa11y auditan automáticamente las relaciones de contraste de todos los elementos de texto. Ejecute axe-core con @axe-core/react durante el desarrollo para recibir advertencias de contraste en tiempo real en la consola del navegador.

El CSS outline: none o outline: 0 en :focus elimina el anillo de foco predeterminado del navegador, lo que hace invisible la navegación con teclado. Se trata de un fallo crítico de accesibilidad. Sustitúyalo por un estilo de foco personalizado y visible en lugar de eliminar por completo los indicadores de foco.

:focus se aplica a todos los eventos de foco, incluidos los clics del ratón (lo que provoca un anillo visible al hacer clic, algo que suele desagradar a los diseñadores). :focus-visible se aplica únicamente cuando el navegador determina que se está utilizando la navegación con teclado, de modo que muestra un anillo de foco a los usuarios del teclado sin mostrarlo al hacer clic con el ratón.

WCAG 2.2 introduce el criterio de éxito 2.4.11 (Apariencia del foco AA): los indicadores de foco deben tener un contraste de al menos 3:1 con respecto a los colores adyacentes y abarcar el perímetro del componente. Los estilos de foco personalizados deben cumplir estos requisitos, no limitarse a existir.

El modo de alto contraste de Windows reemplaza los colores CSS por colores del sistema definidos por el usuario. Utilice @media (forced-colors: active) para proporcionar estilos alternativos que funcionen en el modo de alto contraste. Realice las pruebas desde Configuración de Windows → Accesibilidad → Contraste alto.

WCAG 1.4.1 prohíbe utilizar el color como única forma de transmitir información. Un estado de error que solo cambia a rojo no cumple este criterio. Combine el color con iconos, etiquetas de texto, patrones o subrayados para que la información no basada en el color siempre esté presente.

WCAG 1.4.4 exige que el texto pueda ampliarse al 200 % sin perder contenido. WCAG 1.4.12 exige que las modificaciones del espaciado del texto (aumento de letter-spacing y line-height) no rompan el diseño. Utilice unidades relativas (rem, em) para la tipografía y cumplir ambos requisitos.

Pruebas completas de accesibilidad del CSS: la extensión de navegador axe DevTools para el desarrollo, Lighthouse CI para las comprobaciones automatizadas de la canalización, Pa11y para las auditorías de páginas desde la línea de comandos y pruebas manuales de navegación con teclado mediante Tab/Shift+Tab para verificar la visibilidad y el orden de los indicadores de foco.

¿Por qué outline: none nunca debe ser el CSS final para el estado :focus de un elemento?

Las pruebas de accesibilidad del CSS abarcan las relaciones de contraste de color (mínimo de 4.5:1 para AA), indicadores de foco visibles y conformes con WCAG 2.2 mediante :focus-visible, la prohibición de utilizar el color como único medio para transmitir información, la compatibilidad con el modo de colores forzados y el uso de unidades tipográficas relativas para cumplir los requisitos de redimensionamiento. Las herramientas automatizadas, junto con las pruebas manuales con teclado, garantizan una cobertura completa.