Técnica General G53 de WCAG 2.1: Identificar el propósito de un enlace utilizando el texto del enlace combinado con el texto de la oración que lo adjunta

Los enlaces son elementos clave en la navegación web, ya que permiten a los usuarios moverse entre contenidos relacionados. Sin embargo, los enlaces mal etiquetados pueden generar confusión, especialmente para personas con discapacidades visuales o cognitivas que utilizan lectores de pantalla.

La técnica G53 está relacionada con el criterio de éxito 2.4.4: Propósito del enlace (en contexto) de WCAG 2.1. Su objetivo es garantizar que el propósito de un enlace sea claro combinando el texto del enlace con el contexto de la oración que lo contiene. Esto permite a los usuarios diferenciar los enlaces y decidir si desean seguirlos.

Acerca de esta técnica

La técnica G53 asegura que los enlaces sean comprensibles dentro del contexto de su oración, en lugar de depender exclusivamente del texto del enlace. Esto es especialmente útil cuando los enlaces contienen textos genéricos como «haz clic aquí» o «más información».

Para aplicar esta técnica correctamente:

• El texto del enlace debe ir acompañado de información adicional en la misma oración.
• La información adicional debe preceder al enlace para facilitar su comprensión en lectores de pantalla.
• El contexto debe ser suficiente para diferenciar este enlace de otros en la misma página.

Esta técnica es esencial en:

• Páginas con enlaces repetitivos que llevan a destinos diferentes.
• Listas de artículos, noticias o productos donde los enlaces tienen textos similares.
• Formularios con enlaces de ayuda o descripciones adicionales.

Ejemplos

Ejemplo incorrecto 1: Uso de «haz clic aquí» sin contexto

<p>Para leer nuestra política de privacidad, <a href="privacidad.html">haz clic aquí</a>.</p>

🔴 Problema:

• El texto del enlace «haz clic aquí» no proporciona información sobre el destino del enlace.
• Los usuarios de lectores de pantalla no pueden entender su propósito sin leer el contexto completo.

Solución correcta: Texto del enlace significativo

<p>Para conocer más detalles sobre el manejo de datos, revisa nuestra <a href="privacidad.html">política de privacidad</a>.</p>

✅ ¿Qué mejora?:

• El enlace es informativo por sí mismo sin necesidad de leer el contexto adicional.
• Mejora la experiencia de navegación, especialmente para usuarios con tecnologías de asistencia.

Ejemplo incorrecto 2: Enlaces sin contexto suficiente

<p>Consulta la lista de ganadores del sorteo en el siguiente <a href="ganadores.html">enlace</a>.</p>

🔴 Problema:

• «Enlace» no indica claramente a dónde lleva.
• En una página con varios enlaces similares, no hay forma de diferenciarlos.

Solución correcta: Contexto claro antes del enlace

<p>Consulta la <a href="ganadores.html">lista de ganadores del sorteo</a>.</p>

✅ ¿Qué mejora?:

• El texto del enlace comunica claramente el destino.
• La información clave precede al enlace, facilitando su comprensión.

Mejor práctica: Implementación ideal

<ul>
  <li>Lee las <a href="términos.html">condiciones del servicio</a> antes de registrarte.</li>
  <li>Consulta la <a href="guia.html">guía de accesibilidad</a> para optimizar la experiencia del usuario.</li>
  <li>Accede a la <a href="ayuda.html">sección de ayuda</a> si tienes dudas.</li>
</ul>

✅ ¿Qué mejora?:

• Todos los enlaces son informativos y diferenciables.
• Se respeta el principio de claridad y contexto.

Errores comunes y cómo evitarlos

Errores comunes:

• Uso de «haz clic aquí», «más información», «enlace», sin contexto.
• Colocar información adicional después del enlace en lugar de antes.
• Repetir textos de enlace idénticos en diferentes destinos.

Cómo evitar estos errores:

• Escribir enlaces autodescriptivos y significativos.
• Asegurar que la información clave preceda al enlace.
• Usar atributos aria-describedby si se requiere contexto adicional.

Preguntas frecuentes sobre la técnica general G53

¿Los enlaces siempre deben contener el contexto en la misma oración?

No siempre, pero es la mejor práctica cuando el texto del enlace no es suficientemente descriptivo por sí solo.

¿Se puede usar «haz clic aquí» si el contexto es claro?

Se desaconseja, ya que obliga a los usuarios a leer el contexto completo para entender el propósito del enlace.

¿Qué hacer si un enlace está dentro de una lista o tabla?

Se puede complementar con encabezados (<h2>, <h3>) o descripciones en celdas asociadas.

¿Esta técnica aplica a todos los enlaces en una página web?

Sí, especialmente en aquellos que podrían ser ambiguos sin contexto adicional.

Recursos relacionados

• Guía oficial WCAG 2.1 para la Técnica General G53: Identificar el propósito de un enlace utilizando el texto del enlace combinado con el texto de la oración que lo adjunta
• Comprender el criterio de éxito 2.4.4: Propósito del enlace (en contexto)
• G91: Proporcionar texto de enlace que describa el propósito de un enlace
• H2: Combinar enlaces de imágenes y texto adyacentes para el mismo recurso
• H30: Proporcionar texto de enlace que describa el propósito de un enlace para elementos de anclaje
• H33: Complementar el texto del enlace con el atributo de título
• H77: Identificar el propósito de un enlace utilizando el texto del enlace combinado con el elemento de lista que lo contiene
• H78: Identificar el propósito de un enlace utilizando el texto del enlace combinado con el párrafo que lo encierra
• H79: Identificar el propósito de un enlace en una tabla de datos utilizando el texto del enlace combinado con su celda de tabla adjunta y las celdas de encabezado de tabla asociadas
• H80: Identificar el propósito de un enlace utilizando el texto del enlace combinado con el elemento de encabezado anterior
• H81: Identificar el propósito de un enlace en una lista anidada utilizando el texto del enlace combinado con el elemento de la lista principal bajo el cual está anidada la lista
• C7: Uso de CSS para ocultar una parte del texto del enlace
• ARIA1: Uso de la propiedad aria-describedby para proporcionar una etiqueta descriptiva para los controles de la interfaz de usuario

Pruebas y validación

Procedimiento

1. Identificar enlaces en el contenido.
2. Evaluar si el texto del enlace combinado con la oración proporciona contexto suficiente.
3. Verificar que el contexto relevante preceda al enlace.

Resultados esperados

• ✅ Si el contexto es suficiente, la técnica está bien implementada.
• ❌ Si el usuario no puede identificar el propósito del enlace sin leer contenido adicional, es necesario corregirlo.

Esta técnica es clave para una web accesible y facilita la navegación para todos los usuarios.