Técnica HTML WCAG 2.2
H77Aclarar un enlace con el texto del elemento de lista que lo contiene
Nombre oficial en el W3C: Identificar el propósito de un enlace mediante el texto del enlace combinado con el elemento de lista que lo contiene
En pocas palabras
Un enlace como «Ver fotos» o «Descargar» no dice por sí solo adónde lleva. Esta técnica permite que lo aclare el resto del texto del mismo elemento de lista (li). Los lectores de pantalla pueden leer ese texto junto al enlace. Así la persona distingue entre varios enlaces iguales y decide si le interesa.
Por qué es importante
Muchas personas que usan lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) saltan de enlace en enlace con el tabulador. Si oyen cinco veces «Descargar», no saben qué descarga cada uno.
Si el enlace está dentro de un <li> con más texto, pueden pedir al lector que lea ese elemento. Así encuentran el contexto sin recorrer toda la página. Esto basta para el criterio 2.4.4 (nivel AA), pero no para el 2.4.9 (nivel AAA).
Cómo se hace
- Ponga el enlace y su aclaración dentro del mismo
<li>, sin otro bloque (p,div) entre medias. - Escriba la aclaración antes del enlace: quien escucha la página en orden la oye primero.
- Compruebe que el texto del
liy el del enlace, juntos, dicen adónde lleva. - Si es posible, prefiera un enlace que se entienda solo: «Descargar las bases (PDF)» mejor que «Descargar».
Cómo comprobarlo
- Localice los enlaces cuyo texto no se entiende solo, como «Más información» o «Descargar».
- Compruebe que están dentro de un
<li>y que ese es el bloque más cercano que los contiene. - Lea juntos el texto del
liy el del enlace y confirme que se entiende adónde lleva. - Con un lector de pantalla, llegue al enlace con el tabulador y pida leer la línea actual para oír su contexto.
Ejemplo
Listado de convocatorias en el que cada enlace de descarga se aclara con el texto de su elemento de lista.
<ul>
<li>
Ayudas al alquiler para jóvenes 2026:
<a href="bases-alquiler.pdf">descargar las bases (PDF)</a>
</li>
<li>
Becas de comedor escolar 2026:
<a href="bases-comedor.pdf">descargar las bases (PDF)</a>
</li>
</ul>Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica H77 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
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 cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica H77 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.