Fallo común Fallos comunes WCAG 2.2

F89Fallo de los criterios de conformidad 2.4.4, 2.4.9 y 4.1.2 debido a no proporcionar un nombre accesible a una imagen que es el único contenido de un enlace

En resumen

Este fallo se produce cuando un enlace contiene únicamente una imagen (u otro contenido no textual) sin nombre accesible: ni alt descriptivo, ni aria-label, ni aria-labelledby. El lector de pantalla no puede anunciar a dónde lleva el enlace y acaba leyendo el nombre del fichero o nada en absoluto. Revíselo en logotipos enlazados, iconos de redes sociales, miniaturas y resultados de búsqueda con imagen y texto duplicados.

Ejemplo práctico

Este fallo aparece sobre todo en las cabeceras de las tiendas online y en los pies de página: iconos de cuenta, favoritos, cesta o redes sociales que son enlaces y no llevan ningún texto, solo una imagen con el alt vacío.

Así no: Iconos enlazados con alt vacío

Las tres imágenes son el único contenido de su enlace y tienen alt="", así que los enlaces se quedan sin nombre accesible. Con NVDA o VoiceOver se oye solo «enlace» o la dirección de destino, y en la lista de enlaces aparecen tres entradas indistinguibles. Para notarlo, recorra la cabecera con Tab y el lector de pantalla activado.

<style>
  .cabecera { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #ccc; }
  .marca { margin-right: auto; font-weight: bold; color: #412c56; }
  .cabecera a { display: inline-flex; padding: 6px; }
</style>
<header class="cabecera">
  <span class="marca">Huerta de Murcia</span>
  <a href="#">
    <img src="data:image/svg+xml,…" alt="" width="28" height="28">
  </a>
  <a href="#">
    <img src="data:image/svg+xml,…" alt="" width="28" height="28">
  </a>
  <a href="#">
    <img src="data:image/svg+xml,…" alt="" width="28" height="28">
  </a>
</header>

Captura de pantalla del ejemplo incorrecto: Iconos enlazados con alt vacío — Así se ve el ejemplo incorrecto.

La demostración contiene, a propósito, el error de accesibilidad que se explica.

Así sí: Iconos enlazados con alt que describe el destino

Se ha escrito en el alt de cada imagen el propósito del enlace («Mi cuenta», «Favoritos», «Cesta de la compra»). Como la imagen es el único contenido del enlace, su texto alternativo pasa a ser el nombre accesible del enlace.

<style>
  .cabecera { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #ccc; }
  .marca { margin-right: auto; font-weight: bold; color: #412c56; }
  .cabecera a { display: inline-flex; padding: 6px; }
</style>
<header class="cabecera">
  <span class="marca">Huerta de Murcia</span>
  <a href="#">
    <img src="data:image/svg+xml,…" alt="Mi cuenta" width="28" height="28">
  </a>
  <a href="#">
    <img src="data:image/svg+xml,…" alt="Favoritos" width="28" height="28">
  </a>
  <a href="#">
    <img src="data:image/svg+xml,…" alt="Cesta de la compra" width="28" height="28">
  </a>
</header>

Pruébelo aquí:

Cómo comprobarlo

Lector de pantalla (NVDA o VoiceOver)

Recorrer la cabecera con Tab y escuchar qué se anuncia en cada icono.
Abrir la lista de enlaces (NVDA: Insert+F7; VoiceOver: rotor con VO+U) y comprobar que cada enlace de imagen tiene un nombre que permite saber a dónde lleva.
Desconfiar si se oye un nombre de archivo, una dirección o solo «enlace»: significa que el lector está aplicando heurísticas porque falta el nombre accesible.

Debería anunciar: «enlace, gráfico, Mi cuenta» (NVDA) o «Mi cuenta, enlace, imagen» (VoiceOver)

Herramientas del navegador

Abrir las herramientas de desarrollo (F12), seleccionar cada enlace en Elementos y mirar el panel Accesibilidad.
Comprobar que el campo Nombre no está vacío y que su origen es el atributo alt de la imagen (o un aria-label o aria-labelledby del enlace).
Revisar también los iconos hechos con SVG en línea o fuentes de iconos con aria-hidden="true": dejan el enlace igual de vacío.

Validación automática

axe DevTools detecta los enlaces sin nombre accesible con la regla link-name; WAVE los marca como error «Empty link» y Lighthouse con la auditoría de nombres de enlace.
Ninguna herramienta valora si el texto del alt describe bien el destino: un alt="icono" o alt="imagen" pasa la prueba automática y hay que revisarlo a mano.

Errores frecuentes en auditorías

Poner alt="" a la imagen de un enlace porque «es decorativa», cuando es el único contenido del enlace.
Iconos SVG o de fuente dentro de un enlace con aria-hidden="true" y sin aria-label ni texto oculto en el propio enlace.
Logotipo enlazado a la portada con un alt que describe la imagen («logo») en lugar del destino («Inicio» o el nombre de la entidad).
Enlaces de redes sociales en el pie solo con icono y sin nombre, de modo que el lector de pantalla lee la URL completa.

Técnica completa: traducción al español del texto del W3C

Aplicabilidad

Contenido que contiene enlaces.

Descripción

Esta condición de fallo se produce cuando un enlace contiene únicamente contenido no textual, como una imagen, y ese enlace no puede identificarse mediante un nombre accesible. El nombre accesible de un enlace se define según la especificación Accessible Name and Description Computation.

Esto también se aplica cuando en una página se usan por separado texto e imágenes para enlazar al mismo destino. En ese caso, la técnica suficiente H2: Combinar en un solo enlace una imagen y un texto adyacentes que apuntan al mismo recurso es el enfoque recomendado para reducir el número de enlaces separados y la redundancia indeseada.

Ejemplos

Resultados de búsqueda

Un sitio de búsqueda devuelve resultados que incluyen tanto un enlace de texto como un enlace de imagen al sitio encontrado. La imagen tiene un atributo alt vacío, ya que el resultado ya contiene un enlace con una descripción textual. Sin embargo, el lector de pantalla no ignora el enlace de imagen, sino que aplica heurísticas para encontrar algún texto que pueda describir el propósito del enlace. Por ejemplo, el lector de pantalla podría anunciar «football dot gif Football Scorecard» (football punto gif, marcador de fútbol).

<a href="scores.html">
  <img src="football.gif" alt="">
</a>
<a href="scores.html">Football Scoreboard</a>

Pruebas

Procedimiento

Comprobar si el enlace contiene únicamente contenido no textual.
Comprobar si el contenido no textual se ha implementado de forma que las tecnologías de asistencia puedan ignorarlo, por ejemplo mediante role="presentation" o alt="" .
Comprobar que el enlace no tiene un nombre accesible proporcionado de otra forma, como aria-label o aria-labelledby.

Resultados esperados

Si todas las comprobaciones son verdaderas, se da esta condición de fallo y el contenido falla el criterio de conformidad.

Recursos

Appropriate Use of Alternative Text, Functional Images (WebAIM: uso adecuado del texto alternativo, imágenes funcionales)
Text Alternatives for Images (alt-text) (alternativas textuales para imágenes)

Cómo lo comprobamos en ADDAW

Este fallo es uno de los que buscamos en cada auditoría de accesibilidad de ADDAW: lo documentamos con capturas y el código afectado, indicamos el criterio que incumple y la técnica suficiente con la que se corrige. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.

Solicitar una auditoría

Fuente y licencia

Traducción al español, no oficial, realizada por ADDAW a partir de la técnica F89 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.