Fallo Común F30 de WCAG 2.1: Uso de textos alternativos incorrectos

La accesibilidad digital es fundamental para garantizar que todas las personas, incluidas aquellas con discapacidad, puedan acceder a la información de manera equitativa. Uno de los requisitos esenciales de las WCAG 2.1 es proporcionar textos alternativos adecuados para el contenido no textual, como imágenes y videos. Sin embargo, el fallo F30 ocurre cuando se utilizan textos alternativos que no cumplen su función, como nombres de archivos o texto genérico que no aporta información significativa.

Esta técnica se relaciona con los criterios de éxito 1.1.1: Contenido no textual y 1.2.1: Solo audio y solo video (pregrabado) y se aplica a todas las tecnologías.

Acerca de este fallo

Este fallo se da cuando:

• Se utilizan nombres de archivos como texto alternativo (por ejemplo, imagen1.jpg o gráfico2024.png).
• Se colocan marcadores de posición irrelevantes como «imagen», «foto», «video» o «contenido multimedia».
• Se emplean etiquetas sin descripción adecuada, como «gráfico», «elemento 1» o «ilustración».

Estos errores afectan principalmente a usuarios con discapacidad visual que dependen de lectores de pantalla para interpretar el contenido de una página web. Si la información no está disponible o es incorrecta, la experiencia del usuario se ve gravemente afectada.

Ejemplos

Ejemplo incorrecto 1: Uso de nombres de archivo como texto alternativo

Código incorrecto:

<img src="grafico-ventas.jpg" alt="grafico-ventas.jpg">

🔴 Problema: El texto alternativo es simplemente el nombre del archivo, lo que no proporciona información sobre el contenido de la imagen.

Solución correcta

Código corregido:

<img src="grafico-ventas.jpg" alt="Gráfico que muestra el aumento de ventas en el último trimestre.">

✅ ¿Qué mejora?: Se proporciona una descripción significativa de la imagen, permitiendo que los usuarios con discapacidad visual comprendan su contenido.

Ejemplo incorrecto 2: Uso de marcadores de posición

Código incorrecto:

<img src="producto.png" alt="imagen">

🔴 Problema: El texto alternativo «imagen» no proporciona ninguna información útil sobre la imagen mostrada.

Solución correcta

Código corregido:

<img src="producto.png" alt="Zapatillas deportivas azules con suela blanca.">

✅ ¿Qué mejora?: Se describe el producto de manera clara para que los usuarios con discapacidad visual puedan entender su contenido.

Errores comunes y cómo evitarlos

Errores frecuentes:

• Utilizar nombres de archivo como texto alternativo.
• Dejar el atributo alt vacío en imágenes informativas.
• Emplear descripciones genéricas como «imagen» o «foto».
• No proporcionar texto alternativo en videos sin subtítulos o transcripciones.

Cómo evitar estos errores:

• Escribir descripciones claras y precisas en el atributo alt.
• Usar alt="" solo en imágenes decorativas que no aporten información relevante.
• Proporcionar transcripciones para contenido en video o audio.
• Validar la accesibilidad con herramientas como WAVE o Axe DevTools.

Preguntas frecuentes sobre el fallo común F30

¿Por qué es importante un buen texto alternativo?

Porque permite a los usuarios con discapacidad visual comprender el contenido de la imagen.

¿Cuándo se debe dejar el atributo alt vacío?

Cuando la imagen es meramente decorativa y no aporta información relevante.

¿Qué hacer si una imagen contiene mucho texto importante?

Se debe proporcionar el texto en la página o en un longdesc.

¿Es suficiente con poner «logo de la empresa» en el alt?

No, es mejor indicar el nombre de la empresa y su propósito (ejemplo: «Logotipo de Apple, enlaza a la página principal»).

¿Cómo se deben etiquetar los videos?

Se debe proporcionar una descripción en texto y una transcripción.

¿Los emojis necesitan texto alternativo?

Sí, para que los lectores de pantalla los interpreten correctamente.

Recursos relacionados

• Guía oficial WCAG 2.1 para el fallo común F30: Incumplimiento del Criterio de Conformidad 1.1.1 y 1.2.1 debido al uso de textos alternativos que no lo son (por ejemplo, nombres de archivos o texto de marcador de posición)
• Comprender el criterio de éxito 1.1.1: Contenido no textual
• Comprender el criterio de éxito 1.2.1: Solo audio y solo video (pregrabado)

Pruebas y validación

Procedimiento:

1. Revisar cada imagen, video o contenido no textual en la página.
2. Verificar que el atributo alt tenga una descripción adecuada.
3. Asegurarse de que los textos alternativos sean significativos y no genéricos.
4. Usar herramientas de validación de accesibilidad (ejemplo: WAVE o Axe DevTools).
5. Probar con un lector de pantalla para evaluar la comprensión del contenido.

Resultados esperados:

• ✅ Si todos los textos alternativos describen correctamente el contenido no textual, el criterio de conformidad se cumple.
• ❌ Si hay nombres de archivo o marcadores de posición en el atributo alt, se debe corregir para cumplir con WCAG.

Garantizar textos alternativos adecuados es esencial para la accesibilidad digital. Asegúrate de que todas las imágenes y contenido multimedia tengan descripciones claras y significativas. ¿Necesitas mejorar la accesibilidad de tu web? Contáctanos para asesoría experta.