Las prácticas de CSS que pueden dañar la accesibilidad

CSS se ha convertido en un lenguaje todopoderoso. Lo que comenzó como un medio para agregar un estilo básico al texto y otros elementos de diseño ahora es capaz de mucho más.

Podemos usarlo para crear prácticamente cualquier diseño imaginable. Los efectos especiales y la interactividad que solían requerir JavaScript o complementos del navegador ahora son compatibles de forma nativa. El lenguaje ha pasado de ser una herramienta básica a una de las tecnologías fundamentales detrás de cada sitio web.

Pero como cualquier herramienta poderosa, CSS también puede tener efectos secundarios no deseados. La accesibilidad es una de las mayores áreas de preocupación. De hecho, algunas implementaciones pueden hacer más daño que bien.

Con eso en mente, veamos algunas prácticas de CSS que pueden dañar la accesibilidad. Incluyen características comunes que requieren una cuidadosa consideración antes de comenzar a escribir código. ¡Empecemos!

Mostrar texto importante usando la propiedad de content

La propiedad de content CSS ofrece una manera elegante de agregar mejoras visuales a un elemento. Por ejemplo, puede usarlo en combinación con un pseudoelemento para agregar un ícono antes de un pasaje de texto o un elemento de lista. También puede mostrar imágenes o cadenas de texto.

Pero ese último puede ser particularmente problemático. El texto agregado a través de la propiedad de content no se incluye en el modelo de objeto del documento (DOM). Eso significa que es posible que la tecnología de asistencia, como los lectores de pantalla, no lo reconozca.

Esto está bien para artículos puramente decorativos. Sin embargo, podría generar problemas de accesibilidad si el texto proporciona un contexto vital para una página. Los usuarios pueden perderse información importante.

Por lo tanto, es mejor evitar usar la propiedad de content para mostrar texto. Eso es a menos que esté seguro de que no interferirá con la capacidad del usuario para comprender la página.

Creación de secuencias animadas de parpadeo intenso

La animación es un área donde CSS ha experimentado una gran evolución. Los efectos que alguna vez fueron territorio de bibliotecas de terceros ahora se pueden crear con relativa facilidad. Y dado que son compatibles de forma nativa, pueden aprovechar funciones como la aceleración de hardware para mejorar el rendimiento.

Las transiciones y transformaciones básicas pueden hacer maravillas para crear un estado de ánimo y captar la atención del usuario. Y también es posible construir efectos increíblemente realistas con la ayuda de JavaScript.

Pero ciertos estilos de animación pueden tener efectos negativos. Para algunos usuarios, demasiado movimiento puede ser desorientador, o mucho peor. Los destellos intensos o los efectos estroboscópicos pueden provocar convulsiones. Esto es posible en la web, al igual que en las películas, la programación de televisión y los videojuegos.

Las WCAG 2.0 ofrecen una guía respaldada por investigaciones para crear animaciones que no desencadenen convulsiones u otras reacciones adversas. Por ejemplo, se recomienda configurar una presentación para que parpadee no más de tres veces por segundo, además de mantener el tamaño pequeño y evitar el color rojo.

Afortunadamente, esto no limita nuestra capacidad de impresionar a los usuarios con movimiento. Todavía hay muchas oportunidades para mejorar nuestro trabajo. Pero los tipos de animación utilizados y sus impactos potenciales deben ser analizados.

Estados poco intuitivos :hover o :focus en elementos interactivos

CSS es experto en diseñar elementos interactivos. Considere lo que es posible con elementos cotidianos como hipervínculos y campos de formulario. Se pueden personalizar hasta el punto de ser irreconocibles en comparación con su aspecto predeterminado.

Eso está muy bien. Pero también es importante pensar en lo que sucede cuando un usuario interactúa con un elemento. Imagine hacer clic en un botón que no ofrece ninguna señal visual para confirmar lo que sucedió. O usar un teclado para desplazarse por un menú que no resalta el enlace actual.

Pueden ser simples, pero estas microinteracciones ayudan a proporcionar contexto a los usuarios. Confirmar el clic de un botón o comprender en qué elemento del menú se enfoca el cursor son solo dos ejemplos. Y cada uno brinda una sensación de confianza cuando un visitante navega por un sitio web.

El estilo inicial de un elemento interactivo es solo la mitad de la batalla. La oferta de estilos intuitivos para las :hover y :focus completa la experiencia del usuario.

Vale la pena señalar que estos estilos deben ser fácilmente perceptibles. En la práctica, eso significa usar algo más que el color como indicador. Agregar animaciones, contornos o íconos puede ayudar a garantizar que nadie se quede fuera.

Dando por sentado los fundamentos del diseño accesible

Todos hemos estado allí. La fecha límite de un proyecto se acerca rápidamente y necesita hacer las cosas. En la carrera por el lanzamiento, algunos elementos relacionados con la accesibilidad podrían pasar desapercibidos.

Muy a menudo son los conceptos básicos del diseño accesible los que se dejan atrás. Esas prácticas de CSS que los diseñadores pueden dar por sentadas y suponer que ya están a la altura.

Los principales ejemplos incluyen fundamentos como tipografía legible y relaciones de contraste de color aceptables. Sin considerar y probar estos elementos, es posible que un sitio web no sea tan accesible como cree.

Por eso vale la pena tomarse un tiempo extra para revisar los aspectos más amplios de los estilos de su sitio. Incluso si un artículo pasa la inspección de "ojo", haga un esfuerzo adicional para realizar una auditoría. Es posible que se sorprenda de cuántas oportunidades de mejora sutil encontrará.

Se trata de usar CSS de manera responsable

Debido a que CSS es tan poderoso, es fácil sentirse tentado por las posibilidades que ofrece. ¿Por qué conformarse con una animación básica cuando puedes crear algo cinematográfico? ¿Y cómo no amar la comodidad de usarlo para generar contenido?

Todo se reduce a la empatía y la responsabilidad. Como cualquier herramienta, CSS es capaz de hacer grandes cosas. Pero el hecho de que podamos implementar una función específica no significa que sea adecuada para la accesibilidad. Vivimos en un mundo donde personas de todos los ámbitos de la vida consumirán lo que construimos. Y es nuestro trabajo asegurarnos de que puedan hacerlo sin obstáculos.

El lado positivo es que evitar las prácticas anteriores está al alcance de todos. En su mayor parte, se trata de pensar en el impacto potencial de lo que hacemos. A partir de ahí, las pruebas nos brindan los datos que necesitamos para refinar aún más las cosas.

CSS está ahí para facilitar la accesibilidad. Todo está en cómo elegimos usarlo.