Texto alternativo duplicado
Silktide encuentra imágenes enlazadas cuyo texto alternativo repite el texto justo al lado de ellas. Cuando una imagen y su texto adyacente dicen lo mismo, las personas que usan un lector de pantalla oyen las mismas palabras dos veces.
<!-- Problema: se anuncia como «Apple Apple» -->
<a href="\/apple">
<img src="apple.png" alt="Apple">
Apple
</a>
<!-- Corregido: alt vacío, el propio texto nombra el enlace -->
<a href="\/apple">
<img src="apple.png" alt="">
Apple
</a>
Por qué es importante
El existe para sustituir una imagen para quienes no pueden verla. Cuando las mismas palabras ya aparecen junto a la imagen, el texto alternativo no aporta nada: un anuncia «Apple Apple», lo que suena mal y ralentiza la escucha sin ningún beneficio. Multiplicado en una página de tarjetas de productos o avances de noticias, la repetición se vuelve realmente agotadora.
Una imagen cuyo significado queda completamente cubierto por el texto adyacente es, en la práctica, y debería marcarse como tal.
Cómo solucionarlo
- Asigna a la imagen un
alt=""vacío para que la la omita y solo lea el texto adyacente, como en el ejemplo anterior. - Como alternativa, oculta la imagen con
aria-hidden="true"; es útil cuando tu insiste en rellenar el atributoalt. - Si la imagen y el texto son dos enlaces separados al mismo destino, combínalos primero en un único enlace; consulta Enlaces adyacentes.
Cómo prueba esto Silktide
- Encontrar cada imagen que esté dentro de un enlace.
- Leer el texto accesible de la imagen: su atributo
alto unaria-label. - Compararlo con el texto visible de los elementos inmediatamente antes y después de la imagen.
- Informar de la imagen cuando ambos coincidan exactamente, sin distinguir mayúsculas y minúsculas.
Solución de problemas
El texto coincidente no forma parte del enlace
La comparación examina los elementos inmediatamente vecinos de la imagen, lo que puede incluir texto justo fuera del enlace. La duplicación sigue siendo real para una persona usuaria de lector de pantalla que navega por la página, así que se aplican las mismas soluciones.
Los textos difieren ligeramente
Solo se informan coincidencias exactas (ignorando mayúsculas y minúsculas). Casi duplicados como «Apple» junto a alt="Logotipo de Apple" superan esta comprobación, pero plantéate si el texto alternativo sigue aportando algo para quien escucha.