Texto alternativo de imagen en enlace
Silktide encuentra enlaces que contienen una imagen pero ningún texto legible de ningún tipo. Ese enlace no tiene nombre, así que las personas que no pueden ver la imagen no tienen forma de saber adónde lleva.
<!-- Problema: el enlace no tiene un nombre accesible -->
<a href="\/apple">
<img src="apple.png">
</a>
<!-- Solución: el texto alternativo nombra el enlace -->
<a href="\/apple">
<img src="apple.png" alt="Una manzana roja">
</a>
Por qué es importante
Cuando el único contenido de un enlace es una imagen, el de la imagen se convierte en el nombre del enlace. Sin él, un anuncia algo como "enlace" o recurre a leer la URL de destino o el nombre de archivo de la imagen, nada de lo cual le dice a quien escucha adónde va el enlace. La navegación construida a partir de enlaces de imagen, como logotipos y menús de iconos, se convierte en una adivinanza.
Los usuarios de teclado y de control por voz también se ven afectados: un enlace sin nombre es difícil de seleccionar con comandos de voz y carece de sentido en una lista de enlaces.
Cómo solucionarlo
- Añade texto alternativo a la imagen que describa el propósito del enlace - adónde lleva o qué hace - en lugar de describir cómo se ve la imagen. En el caso de un logotipo con enlace, "Inicio" o el nombre de tu organización es mejor que "logotipo".
- Alternativamente, añade texto visible dentro del enlace junto a la imagen; la imagen
puede entonces tener un
alt=""vacío. - Corrige las plantillas en tu donde el mismo enlace de icono sin etiqueta se repite en varias páginas.
Cómo lo comprueba Silktide
- Buscar cada imagen que está dentro de un enlace, omitiendo los enlaces ocultos para los lectores de pantalla.
- Leer todo el texto que el enlace expone a la , incluido el texto alternativo de todo lo que contiene.
- Informar de la imagen cuando ese texto combinado no contiene letras ni números, dejando el enlace sin un nombre utilizable.
A diferencia de otras comprobaciones de texto alternativo, un alt="" vacío no pasa aquí: si la imagen
es el único contenido del enlace, marcarla como decorativa deja el enlace sin nombre.
Solución de problemas
La imagen es decorativa
Dentro de un enlace sin otro texto, una imagen no puede tratarse como puramente : algo tiene que nombrar el enlace. Dale a la imagen un texto alternativo que describa el destino, o añade texto visible al enlace.
El enlace está etiquetado de otro modo
Esta comprobación lee el texto y el texto alternativo dentro del enlace. Si tu enlace está nombrado por otros medios y has verificado que se anuncia correctamente en un lector de pantalla, puedes el hallazgo.