Técnica HTML WCAG 2.2
H77Identificar el propósito de un enlace mediante el texto del enlace combinado con el elemento de lista que lo contiene
En resumen
Esta técnica permite que un enlace con texto poco explícito («Ver imágenes», «Descargar demo») resulte comprensible gracias al resto del texto del elemento de lista li que lo contiene. Los lectores de pantalla pueden consultar ese contexto, así que la persona distingue el enlace de otros similares y decide si lo sigue. Úsela en listados de noticias, productos o descargas donde varios enlaces repiten texto, y ponga la aclaración antes del enlace.
Aplicabilidad
Todas las tecnologías que contienen enlaces.
Descripción
El objetivo de esta técnica es identificar el propósito de un enlace a partir del propio enlace y del contexto del elemento de lista que lo contiene. El elemento de lista que encierra el enlace proporciona contexto a un enlace que de otro modo resultaría poco claro, cuando ese elemento de lista es el elemento de bloque antecesor más cercano. La descripción permite al usuario distinguir este enlace de otros enlaces de la página web que llevan a otros destinos y le ayuda a decidir si seguir el enlace. Tenga en cuenta que limitarse a indicar el URI del destino, en general, no es suficientemente descriptivo.
Estas descripciones resultarán más útiles al usuario si la información adicional necesaria para entender el enlace precede al enlace. Si la información adicional va después del enlace, puede generar confusión y dificultades a los usuarios de lectores de pantalla que leen la página en orden (de arriba abajo).
Ejemplos
<ul>
<li>
Check out the video report for last year's
<a href="festival.html">National Folk Festival</a>.
</li>
<li>
<a href="listen.html">Listen to the instruments</a>
</li>
<li>
Guitar Man: George Golden talks about
<a href="mkguitars.html">making guitars</a>.
</li>
</ul>Una lista de videojuegos para descargar
<ul>
<li>
<a href="zelda-tears.html">Legend Of Zelda: Tears Of The Kingdom</a>
<a href="zelda-tears-images.html">See Images</a>
<a download href="zelda-tears-demo.mp4">Download Demo</a>
</li>
<li>
<a href="metroid-prime.html">Metroid Prime</a>
<a href="metroid-prime-images.html">See Images</a>
<a download href="metroid-prime-demo.mp4">Download Demo</a>
</li>
<li>
<a href="grand-theft-auto.html">Grand Theft Auto</a>
<a href="grand-theft-auto-images.html">See Images</a>
<a download href="grand-theft-auto.mp4">Download Demo</a>
</li>
</ul>Pruebas
Procedimiento
Para cada enlace del contenido que utilice esta técnica:
- Comprobar que el enlace forma parte de un elemento de lista.
- Comprobar que el texto del enlace, combinado con el texto del elemento de lista que lo contiene, describe el propósito del enlace.
Resultados esperados
- Las comprobaciones anteriores son verdaderas.
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica H77 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
