img-alt-quality

El texto alternativo de <img> debe ser apropiado (revisión manual)

manualWCAG 1.1.1 (A)confianza: mediumgravedad: minorperceivable

Marca los elementos <img> con texto alternativo no vacío para revisión manual de su idoneidad, e indica cuándo el alt parece un nombre de archivo, una dirección web, un marcador de posición, un comienzo del tipo "image of" o es muy largo.

Ámbito de aplicación. Se aplica a los elementos <img> cuyo atributo alt está presente y no vacío. El elemento debe estar incluido en el árbol de accesibilidad, y un atributo role que se resuelve en presentation/none (su primer token que nombra un rol conocido, sin distinguir mayúsculas de minúsculas) lo deja fuera del alcance salvo que sea enfocable, en cuyo caso recupera su role. Un <img> sin ningún alt es un fallo de img-alt-present, y uno con alt="" es la revisión de img-alt-decorative.

Resultado esperado. Se requiere revisión manual para confirmar que el texto alternativo proporcionado es preciso y apropiado. Un texto alternativo que parece algo distinto de una descripción recibe su propio resumen y su propia sugerencia: un nombre de archivo (o un alt igual al propio nombre de archivo de la imagen), una dirección web, solo símbolos (como "★★★★☆"), un marcador de posición o una palabra genérica como "image" o "TBD", un comienzo que dice que es una imagen ("image of", "photo of"), o un alt de más de 150 caracteres. Cada hallazgo sigue siendo cantTell: cada uno de estos casos puede ser correcto en su contexto.

Qué informa un hallazgo.

  • altSignal: lo que hizo que el texto alternativo pareciera sospechoso, solo en esos hallazgos: file-name, url, symbols, placeholder, redundant-prefix o too-long. No aparece en un hallazgo con un texto alternativo corriente. Cuando se aplican varios, se informa el primero en ese orden.
  • length: la longitud del texto alternativo en caracteres, solo en too-long.
  • limit: la longitud por encima de la cual el alt se considera demasiado largo (150), solo en too-long.
  • reasonCode: IMAGE_ONLY_CONTROL_CONTENT cuando la imagen es el único contenido de un enlace o un botón (sin texto ni ninguna otra imagen dentro), por lo que su alt es el nombre del control (H30), con controlContent nombrando el rol del control (link o button); TEXT_ALTERNATIVE_REVIEW en los demás casos.

Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.

Ejemplos

can't tell
<img src="chart.png" alt="image">

Hay un alt no vacío presente, pero "image" repite el tipo de elemento en lugar de describir lo que muestra el gráfico. El hallazgo indica que el alt es un marcador de posición o una palabra genérica (data.details.altSignal: "placeholder"), como lo hace para un nombre de archivo, una dirección web, un comienzo del tipo "image of" o un alt de más de 150 caracteres.

can't tell
<img src="team.jpg" alt="Our support team at the 2025 meetup">

Un texto alternativo corriente recibe la revisión general: solo una persona puede saber si describe bien la imagen en su contexto.

n/a
<img src="border.png" alt="">

Un alt vacío marca la imagen como decorativa; esa es la cuestión de img-alt-decorative, no la de esta regla.

Cómo comprobarlo

Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.

IMAGE_ONLY_CONTROL_CONTENT

  1. Localizar el enlace o el botón que indica el informe; la imagen es su único contenido, así que su alt es el nombre del control.
  2. Leer el texto alternativo y luego activar el control o comprobar su destino para saber qué hace.
  3. Decidir si el alt dice lo que hace el control («Buscar», «Inicio»), y no qué aspecto tiene la imagen.

Se cumple. El texto alternativo indica la finalidad o el destino del control.

No se cumple. El texto alternativo no dice lo que hace el control, por ejemplo un nombre de archivo, una dirección, una palabra genérica o símbolos, lo que incumple WCAG 1.1.1 (H30, F30).

TEXT_ALTERNATIVE_REVIEW

  1. Localizar la imagen que indica el informe y leer su texto alternativo (el informe da el motivo por el que pareció sospechoso, si lo hay).
  2. Observar la imagen y su contexto, y preguntarse qué muestra que sea importante para la página.
  3. Si la alternativa textual solo nombra la imagen, como es habitual en gráficos y diagramas, los detalles pueden estar en otro sitio: en un pie, un texto o una tabla junto a ella, o en un enlace al lado. Solo cuenta si un usuario de lector de pantalla puede encontrarlo desde la imagen y da todo lo que muestra la imagen.
  4. Decidir si el alt dice lo importante, o nombra la imagen mientras esa descripción da el resto; un nombre de archivo, una dirección web o una palabra genérica como «imagen» no hace ninguna de las dos cosas.

Se cumple. El texto alt transmite lo que muestra la imagen y necesita el usuario, o nombra la imagen y una descripción a la que un usuario de lector de pantalla llega desde ella da el resto.

No se cumple. Ni el texto alt ni una descripción accesible desde la imagen transmiten su contenido (por ejemplo, el alt es un nombre de archivo, una dirección o una palabra genérica), lo que incumple WCAG 1.1.1 (F30).

Reglas relacionadas

Ver código fuente