Addaw, ir a inicio Donar

Fallo común WCAG 2.2

F65Imágenes y botones de imagen sin texto alternativo

Nombre oficial en el W3C: Fallo del criterio de conformidad 1.1.1 debido a omitir el atributo alt o la alternativa textual en los elementos img, area e input de tipo "image"

En pocas palabras

Este fallo ocurre cuando una imagen, un botón hecho con una imagen o una zona de un mapa de imagen no tiene ningún texto alternativo. Sin ese texto, los lectores de pantalla no pueden decir qué es ni para qué sirve. Normalmente se resuelve con el atributo alt.

Por qué es importante

Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) no ve la imagen. Solo puede leer el texto que la acompaña en el código.

Si no hay texto, algunos lectores leen el nombre del fichero, como «img_0034.png», y otros no dicen nada. Si la imagen es un enlace o un botón, la persona no sabe adónde va ni qué hace. Es especialmente grave en el logotipo que lleva a la portada o en la lupa del buscador.

Cómo evitarlo

  1. Ponga un atributo alt en cada img, en cada input type="image" y en cada area de un mapa de imagen.
  2. Si la imagen es un enlace o un botón, describa el destino o la acción: «Buscar», «Inicio».
  3. Si la imagen es solo decorativa, use alt="" (vacío) para que el lector de pantalla la ignore.
  4. Solo si no puede usar alt, recurra a aria-label o aria-labelledby.
  5. No confíe en el nombre del fichero ni en el atributo title como única alternativa.

Ejemplo práctico

Este fallo es muy común en las cabeceras: el logotipo que lleva a la portada y el botón de búsqueda hecho con una imagen. El ejemplo es la cabecera de una tienda online de ferretería.

Así no: Logotipo enlazado y botón de imagen sin texto alternativo

La imagen del enlace al inicio no tiene alt, aria-label ni aria-labelledby. El botón <input type="image"> tampoco. El lector de pantalla anuncia un enlace sin nombre o la ruta del fichero. Del botón dice solo «botón» o un genérico como «Enviar». No se sabe adónde lleva el enlace ni qué hace el botón. Para notarlo, recorra la demo con Tab y con NVDA o VoiceOver activado.

Captura de pantalla del ejemplo incorrecto: Logotipo enlazado y botón de imagen sin texto alternativo
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; flex-wrap: wrap; align-items: center; gap: 24px; }
  .buscador { display: flex; align-items: center; gap: 8px; }
  .buscador input[type="search"] { padding: 6px 8px; border: 1px solid #595959; border-radius: 4px; }
  a:focus-visible, input:focus-visible { outline: 3px solid #412c56; outline-offset: 2px; }
</style>
<header class="cabecera">
  <a href="#"><img src="data:image/svg+xml,…" width="160" height="40"></a>
  <form class="buscador" action="#" role="search">
    <label for="buscar">Buscar productos</label>
    <input type="search" id="buscar" name="q">
    <input type="image" src="data:image/svg+xml,…" width="32" height="32">
  </form>
</header>

Así sí: Texto alternativo en el logotipo y en el botón de imagen

La imagen del enlace recibe un alt con el texto del logotipo y el destino. El botón de imagen recibe alt="Buscar". Ahora los dos controles tienen nombre y el texto sustituye a la imagen sin perder información.

Pruébelo aquí:

Ver el código del ejemplo correcto
<style>
  .cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
  .buscador { display: flex; align-items: center; gap: 8px; }
  .buscador input[type="search"] { padding: 6px 8px; border: 1px solid #595959; border-radius: 4px; }
  a:focus-visible, input:focus-visible { outline: 3px solid #412c56; outline-offset: 2px; }
</style>
<header class="cabecera">
  <a href="#"><img src="data:image/svg+xml,…" width="160" height="40" alt="Casa Soler, página de inicio"></a>
  <form class="buscador" action="#" role="search">
    <label for="buscar">Buscar productos</label>
    <input type="search" id="buscar" name="q">
    <input type="image" src="data:image/svg+xml,…" width="32" height="32" alt="Buscar">
  </form>
</header>

Cómo comprobarlo

Lector de pantalla (NVDA o VoiceOver)

  1. Active NVDA (o VoiceOver en macOS) y recorra la cabecera con Tab.
  2. En NVDA, en modo exploración, pulse G para saltar de imagen en imagen y escuchar el nombre de cada una.
  3. Compruebe que el enlace del logotipo y el botón de imagen anuncian un nombre con sentido. No vale «enlace» a secas, la ruta del fichero ni un genérico como «Enviar».

Debería anunciar: «Casa Soler, página de inicio, enlace» y «Buscar, botón»

Herramientas del navegador

  1. Abra las herramientas de desarrollo (F12) e inspeccione cada img, area e input type="image".
  2. En el panel Accesibilidad de Chrome o de Firefox, mire el nombre calculado (Name). No debe estar vacío ni salir solo del nombre del fichero.
  3. En la consola, liste los elementos sospechosos con document.querySelectorAll('img:not([alt]):not([aria-label]):not([aria-labelledby]), input[type=image]:not([alt]), area:not([alt])') y revíselos uno a uno.

Validación automática

  1. axe DevTools detecta este fallo con las reglas image-alt (imágenes), input-image-alt (botones de imagen) y area-alt (zonas de mapas de imagen). WAVE lo marca como «Missing alternative text», «Linked image missing alternative text» o «Image button missing alternative text».
  2. Estas herramientas no detectan si el texto que ya existe tiene sentido. Un alt="logo" pasa la prueba automática aunque no sirva (eso es el fallo F30).

Errores frecuentes en auditorías

  • Logotipos enlazados a la portada sin alt: dejan un enlace sin nombre en todas las páginas del sitio.
  • Botones de búsqueda o de envío hechos con input type="image" sin alt, frecuentes en plantillas antiguas.
  • Imágenes añadidas por JavaScript (carruseles, carga diferida) que se crean sin alt porque el script no lo copia.
  • Mapas de imagen en los que la imagen tiene alt, pero las zonas area no.

Para saber más, en nuestro blog

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

Aplicabilidad

HTML

Descripción

Este documento describe una condición de fallo relativa a las alternativas textuales de las imágenes. Si no existe ninguna fuente de texto que proporcione una alternativa para la imagen, las tecnologías de asistencia no pueden identificar la imagen ni transmitir su propósito al usuario. El atributo alt sigue siendo la forma preferible de proporcionar texto alternativo para las imágenes. Pueden usarse los atributos de WAI-ARIA apropiados para proporcionar texto alternativo, siempre que sean compatibles con la accesibilidad. Para más información sobre la compatibilidad con la accesibilidad, consulte Documentar la compatibilidad con la accesibilidad. La especificación Accessible Name and Description Computation describe el método para obtener la alternativa textual a partir de los atributos HTML y WAI-ARIA de un elemento.

Algunas tecnologías de asistencia intentan compensar la ausencia de alternativas textuales leyendo el nombre del fichero de la imagen. Sin embargo, basarse únicamente en el nombre del fichero es insuficiente por muchos motivos. Por ejemplo, los nombres de fichero pueden no ser descriptivos (p. ej., images/nav01.gif), y las especificaciones de las tecnologías no exigen nombres de fichero descriptivos. Además, algunas tecnologías de asistencia no leen el nombre del fichero si no se ha proporcionado una alternativa textual mediante atributos HTML.

Ejemplos

Alternativa textual ausente

En el siguiente ejemplo de código, la persona que usa un lector de pantalla no sabría cuál es el propósito de la imagen.

<img src="../images/animal.jpg">

Pruebas

Procedimiento

Identificar los elementos img, area e input de tipo image. Para cada uno de estos elementos:

  1. Comprobar si está presente el atributo alt.
  2. Comprobar si está presente el atributo aria-labelledby Y hace referencia a uno o más atributos id de la página Y comprobar si aria-labelledby es compatible con la accesibilidad.
  3. Comprobar si está presente el atributo aria-label Y comprobar si aria-label es compatible con la accesibilidad.
  4. Comprobar si está presente el atributo title Y comprobar si title es compatible con la accesibilidad.

Resultados esperados

  • Si todas las comprobaciones n.º 1, n.º 2, n.º 3 y n.º 4 son falsas, se da esta condición de fallo.

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 F65 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.