Alternativas textuales

Te damos la bienvenida a la primera lección de criterios. Esta se puede leer gratis, sin cuenta, así que también es la mejor forma de ver cómo está construida cada lección del curso: una pauta, una sección por cada criterio del Nivel A y, dentro de cada sección, las mismas cinco partes, terminando en cómo probarlo.

Esta lección cubre la pauta 1.1 Alternativas textuales (Text Alternatives), que tiene un único criterio de Nivel A. Es corto de enunciar y sorprendentemente fácil de hacer mal.

1.1.1 Contenido no textual (Non-text Content)

Qué exige

Todo el contenido no textual que se presenta a la persona tiene una alternativa textual que cumple el mismo propósito.

"Contenido no textual" son imágenes, íconos, gráficos, botones de imagen, audio y video (que además tienen criterios propios), CAPTCHAs y cualquier otra cosa que no sea texto. "Cumple el mismo propósito" es la parte que importa: la alternativa tiene que darle a una persona que no puede ver la imagen lo mismo que obtiene de ella una persona que ve. No una descripción de los píxeles. El propósito.

📖 Understanding 1.1.1 Non-text Content (en inglés)

A quién ayuda

• Usuarios de lector de pantalla, que escuchan la alternativa textual en lugar de la imagen
• Personas con baja visión que usan lector de pantalla junto con ampliación
• Usuarios de control por voz, que necesitan un nombre que decir cuando el control es un ícono
• Cualquier persona con una conexión lenta, cuando las imágenes no cargan y aparece la alternativa en su lugar

Antes 🚫 / Después ✅

La pregunta más útil sobre cualquier imagen es: ¿para qué sirve? La respuesta decide qué debe decir su alternativa.

Una imagen informativa. La imagen aporta información que no está en el texto que la rodea.

<!-- Antes 🚫 -->
<img src="ventas-t3.png">

<!-- Después ✅ -->
<img src="ventas-t3.png" alt="Ventas del tercer trimestre: 120 pedidos en julio, 95 en agosto, 140 en septiembre">

Sin alt, muchos lectores de pantalla leen el nombre del archivo, "ventas-t3 punto png", que no dice nada. Para un gráfico complejo, un alt corto más los datos completos en una tabla o en un texto cerca del gráfico es mejor que apretar todo en un atributo.

Una imagen decorativa. La imagen no aporta nada que la persona necesite, como un adorno de fondo, un separador o una foto de banco de imágenes junto a un encabezado que ya lo dice todo.

<!-- Antes 🚫 -->
<img src="adorno.svg" alt="adorno decorativo azul">

<!-- Después ✅ -->
<img src="adorno.svg" alt="">

Un alt="" vacío le dice a la tecnología de apoyo que ignore la imagen. No es lo mismo que un alt ausente: sin el atributo, el lector de pantalla no sabe que la imagen es decorativa y muchas veces lee el nombre del archivo en su lugar. Las imágenes decorativas también se pueden colocar con background-image en CSS, que la tecnología de apoyo ignora.

Un botón de ícono. La imagen es el único contenido de un control, así que su alternativa es el nombre del control y tiene que describir la acción, no el dibujo.

<!-- Antes 🚫 -->
<button><img src="papelera.svg"></button>

<!-- Después ✅ -->
<button><img src="papelera.svg" alt="Eliminar borrador"></button>

"Papelera" describe el dibujo. "Eliminar borrador" le dice a la persona lo que va a pasar. La misma regla vale para un ícono <svg> en línea, que puede recibir un nombre con aria-label en el botón o con un texto visualmente oculto dentro de él.

Una imagen de texto. La imagen contiene palabras.

<!-- Antes 🚫 -->
<img src="banner.png" alt="banner">

<!-- Después ✅ -->
<img src="banner.png" alt="Oferta de verano: 30% de descuento en todos los cursos hasta el viernes">

Cuando una imagen contiene texto, la alternativa debe contener el mismo texto. Mejor aún: usa texto real con estilos de CSS, que además se agranda y se traduce sin problemas.

Una imagen con enlace. Una imagen que es el único contenido de un enlace le da nombre al enlace, así que describe el destino.

<!-- Antes 🚫 -->
<a href="/"><img src="logo.svg" alt="logo"></a>

<!-- Después ✅ -->
<a href="/"><img src="logo.svg" alt="Página de inicio de TAT School"></a>

Excepciones

Las WCAG enumeran situaciones en las que no se exige un equivalente completo, y un tester tiene que conocer cada una:

• Controles y entrada de datos: si el contenido no textual es un control o acepta entrada de la persona, necesita un nombre que describa su propósito (el botón de ícono de arriba)
• Medios basados en el tiempo: en audio y video, la alternativa textual solo tiene que identificar el medio (por ejemplo, un título). Su contenido lo cubre la pauta 1.2, en la próxima lección
• Pruebas o ejercicios: cuando describir el contenido lo invalidaría (un cuestionario de "¿cómo se llama este cuadro?"), basta con una identificación descriptiva
• Experiencias sensoriales: el contenido pensado para crear una experiencia sensorial concreta, como una pieza musical o una obra de arte visual, necesita una identificación descriptiva, no un equivalente completo
• CAPTCHA: una alternativa textual tiene que identificar y describir el propósito del CAPTCHA ("Escribe los caracteres que se muestran para demostrar que no eres un robot"), y hay que ofrecer una forma alternativa en otra modalidad (por ejemplo, un CAPTCHA de audio junto al visual). Un CAPTCHA solo visual falla
• Decoración, formato, invisible: el contenido puramente decorativo, usado solo para dar formato visual o que no se muestra a las personas tiene que implementarse de forma que la tecnología de apoyo pueda ignorarlo (el alt="" de arriba)

👨🏻‍🏫 La excepción decorativa es donde los testers reprueban imágenes que cumplen. "Esta imagen tiene alt vacío" no es un hallazgo. "Esta imagen tiene alt vacío y muestra el precio del producto, que no aparece en ningún otro lugar de la página" es un hallazgo.

Cómo probarlo

1. Lista las imágenes. Desactiva las imágenes en el navegador, o usa una extensión de accesibilidad que superponga el alt de cada imagen. En DevTools también puedes ejecutar document.querySelectorAll('img:not([alt])') en la consola para encontrar imágenes sin ningún atributo alt
2. Para cada imagen, pregunta para qué sirve: informativa, decorativa, funcional (dentro de un enlace o un botón), de texto o compleja. Después evalúa si la alternativa cumple ese propósito. Léela fuera de contexto: si solo escucharas el alt, ¿te perderías algo?
3. Revisa los controles que solo tienen un ícono: botones y enlaces cuyo único contenido es una imagen o un <svg>. Inspecciona cada uno en el panel Accessibility de DevTools y lee su nombre calculado
4. Revisa los CAPTCHAs: propósito descrito y una modalidad alternativa
5. Escucha la página con un lector de pantalla, saltando entre los gráficos (en NVDA, presiona G). Todo lo que suene a nombre de archivo, "imagen" o "gráfico" sin nada más es una falla

Automatizable: en parte. axe-core detecta con seguridad una alternativa ausente (reglas como image-alt, input-image-alt, svg-img-alt y button-name). No puede decir si una alternativa es significativa, si una imagen marcada como decorativa en realidad aporta información, o si alt="foto" describe algo.

Pruébalo tú mismo 🔍

1. Abre la página de inicio de un sitio de noticias y encuentra tres imágenes: una informativa, una decorativa y una dentro de un enlace. Lee el alt de cada una en DevTools. ¿Cada una cumple el propósito de la imagen?
2. Encuentra un botón que solo tenga un ícono en cualquier sitio que uses (una lupa de búsqueda, una "X" de cerrar, un ícono de compartir). ¿Cuál es su nombre accesible en el panel Accessibility de DevTools? ¿Un usuario de control por voz sabría qué decir?
3. Encuentra un CAPTCHA en un formulario de registro o de inicio de sesión. ¿Hay una alternativa que no dependa de la vista?

Muéstrale al mundo lo que aprendiste 🌎

Para mostrarle a tu red profesional lo que aprendiste en esta lección, publica lo siguiente en LinkedIn.

Estoy haciendo el curso "WCAG 2.2 Nivel A" con @Bruno Pulis en la @Talking About Testing School, donde aprendí que el criterio 1.1.1 Contenido no textual de las WCAG trata del propósito, no de los píxeles: las imágenes informativas describen su información, las imágenes decorativas llevan alt vacío, los botones de ícono se nombran por su acción, y un CAPTCHA necesita una alternativa que no dependa de la vista. También aprendí por qué un escáner encuentra un alt ausente, pero nunca un alt sin sentido. #TalkingAboutTesting #TATSchool #WCAG22LevelA #Accessibility #WCAG

👨🏻‍🏫 Recuerda mencionarme en tu publicación. Aquí está mi perfil de LinkedIn.