La accesibilidad digital es esencial para garantizar que todas las personas, incluidas aquellas con discapacidad, puedan acceder a la información en línea sin barreras. En las WCAG 2.1, el Criterio de Éxito 1.1.1: Contenido no textual establece que todo contenido visual debe contar con un equivalente textual para que los usuarios con discapacidad visual puedan comprenderlo.
Uno de los problemas frecuentes es el uso de arte ASCII sin proporcionar un texto alternativo. Aunque está compuesto por caracteres, el significado del arte ASCII proviene de la disposición visual de estos y no del texto en sí. Como resultado, las tecnologías de asistencia no pueden interpretar correctamente la información representada.
Acerca de este fallo
El fallo F72 ocurre cuando se utiliza arte ASCII en una página web sin proporcionar una alternativa textual. Esto afecta negativamente a:
- Usuarios con discapacidad visual, que dependen de lectores de pantalla.
- Personas con dificultades cognitivas, que pueden necesitar una descripción textual clara.
- Motores de búsqueda, que no pueden indexar correctamente el contenido representado en ASCII.
Escenarios comunes del fallo
- Uso de gráficos ASCII en encabezados o secciones importantes.
- Diagramas de ASCII en documentación técnica sin una descripción alternativa.
- Figuras decorativas en ASCII sin etiquetas accesibles.
Ejemplos
Ejemplo incorrecto 1: Uso de arte ASCII sin alternativa textual
El siguiente gráfico ASCII representa una tendencia en frecuencia de parpadeo, pero no proporciona una alternativa textual, lo que lo hace inaccesible para personas con discapacidad visual:
<pre>
% __ __ __ __ __ __ __ __ __ __ __ __ __ __
100 | * |
90 | * * |
80 | * * |
70 | @ * |
60 | @ * |
50 | * @ * |
40 | @ * |
30 | * @ @ @ * |
20 | |
10 | @ @ @ @ @ |
0 5 10 15 20 25 30 35 40 45 50 55 60 65 70
Flash frequency (Hz)
</pre>🔴 Problema:
- No tiene una alternativa textual adecuada.
- Los lectores de pantalla no pueden interpretar su significado.
Solución correcta: Alternativa textual adecuada
<pre aria-hidden="true">
% __ __ __ __ __ __ __ __ __ __ __ __ __ __
100 | * |
90 | * * |
80 | * * |
70 | @ * |
60 | @ * |
50 | * @ * |
40 | @ * |
30 | * @ @ @ * |
20 | |
10 | @ @ @ @ @ |
0 5 10 15 20 25 30 35 40 45 50 55 60 65 70
Flash frequency (Hz)
</pre>
<p>Este gráfico ASCII representa la relación entre la frecuencia de parpadeo (eje X) y la intensidad percibida (eje Y). Se observa que a medida que aumenta la frecuencia, la percepción varía con ciertos picos en valores específicos.</p>✅ ¿Qué mejora?
- Se proporciona una descripción textual clara.
- Se usa
aria-hidden="true"para evitar que los lectores de pantalla interpreten el gráfico ASCII.
Ejemplo correcto: Solución ideal
En lugar de usar arte ASCII, se recomienda el uso de gráficos accesibles como SVG o HTML+CSS.
<svg width="400" height="200" role="img" aria-labelledby="chartTitle">
<title id="chartTitle">Gráfico de la relación entre la frecuencia de parpadeo y la intensidad percibida</title>
<desc>El gráfico muestra cómo la percepción de la luz cambia con el aumento de la frecuencia.</desc>
<!-- Código SVG para representar el gráfico -->
</svg>✅ ¿Qué mejora?
- Los gráficos SVG pueden ser interpretados por lectores de pantalla.
- Se puede proporcionar una descripción detallada mediante
<title>y<desc>. - Se evita el uso de contenido visual no accesible.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Usar gráficos ASCII sin un equivalente textual.
- Suponer que los caracteres ASCII pueden ser interpretados como texto real.
- No etiquetar correctamente el contenido ASCII.
Cómo evitar estos errores:
- Proporcionar siempre una descripción textual alternativa.
- Usar etiquetas
aria-hiddenpara evitar que los lectores de pantalla interpreten ASCII. - Optar por gráficos accesibles en lugar de arte ASCII.
Preguntas frecuentes sobre el fallo F72
¿Por qué el arte ASCII no es accesible?
Porque los lectores de pantalla no pueden interpretar correctamente la disposición de los caracteres visuales.
¿Puedo usar ASCII si incluyo una descripción?
Sí, siempre que proporciones un texto alternativo claro junto al gráfico.
¿Cómo puedo detectar este problema en mi web?
Utiliza herramientas como WAVE o Lighthouse para revisar el contenido no textual sin alternativa.
¿Qué alternativa es mejor que el arte ASCII?
Los gráficos SVG con descripciones accesibles son la mejor opción.
¿El uso de ASCII en logotipos también es un problema?
Sí, si el logotipo no tiene un texto alternativo adecuado.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F72: Incumplimiento del Criterio de Conformidad 1.1.1 debido al uso de arte ASCII sin proporcionar un texto alternativo
- Comprender el criterio de éxito 1.1.1: Contenido no textual
Pruebas y validación
Procedimiento
- Identificar contenido ASCII en la página.
- Comprobar si se proporciona un texto alternativo claro.
Resultados esperados
- ✅ Si el contenido ASCII tiene una descripción adecuada, entonces el contenido cumple con WCAG 2.1.
- ❌ Si el arte ASCII no tiene alternativa accesible, el contenido falla el criterio 1.1.1 y debe corregirse.
El uso de arte ASCII sin alternativa accesible dificulta el acceso a la información para muchos usuarios. Asegurar que todo contenido no textual tenga una descripción clara mejora la inclusión y la experiencia de usuario.
Si necesitas ayuda para hacer tu web más accesible, contáctanos y optimiza la accesibilidad de tu sitio! 🚀