Fallo Común F89 de WCAG 2.1: No proporcionar un nombre accesible para una imagen que es el único contenido en un enlace

La accesibilidad web garantiza que todas las personas, incluidas aquellas con discapacidades visuales, puedan navegar e interactuar con el contenido de manera efectiva. Uno de los errores más comunes en la accesibilidad es el uso de imágenes como único contenido dentro de un enlace sin proporcionar un nombre accesible.

Este problema incumple los Criterios de Conformidad 2.4.4, 2.4.9 y 4.1.2 de WCAG 2.1, ya que las tecnologías de asistencia no pueden identificar adecuadamente la función del enlace si no tiene un nombre accesible.

En este artículo, exploraremos el Fallo F89, cómo afecta la accesibilidad y las soluciones recomendadas.

Acerca de este fallo

El Fallo F89 ocurre cuando un enlace contiene únicamente una imagen y esta no tiene un nombre accesible. Esto afecta directamente la usabilidad de las personas que dependen de lectores de pantalla, ya que estos no pueden identificar correctamente el propósito del enlace.

Los criterios afectados son:

• 2.4.4: Propósito del enlace (En contexto) → El propósito del enlace debe ser claro a partir de su contenido y el contexto en el que se encuentra.
• 2.4.9: Propósito del enlace (Solo el enlace) → El propósito del enlace debe ser identificable sin depender del contexto circundante.
• 4.1.2: Nombre, Rol y Valor → Los enlaces deben proporcionar un nombre accesible para ser interpretados correctamente por tecnologías de asistencia.

¿Cómo se presenta este fallo?

El problema ocurre cuando:

• Una imagen es el único contenido de un enlace, pero no tiene alt ni otro método para proporcionar un nombre accesible.
• Un enlace tiene tanto una imagen como texto, pero ambos están separados, lo que genera redundancia en la navegación.

Ejemplos

Ejemplo incorrecto 1: Enlace con una imagen sin texto alternativo

🔴 Problema: La imagen es el único contenido dentro del enlace, pero no tiene un atributo alt, lo que impide que los lectores de pantalla describan su propósito.

Solución correcta: Agregar un texto alternativo adecuado

<a href="accesibleweb.com">
<img src="logo-accessible-web.png" alt="Ir a la página de inicio de Accesible Web">
</a>

✅ ¿Qué mejora?: Ahora el lector de pantalla podrá interpretar que el enlace lleva a la sección de «Últimas noticias».

Ejemplo incorrecto 2: Texto y enlace de imagen separados

<a href=»perfil.html»>
<img src=»perfil.jpg» alt=»»>
</a>
<a href=»perfil.html»>Ver perfil</a>

🔴 Problema: Hay dos enlaces distintos que llevan al mismo destino: uno con imagen sin alt y otro con texto. Esto genera redundancia y confusión para usuarios con lectores de pantalla.

Solución correcta: Combinar imagen y texto en un único enlace

<a href=»perfil.html»>
<img src=»perfil.jpg» alt=»Foto de perfil»> Ver perfil
</a>

✅ ¿Qué mejora?: El propósito del enlace es claro y evita la duplicación de enlaces innecesarios.

Ejemplo correcto: Solución ideal

<a href=»contacto.html» aria-label=»Formulario de contacto»>
<img src=»contacto.png» alt=»»>
</a>

✅ ¿Qué mejora?: Se ha añadido aria-label="Formulario de contacto", proporcionando una descripción accesible del enlace sin depender solo del atributo alt.

Errores comunes y cómo evitarlos

Errores frecuentes:

• Usar imágenes dentro de enlaces sin alt.
• Crear enlaces con imágenes y texto separados en lugar de combinarlos.
• Depender de atributos visuales sin un nombre accesible.

Cómo evitar estos errores:

• Siempre incluir un alt descriptivo en las imágenes dentro de enlaces.
• Si hay texto y una imagen con el mismo enlace, combinarlos en un solo <a>.
• Si la imagen no tiene un significado propio, usar aria-label o aria-labelledby para proporcionar una descripción accesible.

Preguntas frecuentes sobre el fallo común F89

¿Qué sucede si la imagen es puramente decorativa?

Si la imagen no aporta información relevante, usa alt="" para que los lectores de pantalla la ignoren.

¿Es obligatorio usar aria-label en imágenes dentro de enlaces?

No es obligatorio si alt ya proporciona la información necesaria. aria-label es útil cuando alt no es suficiente o no se puede usar.

¿Cómo puedo verificar si mis enlaces con imágenes son accesibles?

Puedes usar herramientas como WAVE, axe DevTools o el Inspector de accesibilidad de Chrome para comprobar si las imágenes dentro de enlaces tienen un nombre accesible.

¿Es mejor usar alt o aria-label?

Si la imagen transmite información útil, usa alt. Si no puedes modificar el HTML de la imagen, aria-label es una buena alternativa.

¿Cómo evitar enlaces duplicados en la navegación?

Combina imágenes y texto en un solo <a> en lugar de crear enlaces separados para cada elemento.

¿Qué ocurre si el alt de una imagen dentro de un enlace está vacío?

El lector de pantalla no podrá identificar su propósito, lo que hace que el enlace sea inaccesible.

Recursos relacionados

• Guía oficial WCAG 2.1 para el fallo común F89: Incumplimiento de los Criterios de Conformidad 2.4.4, 2.4.9 y 4.1.2 debido a no proporcionar un nombre accesible para una imagen que es el único contenido en un enlace
• Comprender el criterio de éxito 2.4.4: Propósito del enlace (en contexto)
• Comprender el criterio de éxito 2.4.9: Propósito del enlace (solo enlace)
• Comprender el criterio de éxito 4.1.2: Nombre, Rol, Valor
• Uso apropiado de texto alternativo e imágenes funcionales
• Alternativas de texto para imágenes (alt-text)
• H2: Combinar enlaces de imágenes y texto adyacentes para el mismo recurso
• H30: Proporcionar texto de enlace que describa el propósito de un enlace para elementos de anclaje
• ARIA7: Uso de aria-labelledby para crear enlaces
• ARIA8: Uso de aria-label para crear enlaces

Pruebas y validación

Procedimiento

1. Verificar si los enlaces contienen solo imágenes.
2. Comprobar si la imagen tiene un alt adecuado o un aria-label.
3. Revisar con herramientas de accesibilidad si el propósito del enlace es claro.

Resultados esperados

• ✅ Si la imagen dentro del enlace tiene un nombre accesible, el contenido cumple con WCAG 2.1.
• ❌ Si el enlace no tiene un nombre accesible, falla los criterios 2.4.4, 2.4.9 y 4.1.2 y debe corregirse.

No proporcionar un nombre accesible para una imagen dentro de un enlace puede dificultar la navegación para usuarios con discapacidad visual. Garantizar que los enlaces tengan descripciones claras es clave para una web accesible.

¡Optimiza la accesibilidad de tu sitio y mejora la experiencia para todos los usuarios! 🚀