2.4.4 Propósito del enlace (en contexto)
Criterio de éxito oficial
El propósito de cada enlace se puede determinar a partir del texto del enlace solo, o junto con su contexto determinado programáticamente, excepto cuando el propósito del enlace sea ambiguo para los usuarios en general.
Excepción de ambigüedad intencional
Si el destino de un enlace es ambiguo para todos los usuarios (no solo para los de tecnología asistiva), no es un fallo. Por ejemplo, en un juego, «Haz clic aquí para continuar la aventura» puede ser intencionalmente misterioso.
¿Qué es?
Los lectores de pantalla pueden presentar al usuario una lista de todos los enlaces de la página. Si los enlaces tienen texto genérico («leer más», «haga clic aquí», «ver»), la lista resulta inútil. El usuario no puede saber a dónde llevará cada enlace sin navegar por el contexto que lo rodea.
¿Por qué es importante?
Los enlaces descriptivos permiten navegar con confianza. Los usuarios saben qué pasará cuando activen un enlace sin necesidad de explorar el contexto circundante, especialmente útil cuando se navega entre enlaces con atajos de teclado o lector de pantalla.
¿Quién se ve afectado?
Personas ciegas: Navegan con la lista de enlaces del lector de pantalla. Los textos descriptivos les permiten ir directamente al enlace que buscan.
Personas con discapacidades cognitivas: Un texto descriptivo directo reduce la necesidad de recordar el contexto para entender a dónde lleva un enlace.
Personas con baja visión: Al ampliar la pantalla pueden perder el contexto visual. Textos de enlace descriptivos mantienen la comprensión.
Cómo implementar 2.4.4
Texto descriptivo en el enlace
La forma más directa: el propio texto del enlace describe su destino o función.
<!-- ✗ Fallo -->
<a href="/informe.pdf">Haga clic aquí</a>
<!-- ✓ Correcto -->
<a href="/informe.pdf">Descargar el informe de accesibilidad 2024 (PDF)</a>Fuentes de contexto válidas
Si el texto del enlace por sí solo no es descriptivo, el contexto que lo rodea puede completarlo. Las fuentes de contexto reconocidas son:
<li> que contiene el enlace.sr-only dentro del enlaceImágenes como enlace
Cuando un enlace contiene solo una imagen, el atributo alt de la imagen actúa como texto del enlace:
<!-- ✓ El alt describe el destino del enlace -->
<a href="/inicio">
<img src="logo.svg" alt="Ir a la página de inicio de Accesible Web">
</a>Unir imagen y texto en un solo enlace
Imagen + texto en un único enlace descriptivo
Ejemplos prácticos
Correcto Enlace descriptivo en tarjeta de artículo
Una tarjeta de blog muestra título, extracto y un enlace. El enlace usa aria-label="Leer el artículo: 5 errores WCAG más comunes" en lugar de «Leer más».
Correcto Texto oculto para contexto
Un blog usa <a href="...">Leer más<span class="sr-only"> sobre accesibilidad en formularios</span></a>. El texto visible es corto, pero el nombre accesible completo describe el destino.
Fallo «Haga clic aquí» repetido
Una página de servicios tiene 8 enlaces con el texto «Haga clic aquí». Un usuario de lector de pantalla no puede saber a cuál de los 8 servicios lleva cada uno.
Técnicas recomendadas
| Código | Técnica | Tipo |
|---|---|---|
| G91 | Proporcionar texto de enlace que describa el propósito del enlace | Suficiente |
| G189 | Proporcionar un control al inicio de la página para cambiar los textos de enlace | Suficiente |
| H30 | Proporcionar texto de enlace que describa el propósito cuando hay imágenes dentro de un enlace | Suficiente |
| H33 | Complementar el texto del enlace con el atributo title | Suficiente |
| ARIA7 | Usar aria-labelledby para proporcionar el propósito del enlace | Suficiente |
| ARIA8 | Usar aria-label para proporcionar el propósito del enlace | Suficiente |
| C7 | Usar CSS para ocultar una parte del texto del enlace | Suficiente |
Errores comunes
- Usar «leer más», «haga clic aquí», «ver», «aquí» como texto de enlace sin contexto adicional.
- Imágenes de enlace con
alt=""o sinalt. - Enlace a URL con
aria-labelvacío o que repite exactamente la URL cruda.