Texto alternativo para el contenido generado desde CSS

A través de Tests for CSS generated content alternative text he aprendido que se puede definir un texto alternativo para el contenido generado desde CSS. Este artículo analiza el uso de la propiedad content en CSS para generar contenido visual (como texto o iconos) y su implicación en la accesibilidad. Cuando este contenido es relevante, debería contar con una alternativa accesible para personas que utilizan productos de apoyo como los lectores de pantalla. Para ello, la especificación de CSS permite incluir un texto alternativo mediante una barra (/) dentro de la propiedad content, donde lo anterior a la barra se muestra visualmente y lo posterior se destina a los productos de apoyo.

Según la especificación, este texto alternativo debe sustituir al contenido visual en lectores de pantalla y puede ser expuesto en el árbol de accesibilidad en navegadores compatibles.

Pero como suele ocurrir muchas veces, una cosa es la teoría (la especificación) y otra la práctica (lo que realmente funciona al combinar un navegador con un lector de pantalla en un sistema operativo específico). Se presentan cuatro casos de prueba: (1) solo contenido generado, que generalmente se anuncia correctamente; (2) solo texto alternativo, con resultados inconsistentes según navegador y lector de pantalla; (3) texto alternativo vacío, donde no debe anunciarse nada; y (4) combinación de contenido visual y texto alternativo, donde este último debería reemplazar al primero, aunque también con inconsistencias en algunos entornos.

En conjunto, los resultados muestran que el soporte de esta funcionalidad aún no es completamente fiable entre diferentes combinaciones de navegadores y lectores de pantalla. Por ello, se recomienda tratar esta técnica como experimental y, para información importante, seguir utilizando HTML semántico y atributos ARIA en lugar de depender únicamente del contenido generado por CSS para garantizar la accesibilidad.