WCAG 2.4.9: Propósito del enlace (solo enlace)

Qué significa esta regla

\n

WCAG 2.4.9 — Propósito del enlace (solo enlace) es un criterio de éxito de nivel AAA en WCAG 2.1 y 2.2. Exige que el propósito de cada enlace pueda determinarse únicamente a partir del texto del enlace. A diferencia de su equivalente de nivel AA, WCAG 2.4.4 (Propósito del enlace — en contexto), que permite inferir el propósito del enlace a partir del contexto circundante, como un encabezado, un párrafo o una celda de tabla, 2.4.9 es significativamente más estricta: el propio texto del enlace debe ser completamente auto-descriptivo, sin depender en absoluto del contenido circundante.

\n

El criterio se aplica a todos los hipervínculos creados con el elemento <a>, así como a cualquier elemento interactivo que tenga un nombre accesible y se comporte como un enlace. Esto incluye enlaces de imagen (donde el atributo alt de la imagen o un aria-label proporcionan el nombre accesible), enlaces con estilo de botón y enlaces basados en SVG. El nombre accesible del enlace — calculado a partir de su texto visible, aria-label, aria-labelledby o texto alternativo de la imagen — debe, por sí solo, comunicar adónde lleva el enlace o qué hace.

\n

Qué se considera un cumplimiento: Un enlace cumple con 2.4.9 cuando una persona que solo lee el texto del enlace — y nada más en la página — puede entender con confianza el destino o la función del enlace. Por ejemplo, un enlace que dice "Descargar el Informe Anual de Accesibilidad 2024 (PDF, 2.4 MB)" cumple porque toda la información relevante está contenida en el propio texto del enlace. Un enlace que dice "Leer el artículo completo: Cómo redactar texto de enlace accesible" también cumple. Un enlace de imagen con alt='Ver planes de precios' cumple porque el texto alternativo es completamente descriptivo.

\n

Qué se considera un incumplimiento: Los enlaces cuyo texto es "haz clic aquí", "leer más", "más información", "esto", "aquí" o cualquier otra frase que solo tenga significado en contexto incumplen este criterio. Del mismo modo, un enlace que envuelve una imagen cuyo atributo alt está vacío o ausente, dejando el enlace sin nombre accesible, incumple. Los enlaces que usan aria-label o aria-labelledby pero cuyo nombre accesible calculado sigue siendo vago también incumplen.

\n

Excepciones oficiales: WCAG señala explícitamente una excepción: cuando el propósito del enlace es intencionalmente ambiguo para todas las personas usuarias, no solo para quienes tienen discapacidad. Por ejemplo, un enlace de adelanto en un juego de misterio que dice "Continuar" (donde la ambigüedad es parte intencional del diseño) no se consideraría un incumplimiento, siempre que la ambigüedad se aplique de forma universal. Esta excepción es limitada y no debe usarse como resquicio para justificar malas prácticas en el texto de los enlaces.

\n\n

Por qué es importante

\n

Un texto de enlace significativo es una de las mejoras de accesibilidad más impactantes que puede hacer un sitio web. Las poblaciones más directamente afectadas por un texto de enlace vago son las personas usuarias de lectores de pantalla, quienes navegan con teclado, quienes tienen discapacidades cognitivas y quienes usan software de control por voz.

\n

Las personas usuarias de lectores de pantalla — normalmente personas ciegas o con baja visión grave — suelen navegar por una página mostrando una lista de todos los enlaces. Lectores de pantalla populares como NVDA, JAWS y VoiceOver ofrecen esta función, que extrae el nombre accesible de cada enlace y los presenta como una lista independiente. Cuando los enlaces dicen "haz clic aquí", "leer más" o "detalles", esta lista se convierte en una serie de entradas idénticas y sin significado. La persona usuaria no tiene forma de determinar qué enlace activar sin leer el contenido circundante de cada uno, una tarea lenta, frustrante y a menudo imposible, especialmente en páginas con docenas de enlaces.

\n

Según la Organización Mundial de la Salud, aproximadamente 2.2 mil millones de personas en todo el mundo tienen algún tipo de discapacidad visual, de las cuales al menos 1 mil millones tienen una afección que podría haberse prevenido o que aún no ha sido abordada. Incluso entre las personas sin discapacidad visual, las personas con discapacidad motora que dependen de acceso por pulsador o navegación por voz (usando herramientas como Dragon NaturallySpeaking) se benefician enormemente del texto de enlace descriptivo porque pueden activar un enlace directamente pronunciando o seleccionando su nombre. Los grupos con discapacidad cognitiva — incluidas personas con déficit de atención, problemas de memoria o dificultades de lectura — también se benefician porque las etiquetas de enlace claras reducen la carga cognitiva y la necesidad de releer el contexto.

\n

Considere un escenario del mundo real: una ciudadana turca que visita el sitio web de un hospital público para reservar una cita. La página tiene tres botones de servicio, cada uno con la frase "Randevu Al" (Reservar cita) sin más contexto en el texto del enlace. Una persona ciega que abre la lista de enlaces de su lector de pantalla ve "Randevu Al", "Randevu Al" y "Randevu Al": tres opciones indistinguibles. No puede determinar qué enlace es para cardiología, cuál es para medicina general y cuál es para radiología sin volver a navegar al contexto. Cumplir con WCAG 2.4.9 requeriría que cada enlace dijera "Randevu Al — Kardiyoloji", "Randevu Al — Genel Pratisyen" y "Randevu Al — Radyoloji", haciendo que el propósito sea inequívoco solo a partir del texto del enlace.

\n

Más allá de la accesibilidad, el texto de enlace descriptivo tiene un valor significativo para SEO. Los rastreadores de motores de búsqueda ponderan el texto ancla al indexar páginas, y los enlaces descriptivos mejoran las señales de relevancia tanto para la página de origen como para la de destino. Sustituir texto ancla genérico por frases significativas mejora la capacidad de descubrimiento y reduce las tasas de rebote, en beneficio de todas las personas usuarias.

\n\n

Reglas relacionadas de Axe-core

\n

WCAG 2.4.9 requiere pruebas manuales porque las herramientas automatizadas no pueden determinar el significado o la intención: pueden señalar la ausencia de un nombre accesible, pero no pueden juzgar si un nombre accesible dado es suficientemente descriptivo.

\n

\n
• Se requiere prueba manual — link-name (regla de axe): La regla link-name de axe-core detecta enlaces que no tienen ningún nombre accesible (por ejemplo, un elemento <a> sin contenido de texto, sin aria-label, sin aria-labelledby y sin imagen con un atributo alt no vacío). Aunque esta regla detecta enlaces completamente vacíos, no puede evaluar si el nombre accesible existente es significativo. Un enlace que dice "aquí" pasará la regla automatizada link-name porque técnicamente tiene un nombre accesible, pero incumple WCAG 2.4.9 porque ese nombre no es auto-descriptivo. Esta es precisamente la razón por la que 2.4.9 se marca como criterio que requiere revisión manual: una persona debe leer cada etiqueta de enlace y juzgar si comunica su propósito de forma aislada.
\n
• Se requiere prueba manual — identical-links-same-purpose: Axe-core incluye una regla que señala conjuntos de enlaces con nombres accesibles idénticos pero destinos diferentes. Se trata de una heurística que saca a la luz posibles incumplimientos de 2.4.9, por ejemplo, varios enlaces "Leer más" que apuntan a artículos distintos. Sin embargo, incluso esta regla requiere confirmación humana, porque nombres idénticos que apuntan al mismo destino no constituyen un incumplimiento. La regla plantea candidatos para revisión, no fallos definitivos.
\n
• Por qué la automatización es insuficiente: Se requiere comprensión del lenguaje natural para evaluar el propósito de un enlace. Una herramienta automatizada puede calcular que el nombre accesible de un enlace es la cadena "detalles", pero no puede saber que esta cadena no describe un destino. Del mismo modo, una herramienta no puede evaluar si "Ver" es suficiente (quizá lo sea en una interfaz muy específica y de alcance limitado) o si "Ver el estado financiero del tercer trimestre" es mejor. El juicio humano, idealmente combinado con pruebas con lector de pantalla, es el único método fiable.
\n

\n\n

Cómo hacer las pruebas

\n

\n
1. Línea base de escaneo automatizado: Ejecute axe DevTools (extensión del navegador) o Lighthouse en la página objetivo. En axe DevTools, busque cualquier incumplimiento de la regla link-name; estos representan enlaces sin ningún nombre accesible y son fallos garantizados de 2.4.9. Exporte los resultados y anote todos los enlaces señalados. Este paso no completa su auditoría de 2.4.9; solo identifica los fallos más evidentes.
\n
2. Genere una lista de enlaces con un lector de pantalla: Abra la página en Firefox con NVDA instalado. Presione Insert + F7 (el atajo de Lista de elementos de NVDA) y seleccione "Enlaces" en el cuadro de diálogo. Revise la lista completa de etiquetas de enlace. Pregúntese: ¿podría una persona que solo leyera esta lista entender el destino o la función de cada enlace? Repita esta prueba en JAWS presionando Insert + F7 para abrir el cuadro de diálogo Lista de enlaces, y en VoiceOver en Safari (macOS) presionando VO + U para abrir el Rotor y navegando hasta Enlaces. Señale cualquier enlace cuya etiqueta sea ambigua, esté duplicada con un destino diferente o esté compuesta únicamente por una cadena de URL.
\n
3. Auditoría de tabulación con teclado: Navegue por la página usando solo la tecla Tab. Cada vez que el foco se sitúe en un enlace, lea únicamente el texto visible del elemento enfocado (o escuche el anuncio del lector de pantalla). Sin mirar el contenido circundante, decida si el propósito del enlace es claro. Documente cada enlace cuyo propósito no sea claro solo a partir del texto del enlace.
\n
4. Comprobación de enlaces de imagen: Identifique todos los enlaces que contengan solo una imagen (sin texto visible). Inspeccione cada uno con las herramientas de desarrollo del navegador para verificar que la imagen tenga un atributo alt no vacío y descriptivo, o que el enlace tenga un aria-label descriptivo. El cálculo del nombre accesible debe dar como resultado una frase significativa.
\n
5. Comprobación de texto de enlace duplicado: Busque en el HTML de la página múltiples instancias del mismo texto de enlace (por ejemplo, varios anclajes "Leer más" o "Comprar ahora"). Verifique si estos enlaces apuntan al mismo destino (aceptable) o a destinos diferentes (un incumplimiento de 2.4.9, a menos que se desambigüen mediante aria-label o aria-labelledby).
\n
6. Prueba de control por voz: Usando Dragon NaturallySpeaking o Windows Voice Access, intente activar enlaces pronunciando su etiqueta visible. Si la etiqueta pronunciada es ambigua y aparecen múltiples candidatos (por ejemplo, al decir "Haz clic en Leer más" se resaltan varios enlaces), esto confirma un fallo de usabilidad en el mundo real alineado con 2.4.9.
\n

\n\n

Cómo corregirlo

\n

Texto genérico de enlace "Leer más" — Incorrecto

\n

<!-- Fails 2.4.9: link purpose cannot be determined from link text alone -->\n<article>\n  <h3>How to Improve Your Website's Accessibility Score</h3>\n  <p>Accessibility improvements can dramatically increase your user base...</p>\n  <a href='/blog/improve-accessibility-score'>Read more</a>\n</article>

\n

Texto genérico de enlace "Leer más" — Correcto

\n

<!-- Passes 2.4.9: link purpose is fully clear from link text alone -->\n<article>\n  <h3>How to Improve Your Website's Accessibility Score</h3>\n  <p>Accessibility improvements can dramatically increase your user base...</p>\n  <a href='/blog/improve-accessibility-score'>\n    Read more about improving your website's accessibility score\n  </a>\n</article>\n\n<!-- Alternative: visually show short text but provide full accessible name -->\n<a href='/blog/improve-accessibility-score'\n   aria-label='Read more about improving your website's accessibility score'>\n  Read more\n</a>

\n\n

Enlace solo de imagen sin texto alternativo — Incorrecto

\n

<!-- Fails 2.4.9: image link has no accessible name; screen readers announce URL or nothing -->\n<a href='https://accsible.com/pricing'>\n  <img src='/icons/pricing.svg' alt=''>\n</a>

\n

Enlace solo de imagen sin texto alternativo — Correcto

\n

<!-- Passes 2.4.9: alt text gives the link a fully descriptive accessible name -->\n<a href='https://accsible.com/pricing'>\n  <img src='/icons/pricing.svg' alt='View Accsible pricing plans'>\n</a>\n\n<!-- Alternative using aria-label on the anchor -->\n<a href='https://accsible.com/pricing' aria-label='View Accsible pricing plans'>\n  <img src='/icons/pricing.svg' alt=''>\n  <!-- alt='' hides decorative image from AT; aria-label on <a> provides the name -->\n</a>

\n\n

Múltiples enlaces idénticos "Satın Al" (Comprar ahora) — Incorrecto

\n

<!-- Fails 2.4.9: three identical link labels pointing to different products -->\n<div class='product-card'>\n  <h3>Temel Plan</h3>\n  <a href='/plans/basic'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Profesyonel Plan</h3>\n  <a href='/plans/pro'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Kurumsal Plan</h3>\n  <a href='/plans/enterprise'>Satın Al</a>\n</div>

\n

Múltiples enlaces idénticos "Satın Al" (Comprar ahora) — Correcto

\n

<!-- Passes 2.4.9: each link has a unique, descriptive accessible name via aria-label -->\n<div class='product-card'>\n  <h3>Temel Plan</h3>\n  <a href='/plans/basic' aria-label='Temel Planı Satın Al'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Profesyonel Plan</h3>\n  <a href='/plans/pro' aria-label='Profesyonel Planı Satın Al'>Satın Al</a>\n</div>\n<div class='product-card'>\n  <h3>Kurumsal Plan</h3>\n  <a href='/plans/enterprise' aria-label='Kurumsal Planı Satın Al'>Satın Al</a>\n</div>\n\n<!-- Alternative: use visually hidden text inside the anchor -->\n<a href='/plans/basic'>\n  Satın Al <span class='sr-only'>— Temel Plan</span>\n</a>

(Contenido truncado debido al límite de tokens — vuelva a intentar este artículo.)