Falta el texto alternativo
Silktide encuentra imágenes en tus páginas que no tienen ningún texto alternativo. El texto alternativo es la descripción escrita que se lee en lugar de una imagen; sin él, las imágenes no tienen sentido para las personas que no pueden verlas.
<!-- Problema: sin atributo alt -->
<img src="apple.png">
<!-- Corregido: texto alternativo descriptivo -->
<img src="apple.png" alt="Una manzana roja">
<!-- También válido: explícitamente decorativo -->
<img src="decorative-swirl.png" alt="">
Por qué es importante
Un no tiene nada que anunciar para una imagen sin ; como mucho leerá el nombre del archivo, lo que rara vez ayuda y a menudo confunde. Las personas ciegas o con baja visión pierden lo que la imagen comunica y, si la imagen es un gráfico, un botón o un enlace, pueden no ser capaces de usar la página en absoluto.
El texto alternativo también aparece cuando las imágenes no se cargan y ayuda a los motores de búsqueda a comprender tus imágenes, por lo que corregirlo beneficia a todos los visitantes.
Cómo solucionarlo
- Añade texto alternativo a cada imagen en tu ; la mayoría tienen un campo para ello donde insertas una imagen. En el código, usa el atributo
altcomo se muestra arriba. - Describe la información o la finalidad de la imagen, no su apariencia. Para una imagen que actúa como enlace o botón, describe adónde lleva o qué hace.
- Si la imagen es puramente , ponle un
alt=""vacío para que los lectores de pantalla la omitan. No inventes texto de relleno: oír "gráfico de remolino decorativo" es peor que no oír nada.
WebAIM publica una completa guía para redactar texto alternativo.
Cómo lo prueba Silktide
- Busca cada imagen en cada página.
- Omite las imágenes que no necesitan texto alternativo: imágenes sin origen, imágenes de 1 píxel o más pequeñas (normalmente píxeles de seguimiento) e imágenes ocultas a los lectores de pantalla.
- Omite las imágenes marcadas como decorativas con el atributo
role="presentation", ya que están ocultas deliberadamente a la . - Informa de cada imagen restante que no tiene atributo
alten absoluto.
Una imagen con un alt="" vacío supera esta comprobación, pero está cubierta por
Imágenes decorativas, que te pide confirmar que es realmente decorativa. El texto alternativo que existe pero no es útil está cubierto por
Texto alternativo deficiente.
Solución de problemas
La imagen es decorativa, ¿por qué se marca?
Una imagen solo se trata como decorativa cuando así lo indica el código, mediante un alt="" vacío o role="presentation". Una imagen sin atributo alt es ambigua —la tecnología de asistencia no puede distinguir entre "decorativa" y "olvidada"—, por lo que no supera esta comprobación. Añade el atributo vacío para dejar clara la intención.
La imagen proviene de un servicio de terceros
Las imágenes generadas por servicios incrustados, como los mapas, pueden no ser editables por ti. La configuración de tu sitio web puede excluir el contenido de terceros de esta comprobación, o puedes hallazgos individuales que no puedas cambiar.