Fallo común Fallos comunes WCAG 2.2

F65Fallo 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 resumen

Este fallo se produce cuando una imagen, un área de un mapa de imagen o un botón de imagen no tiene ninguna alternativa textual: ni atributo alt, ni aria-label, ni aria-labelledby, ni title. Sin ella, los lectores de pantalla no pueden identificar la imagen ni explicar para qué sirve, y algunos leen el nombre del fichero, que rara vez es útil. Es uno de los fallos más frecuentes y fáciles de corregir en cualquier web.

Ejemplo práctico

Este fallo aparece sobre todo en las cabeceras: el logotipo enlazado a la portada y el botón de búsqueda hecho con una imagen. Ejemplo: la cabecera de una tienda online de ferretería.

Así no: Logotipo enlazado y botón de imagen sin alternativa textual

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

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

Captura de pantalla del ejemplo incorrecto: Logotipo enlazado y botón de imagen sin alternativa textual — Así se ve el ejemplo incorrecto.

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

Así sí: Alternativa textual en el logotipo y en el botón de imagen

Se añade a la imagen del enlace un alt con el texto del logotipo y el destino, y alt="Buscar" al botón de imagen. Ahora los dos controles tienen nombre accesible y la alternativa sustituye a la imagen sin perder información.

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

Pruébelo aquí:

Cómo comprobarlo

Lector de pantalla (NVDA o VoiceOver)

Activar NVDA (o VoiceOver en macOS) y recorrer la cabecera con Tab.
En NVDA, en modo exploración, pulsar G para saltar de imagen en imagen y escuchar el nombre de cada una.
Comprobar que el enlace del logotipo y el botón de imagen anuncian un nombre con sentido, no «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

Abrir las herramientas de desarrollo (F12) e inspeccionar cada img, area e input type="image".
En el panel Accesibilidad de Chrome (o la pestaña Accesibilidad de Firefox), revisar el nombre calculado (Name): no debe estar vacío ni proceder solo del nombre del fichero.
En la consola, listar candidatos con document.querySelectorAll('img:not([alt]):not([aria-label]):not([aria-labelledby]), input[type=image]:not([alt]), area:not([alt])') y revisarlos uno a uno.

Validación automática

axe DevTools detecta este fallo con las reglas image-alt (img), input-image-alt (input de tipo imagen) y area-alt (áreas de mapas de imagen); WAVE lo marca como error «Missing alternative text», «Linked image missing alternative text» o «Image button missing alternative text».
Lo que no detectan: si la alternativa que ya existe tiene sentido. Un alt="logo" supera la prueba automática aunque no sirva (eso es el fallo F30).

Errores frecuentes en auditorías

Logotipos enlazados a la portada sin alt, que 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 que se insertan por JavaScript (carruseles, carga diferida) y se crean sin alt porque el script no lo copia de los datos de origen.
Mapas de imagen en los que la imagen tiene alt pero los elementos area no.

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

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:

Comprobar si está presente el atributo alt.
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.
Comprobar si está presente el atributo aria-label Y comprobar si aria-label es compatible con la accesibilidad.
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

Accessible Name and Description Computation (cálculo del nombre y la descripción accesibles)

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