Addaw, ir a inicio Donar

Fallo común WCAG 2.2

F89Enlaces con solo una imagen y sin nombre accesible

Nombre oficial en el W3C: Fallo 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 pocas palabras

Este error ocurre cuando un enlace solo contiene una imagen o un icono, y esa imagen tiene el texto alternativo vacío. El enlace se queda sin nombre. El lector de pantalla no sabe a dónde lleva y lee «enlace», el nombre del archivo o la dirección. El texto alternativo debe decir el destino del enlace.

Por qué es importante

Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) anuncia cada enlace por su nombre. Si el enlace solo tiene una imagen con alt="", no tiene nombre.

  • La persona oye «enlace» o algo como «icono-cesta punto svg». No sabe qué pasará al pulsarlo.
  • En la lista de enlaces aparecen varias entradas iguales o sin sentido.
  • Quien usa control por voz no tiene un nombre que decir para activarlo.

Cómo evitarlo

  1. Si la imagen es lo único que hay dentro del enlace, no la trate como decorativa. Su alt debe decir a dónde lleva el enlace: «Cesta de la compra», «Inicio», «Facebook de la entidad».
  2. Si el icono es un SVG o una fuente de iconos con aria-hidden="true", ponga un aria-label en el enlace o un texto oculto visualmente.
  3. Si la imagen y un texto llevan al mismo sitio, júntelos en un único enlace. Entonces la imagen sí puede tener alt="".
  4. Describa el destino, no el dibujo: mejor «Inicio» que «logotipo».

Ejemplo práctico

Este fallo es muy común en las cabeceras de las tiendas online y en los pies de página. Los iconos de cuenta, favoritos, cesta o redes sociales son enlaces sin texto. Solo llevan una imagen, y esa imagen tiene el alt vacío.

Así no: Iconos enlazados con el alt vacío

Cada imagen es lo único que hay dentro de su enlace y tiene alt="". Por eso los enlaces se quedan sin nombre accesible. NVDA o VoiceOver solo dicen «enlace» o la dirección de destino. En la lista de enlaces aparecen tres entradas que no se distinguen. Para notarlo, recorra la cabecera con Tab y el lector de pantalla encendido.

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

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

Ver el código del ejemplo incorrecto
<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>

Así sí: Iconos enlazados con un alt que dice el destino

Ahora el alt de cada imagen dice para qué sirve el enlace: «Mi cuenta», «Favoritos», «Cesta de la compra». Como la imagen es lo único que hay en el enlace, su texto alternativo se convierte en el nombre del enlace.

Pruébelo aquí:

Ver el código del ejemplo correcto
<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>

Cómo comprobarlo

Lector de pantalla (NVDA o VoiceOver)

  1. Recorra la cabecera con Tab y escuche qué se anuncia en cada icono.
  2. Abra la lista de enlaces (NVDA: Insert+F7; VoiceOver: rotor con VO+U). Cada enlace de imagen debe tener un nombre que diga a dónde lleva.
  3. Si oye un nombre de archivo, una dirección o solo «enlace», falta el nombre accesible. El lector está intentando adivinarlo.

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

Herramientas del navegador

  1. Abra las herramientas del navegador (F12). Seleccione cada enlace en Elementos y mire el panel Accesibilidad.
  2. Compruebe que el campo Nombre no está vacío. Debe venir del alt de la imagen, o de un aria-label o aria-labelledby del enlace.
  3. Revise también los iconos hechos con SVG o con fuentes de iconos que llevan aria-hidden="true". Dejan el enlace igual de vacío.

Validación automática

  1. axe DevTools detecta los enlaces sin nombre con la regla link-name. WAVE los marca con el error «Empty link». Lighthouse los revisa en su auditoría de nombres de enlace.
  2. Ninguna herramienta sabe si el alt describe bien el destino. Un alt="icono" o alt="imagen" pasa la prueba automática, así que hay que revisarlo a mano.

Errores frecuentes en auditorías

  • Poner alt="" a la imagen de un enlace por ser «decorativa», cuando es lo único que hay en el enlace.
  • Iconos SVG o de fuente con aria-hidden="true" dentro de un enlace sin aria-label ni texto oculto.
  • Logotipo enlazado a la portada con un alt que describe la imagen («logo») en vez del destino («Inicio» o el nombre de la entidad).
  • Enlaces a redes sociales en el pie solo con icono y sin nombre. El lector de pantalla lee la dirección completa.

Para saber más, en nuestro blog

Ver el texto completo del W3C (traducción al español)

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

  1. Comprobar si el enlace contiene únicamente contenido no textual.
  2. 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="" .
  3. 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

Cómo lo comprobamos en ADDAW

Este error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.

Solicitar una auditoría

Basado en la técnica F89 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.