Texto de enlace que tiene sentido fuera de contexto

Cómo navegan realmente los usuarios de lectores de pantalla

Antes de hablar de cómo escribir el texto de los enlaces, ayuda entender cómo usa la gente los enlaces cuando no puede ver la página.

Los lectores de pantalla ofrecen un atajo que la mayoría de los usuarios videntes no sabe que existe: al pulsar una sola tecla (normalmente la letra L en la mayoría de los lectores de pantalla) se recorren todos los enlaces de la página, leyéndolos uno por uno, fuera de contexto. Los usuarios lo emplean para escanear una página rápidamente, del mismo modo que el ojo de un usuario vidente podría hojear los encabezados y los botones de llamada a la acción.

Si tu página tiene doce enlaces que dicen “Leer más”, esa lista carece de sentido. El usuario oye: “Leer más. Leer más. Leer más. Leer más…”. No puede saber a dónde lleva ninguno de ellos.

Este es el problema fundamental que la accesibilidad del texto de enlace intenta resolver: cada enlace debe describirse a sí mismo, porque el contexto desaparece cuando navegas por enlaces.

Lo que dice WCAG

2.4.4 Propósito de los enlaces (en contexto) en el Nivel A exige que el propósito de cada enlace pueda determinarse a partir del texto del enlace por sí solo, o a partir del texto del enlace junto con su contexto circundante (el párrafo, elemento de lista, celda de tabla o encabezado en el que se encuentra).

2.4.9 Propósito de los enlaces (solo enlace) en el Nivel AAA va más allá, y exige el propósito del enlace a partir del texto del enlace por sí solo, sin depender del contexto. Apuntar a esto es una buena idea incluso si solo persigues la conformidad AA.

2.5.3 Etiqueta en el nombre (Nivel A) exige que, cuando un enlace o botón tiene una etiqueta de texto visible, el nombre accesible comience con ese texto. Un botón con icono etiquetado como “Más información sobre accesibilidad” con un aria-label de “Haz clic aquí” falla este criterio.

Fallos comunes y qué hacer en su lugar

”Haz clic aquí” y “Leer más”

Estos son los fallos de accesibilidad de enlaces más extendidos en la web.

<!-- Falla: sin significado fuera de contexto -->
<a href="/blog/wcag-compliance">Leer más</a>

<!-- Aprueba: se describe a sí mismo -->
<a href="/blog/wcag-compliance">Lee nuestra guía de conformidad con WCAG 2.2</a>

La solución casi siempre es sencilla: reemplaza la frase vaga con un texto que describa el destino o la acción.

Enlaces genéricos con “aquí”

“Haz clic aquí para descargar el informe” falla por la misma razón: la palabra del enlace en sí es solo “aquí”.

<!-- Falla -->
<p>Para los resultados completos, haz clic <a href="/report.pdf">aquí</a>.</p>

<!-- Aprueba: el texto del enlace describe qué se está enlazando -->
<p>Descarga el <a href="/report.pdf">informe de auditoría de accesibilidad 2025 (PDF)</a>.</p>

Fíjate en el indicador de PDF entre paréntesis: es una buena práctica para informar a los usuarios de que seguir el enlace abrirá un PDF en lugar de una página web.

Enlaces al mismo destino con texto distinto, o a destinos distintos con el mismo texto

Ambos crean confusión. Si cinco enlaces de navegación dicen todos “Más información” pero apuntan a páginas de servicio distintas, los usuarios no pueden predecir dónde acabarán. A la inversa, dos enlaces distintos que dicen “guía de conformidad con WCAG” pero van a páginas distintas son igual de confusos.

Enlaces y botones que solo tienen icono

Un enlace o botón que contiene solo un icono —sin texto visible— debe tener un nombre accesible proporcionado mediante aria-label o aria-labelledby. Sin él, los lectores de pantalla anuncian el nombre del archivo de la imagen del icono o nada en absoluto.

<!-- Falla: se anuncia como "enlace, gráfico" o el nombre del archivo SVG -->
<a href="/social/twitter">
  <svg><!-- icono de twitter --></svg>
</a>

<!-- Aprueba: aria-label proporciona el nombre accesible -->
<a href="/social/twitter" aria-label="QualiBooth en Twitter">
  <svg aria-hidden="true"><!-- icono de twitter --></svg>
</a>

El aria-hidden="true" en el SVG evita que los lectores de pantalla anuncien el título o el contenido del SVG; dado que el enlace ya tiene una etiqueta, el contenido del icono es redundante.

Usar aria-label para complementar el texto visible

Cuando una página tiene varios enlaces “Descargar” y no puedes cambiar el texto visible (una restricción de diseño), aria-label puede ampliar el nombre accesible:

<!-- El texto visible es "Descargar" pero el nombre accesible es la cadena completa -->
<a href="/report-2025.pdf" aria-label="Descargar informe de accesibilidad 2025 en PDF">
  Descargar
</a>

Una advertencia aquí: WCAG 2.5.3 exige que el nombre accesible comience con el texto visible. “Descargar informe de accesibilidad 2025 en PDF” comienza con “Descargar”: bien. “Informe de accesibilidad 2025 — Descargar PDF” no lo hace: mal.

Enlaces que se abren en una pestaña nueva

Abrir una pestaña nueva sin previo aviso desorienta a los usuarios, en particular a quienes tienen discapacidades cognitivas o a los usuarios de lectores de pantalla que quizá no se den cuenta de lo que ha pasado. Indica el comportamiento de pestaña nueva en el texto del enlace o con una nota oculta visualmente.

<!-- Señala el comportamiento de pestaña nueva visualmente y a la tecnología de asistencia -->
<a href="https://example.com" target="_blank">
  Ver informe de ejemplo
  <span class="sr-only">(se abre en una pestaña nueva)</span>
</a>

Cuando el texto de enlace funciona sin ser evidente

El contexto puede aportar legítimamente el significado que falta según WCAG 2.4.4. Un enlace “Descargar” es aceptable si se encuentra en una celda de tabla cuyo encabezado de columna dice “Informe anual” y cuyo encabezado de fila dice “2025”. El contexto deja claro el propósito.

Esto es distinto de un enlace “Leer más” al final de un párrafo independiente. El párrafo aporta contexto, pero “Leer más” sigue fallando porque el texto del enlace podría aplicarse a cualquier párrafo: no identifica de forma única el destino.

Enlaces con imagen

Cuando el contenido del enlace es una imagen en lugar de texto, el atributo alt de la imagen se convierte en el nombre accesible del enlace. El texto alternativo debe describir el destino del enlace, no la imagen en sí.

<!-- El alt describe el destino del enlace, no la apariencia de la imagen -->
<a href="/services/audits">
  <img src="audit-icon.png" alt="Servicios de auditoría de accesibilidad">
</a>

Si la imagen es puramente decorativa y va acompañada de texto visible en el mismo enlace, la imagen debe tener alt="" para evitar anunciar el mismo texto dos veces.

Una auditoría rápida que puedes hacer tú mismo

Abre tu página y despliega la lista de enlaces con tu lector de pantalla (o instala la extensión de navegador gratuita HeadingsMap o WAVE para ver los enlaces extraídos del contexto). Lee la lista. Si no puedes saber a dónde va cada enlace solo con el texto, necesita trabajo.

La solución más común es añadir un <span class="sr-only"> (oculto visualmente, accesible para lectores de pantalla) con contexto adicional, o simplemente reescribir por completo el texto del enlace. Reescribir siempre es preferible: a menudo mejora la usabilidad para todos, no solo para los usuarios de lectores de pantalla.

Para una revisión exhaustiva de los enlaces de tu sitio y otros criterios de WCAG, nuestras auditorías de accesibilidad manuales cubren el propósito de los enlaces como parte de una revisión más amplia realizada por evaluadores que usan tecnología de asistencia a diario.