2.4.9 Propósito del enlace (solo enlace)
Criterio de éxito oficial
Hay un mecanismo disponible para permitir que el propósito de cada enlace se identifique solo a partir del texto del enlace, excepto cuando el propósito del enlace sea ambiguo para los usuarios en general.
Mecanismo flexible
El criterio no exige que todos los enlaces sean descriptivos por defecto. Es suficiente con ofrecer un mecanismo (como un botón de «activar vista accesible» o «mostrar nombres de enlace completos») que permita ver los enlaces descriptivos.
¿Qué es?
La prueba de autoevaluación para este criterio es sencilla: ¿puedes determinar a dónde lleva el enlace sin leer nada más a su alrededor?
¿A dónde lleva este enlace?
Descargar informe de accesibilidad 2024 (PDF)Comparación: 2.4.4 vs 2.4.9
La diferencia clave entre ambos criterios es el contexto permitido:
¿Por qué es importante?
Aunque el criterio 2.4.4 (AA) ya exige que el propósito sea determinable en contexto, muchos usuarios de lectores de pantalla navegan directamente entre los enlaces de la página. Si cada enlace es descriptivo por sí solo, la experiencia es óptima sin depender del contexto.
¿Quién se ve afectado?
Personas ciegas con lector de pantalla: Navegan con la lista de enlaces (tecla Tab o atajos específicos). Cada enlace debe ser comprensible de forma independiente.
Personas con discapacidades cognitivas: Texto de enlace claro y directo reduce la carga cognitiva de tener que leer el contexto antes de decidir hacer clic.
Cómo implementar 2.4.9
Texto descriptivo directo
La opción más sencilla: hacer que el propio texto del enlace sea siempre descriptivo, sin depender del contexto.
Vista con nombres de enlace descriptivos
En sitios donde los enlaces cortos son parte del diseño visual, ofrecer un mecanismo para activar una vista con nombres completos:
Vista con enlaces descriptivos activada:
Usar aria-label para enlaces descriptivos
<!-- Texto visible corto, nombre accesible descriptivo -->
<a href="/libro/wcag-practica"
aria-label="Ver ficha del libro Accesibilidad web práctica">
Ver ficha
</a>
<!-- O con texto oculto dentro del enlace -->
<a href="/libro/wcag-practica">
Ver ficha
<span class="sr-only"> del libro Accesibilidad web práctica</span>
</a>Ejemplos prácticos
Correcto Lista de artículos con enlaces descriptivos
Un blog reemplaza «Leer más» por «Leer el artículo: 5 errores WCAG que cometen los desarrolladores». Cada enlace es completamente descriptivo sin necesidad de leer el titular del artículo.
Correcto aria-label descriptivo en tarjetas
Una galería de proyectos usa aria-label="Ver proyecto: Rediseño accesible de Banco ABC" en cada enlace «Ver proyecto». El texto visible es corto, pero el nombre accesible es completo.
Fallo «Leer más» sin mecanismo alternativo
Un portal de noticias tiene 20 tarjetas cada una con un enlace «Leer más». No hay forma de activar una vista con nombres descriptivos. Los usuarios de lector de pantalla no pueden distinguir entre los 20 enlaces.
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 para imágenes en enlaces | Suficiente |
| C7 | Usar CSS para ocultar una parte del texto del enlace | Suficiente |
| ARIA8 | Usar aria-label para proporcionar el propósito del enlace | Suficiente |
Errores comunes
- Múltiples enlaces «Leer más», «Ver», «Aquí» sin mecanismo para ver nombres descriptivos.
aria-labelidéntico para enlaces que llevan a destinos distintos.- Usar la URL como texto de enlace visible (
https://ejemplo.com/p?id=123).