Escribe textos de enlace descriptivos

Qué comprueba esta auditoría

Inspecciona cada <a href> de la página y calcula el nombre accesible (texto visible, aria-label o alt de un <img> hijo). La comprobación falla cuando:

• El nombre está vacío (un <a><svg/></a> pelado, sin texto ni etiqueta).
• El nombre es una frase genérica: “haz clic aquí”, “aquí”, “leer más”, “saber más”, “más”, “esto”.
• El mismo nombre genérico apunta a URLs distintas en distintos puntos de la página: un usuario de lector de pantalla que liste todos los enlaces oye “haz clic aquí, haz clic aquí, haz clic aquí” sin forma de distinguirlos.

Por qué importa

Los usuarios de lector de pantalla navegan listando los enlaces. En NVDA: Insert+F7. En VoiceOver: Ctrl+Option+U → Enlaces. El usuario ve el texto del enlace fuera de contexto, en orden alfabético, y elige uno. “Leer más” no le dice nada.

• Los usuarios videntes también escanean. Los estudios de eye-tracking (Nielsen Norman, todas las réplicas) muestran que los usuarios escanean primero el texto del enlace y se saltan la prosa de alrededor. Un enlace descriptivo funciona como señal de orientación.
• Posicionamiento. El anchor text de los enlaces internos es una de las pocas señales de texto que Google sigue valorando. Un enlace “Haz clic aquí” hacia tu página de precios desperdicia el espacio; “Precios de MetricSpot”, no.
• Citas en IA. ChatGPT, Perplexity y Google AI Overviews citan el anchor text cuando muestran un enlace. “Haz clic aquí” produce una cita sin pista de lo que hay al otro lado.

Cómo solucionarlo

Haz que el texto de cada enlace describa su destino, incluso leído fuera de contexto.

Mal:

<p>Para saber más sobre nuestros precios, <a href="/pricing/">haz clic aquí</a>.</p>

Bien:

<p>Consulta nuestros <a href="/pricing/">planes de precios y la prueba gratuita</a>.</p>

Enlaces solo con icono — usa aria-label:

<a href="https://twitter.com/metricspot" aria-label="MetricSpot en X">
  <svg aria-hidden="true">…</svg>
</a>

El aria-hidden="true" del SVG impide que se filtre el contenido accesible del icono; el aria-label proporciona el nombre. Sin esto, el lector de pantalla anuncia “enlace” con cualquier dato de ruta que consiga extraer.

Tarjetas con “Leer más” (listados de blog). La solución es extender el ancla a toda la tarjeta o incluir el título del post:

<!-- Mal: cada "Leer más" es idéntico -->
<article>
  <h3>Por qué tus CWV están cayendo</h3>
  <p>Tres patrones que vemos…</p>
  <a href="/blog/cwv/">Leer más</a>
</article>

<!-- Mejor: el título se convierte en el enlace -->
<article>
  <h3><a href="/blog/cwv/">Por qué tus CWV están cayendo</a></h3>
  <p>Tres patrones que vemos…</p>
</article>

<!-- O: contexto añadido de forma visualmente oculta -->
<a href="/blog/cwv/">Leer más<span class="sr-only"> sobre Core Web Vitals</span></a>

Varios enlaces idénticos a destinos distintos. Si tienes varios botones “Editar” en una tabla, añade invisiblemente el contexto de la fila:

<a href="/users/42/edit">Editar<span class="sr-only"> Jane Patel</span></a>
<a href="/users/43/edit">Editar<span class="sr-only"> Alex Diaz</span></a>

Linters. eslint-plugin-jsx-a11y trae la regla anchor-has-content. Añade una regla personalizada que prohíba el anchor literal “haz clic aquí” / “leer más”: son banderas rojas el 100% de las veces.

Preguntas frecuentes

¿Vale “Leer más →” si está visualmente asociado a un encabezado?

Los usuarios videntes lo asocian con el titular de arriba; los de lector de pantalla lo oyen aislado. O conviertes el titular en el enlace (lo mejor) o añades <span class="sr-only"> sobre [título del post]</span> para mantener el diseño visual y aportar el contexto.

¿Y los iconos de enlace externo?

El icono es decorativo: o lo ocultas con aria-hidden="true" o incluyes “(enlace externo)” en texto visualmente oculto. No te fíes solo del icono para los usuarios de lector de pantalla.

¿Abrir un enlace en una pestaña nueva cuenta como descriptivo?

No: target="_blank" es un comportamiento, no un nombre. Si quieres que los lectores de pantalla lo anuncien, incluye “(se abre en una pestaña nueva)” como texto visible o sr-only. A muchos usuarios les molesta que se abran pestañas nuevas sin aviso; si lo haces, indícalo.