2526UFV1.1.1-H-002
Edición de la página como formulario
1. Información básica
Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_1/1.1_Texto_Alternativo/1.1.1-H
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.1.2. Código HTML:
<div class="card">
<a href="/producto/x200">
<img src="x200.jpg" alt="Cámara X200">
</a>
<a href="/producto/x200">Cámara X200</a>
</div>
Explicación del problema detectado:
El problema es que hay dos enlaces consecutivos distintos (uno en la imagen y otro en el texto) que llevan exactamente al mismo destino, en vez de estar combinados en un único enlace.
Esto hace que se “repita” el mismo destino en la navegación, algo que el criterio 1.1.1‑H indica que debe evitarse combinando imagen y texto en un solo enlace.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Las personas con discapacidad visual total que navegan con lector de pantalla o línea braille pueden encontrarse con dos enlaces seguidos que apuntan a lo mismo, lo que genera redundancia y confusión durante el recorrido por enlaces.
Además, esa duplicidad vuelve la navegación menos eficiente porque obliga a escuchar/recorrer más elementos interactivos sin aportar información nueva.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.2.2 Código HTML:
<div class="card">
<a href="/producto/x200" class="card-link">
<img src="x200.jpg" alt="">
<span>Cámara X200</span>
</a>
</div>
Explicación de la solución aplicada:
Se ha combinado la imagen y el texto dentro de un único <a>, evitando “enlaces consecutivos al mismo recurso”, tal como exige el criterio 1.1.1‑H.
Como el enlace ya tiene un texto visible (“Cámara X200”) que describe el destino, la imagen se trata como decorativa dentro del enlace y se usa alt="" para evitar redundancias innecesarias entre el texto del enlace y el texto alternativo.
De esta forma el propósito del enlace queda claro por el texto del ancla, que es una buena práctica para que el enlace sea comprensible y usable con tecnologías de apoyo.
