No uses texto de enlace como “haz clic aquí” (2001)

• Se destaca el problema de usar texto de enlace genérico como "haz clic aquí"
• En relación con la accesibilidad, el texto del enlace debe transmitir con claridad el significado del contenido
• Esto genera un impacto negativo en los motores de búsqueda y en la experiencia de usuarios de lectores de pantalla
• Un texto de enlace claro y con contexto beneficia tanto a los usuarios como a la tecnología
• Desde 2001, se ha impulsado la recomendación de usar texto de enlace correcto desde la perspectiva de los estándares web y los principios de UX

---

Introducción

• El uso de texto de enlace genérico como "haz clic aquí" o "click here" se consolidó desde hace mucho como una práctica común entre desarrolladores web
• Sin embargo, este enfoque implica desventajas importantes en términos de accesibilidad, usabilidad y SEO

El significado del texto de enlace y sus problemas

• El texto de enlace debe cumplir la función de dar información para que el usuario pueda predecir a dónde lo llevará ese enlace antes de hacer clic
• Si simplemente se escribe algo como "haz clic aquí", el enlace existe sin contexto, lo que provoca confusión para el usuario y una disminución de la accesibilidad

Impacto en la accesibilidad y la experiencia de usuario

• Cuando los usuarios de lectores de pantalla recorren la lista de enlaces de una página, terminan escuchando el mismo contenido: "haz clic aquí", lo que dificulta obtener información
• Cuando el enlace se redacta con una frase específica que incluye significado, aumenta la eficiencia de la experiencia para usuarios con discapacidad visual y para usuarios en distintos contextos

Consideraciones de optimización para motores de búsqueda (SEO)

• Los motores de búsqueda también analizan el texto de enlace para determinar la relevancia y la calidad del contenido
• Un texto de enlace que incluye palabras clave importantes y contexto tiene un efecto positivo en el aumento del ranking de búsqueda y la visibilidad

Recomendaciones para redactar correctamente el texto de enlace

• Se recomienda usar texto de enlace que refleje con claridad el contexto
  • Ejemplo: "revisar las pautas de accesibilidad más recientes"
• Este principio se ha enfatizado de forma continua desde 2001 durante la aparición de los estándares web y el fortalecimiento de la UX

Conclusión

• Usar texto con significado como enlace, en lugar de "haz clic aquí", es un criterio esencial tanto para la web actual como para la web del futuro

[GN⁺]

Opiniones de Hacker News

• Desde la perspectiva de la accesibilidad, quisiera enfatizar que los lectores de pantalla para usuarios con discapacidad visual leen la página de forma lineal. Para salir de esa estructura lineal, el usuario puede navegar por encabezados o por una lista de enlaces, pero si todos los enlaces aparecen como "haz clic aquí", en la práctica se bloquea el acceso no lineal

  • Señalan que si todos los enlaces se muestran simplemente como un sustantivo, por ejemplo "Amaya", sin verbo, resulta difícil entender qué significa cada uno. Por eso, expresiones como "obtener Amaya" o "ir al sitio web de Amaya" también parecen perfectamente válidas. También mencionan el caso de wxMaxima como ejemplo de algo indeseable: un botón de descarga en github.io que en realidad hace que descargues el ejecutable desde un sitio con riesgo de malware como SourceForge
  • Irónicamente, proponen que hace falta algo que permita visualizar y entender fácilmente cómo funcionan las herramientas de accesibilidad para quienes en realidad no las necesitan. No se trata de cambiar la herramienta en sí, sino de pensar en maneras para que más personas puedan experimentar directamente un entorno con lector de pantalla
  • Ya existen varias soluciones para este problema. Como referencia, comparten los enlaces a la guía WCAG 2.2 HTML H33 y la guía WCAG 2.2 CSS C7. Aun así, no está claro qué tan bien está soportado el primer método en lectores de pantalla reales
  • Parece un buen argumento. Aun así, mantienen la postura de que el texto del enlace debería incluir una acción más clara, como "Obtener Amaya", en lugar de solo "Amaya"
  • Los lectores de pantalla ofrecen varias formas de navegación dentro de la página. El desplazamiento lineal es solo la más ineficiente. El usuario puede saltar rápidamente a donde quiere mediante landmarks, encabezados o el modo de navegación por esquema. El punto importante es que la navegación con lector de pantalla y la navegación por teclado no son lo mismo

• A "mí" me parece que el ejemplo "problemático" presentado en el artículo,

  Para descargar Amaya, el editor/navegador del W3C, haz clic aquí.
  en realidad es muy intuitivo. Uno puede anticipar que al hacer clic en el enlace se descargará el archivo directamente o se irá a una página de descarga.
  En cambio,
  ¡Obtener Amaya!
  da la impresión de que llevará a la página principal del sitio web, así que si se usa como enlace de descarga pierde efectividad.
  Y
  Saber más sobre Amaya
  no tiene ninguna relación con la descarga, y como el verbo "saber más" no forma parte del enlace, genera confusión sobre si el enlace en "Amaya" llevará a una landing page o a una página informativa.
  La convención en la web ha sido, como en el ejemplo anterior,
  Para descargar Amaya, el editor/navegador del W3C, haz clic aquí
  Descargar Amaya, editor/navegador del W3C
  de ese estilo.
  No están de acuerdo con la idea de que no deban usarse verbos en el texto de los enlaces. Al contrario, creen que si el enlace implica una acción —descargar, consultar información, etc.— entonces debería incluir claramente un verbo.
  En particular, "haz clic aquí" es muy intuitivo porque indica que no se trata de un simple enlace de referencia, sino de un enlace orientado a una acción.
  ¡Obtener Amaya!
  enfatizan que algo así da la sensación de ser solo un enlace de referencia, no un enlace que explique realmente cómo obtener Amaya

  • Si uno usa un lector de pantalla directamente, se da cuenta de que todos los enlaces se repiten como "haz clic aquí". Eso no ayuda en absoluto. Incluso desde la perspectiva de los motores de búsqueda, "haz clic aquí" no aporta ninguna información. El verbo en sí está bien, pero conviene evitar textos de enlace que suenen idénticos, como "haz clic aquí". Una frase como "Haz clic aquí para descargar Amaya", donde también se aclara el objeto, sí está bien, pero simplemente "haz clic aquí" no se puede distinguir en muchos contextos
  • Realmente detestan los enlaces "haz clic aquí". Para encontrar el enlace que buscan, suelen recorrer visualmente solo los textos de los enlaces en la página; "Descargar Amaya" o "Amaya" podrían servir si fueran páginas de referencia, pero "haz clic aquí" no ayuda en nada
  • En el ejemplo real, todos los enlaces llevan a la página principal de Amaya. No a una página de descarga, y eso en realidad debilita el mensaje. Critican que se esté mezclando el problema de accesibilidad de expresiones como "haz clic aquí" con la cuestión de qué tan fielmente el texto del enlace refleja su destino
  • Más allá de los lectores de pantalla, usar un sustantivo claro en el texto del enlace también puede aportar ventajas de mantenimiento. Por ejemplo, si un enlace fue copiado y pegado por error o está roto, el texto mismo puede servir como pista, lo que facilita rastrearlo y corregirlo. Puede ser algo menor, pero existe
  • En los primeros años de la web había muchos enlaces de este tipo, de "haz clic aquí". Poco a poco fueron reemplazados por botones con una acción más clara, así que patrones como "para cancelar esta compra [haz clic aquí]" o "para completar esta compra [haz clic aquí]" fueron desapareciendo

• Mencionan que en el Government Digital Service del Reino Unido también recomiendan lineamientos de accesibilidad parecidos; el material oficial puede consultarse aquí

  • Suelen tomar esas guías como referencia para implementar componentes y diseño web con el mayor nivel posible de accesibilidad. Puede verse tosco (bordes negros y amarillos gruesos, etc.), pero creen que es importante priorizar la accesibilidad por encima del diseño
  • El enfoque recomendado por Home Office es un poco distinto al de W3C. Por ejemplo
    W3C:
    Get Amaya
    Read more about Amaya
    Home Office:
    Get Amaya
    Read more about Amaya
    El método de Home Office parece más razonable, pero según el contexto también puede generar otros problemas. En ambos casos, en la práctica suele sentirse más natural resolverlo con botones fuera de la línea narrativa que con hipervínculos dentro del texto (por ejemplo: [Download], [Documentation]). En su experiencia, un formato con el texto reformulado de manera más natural, como
    "PiPedal es un efecto de guitarra que corre en Raspberry Pi. La descarga de PiPedal está en la [página de descarga], y la documentación en [Documentation]".
    les parece mejor, y de hecho así lo escribieron en su documentación
    Se dieron cuenta de que nominalizar "haz clic aquí" es más difícil de lo que parece. A veces, el contexto suficiente ya está en la oración inline, así que hay casos en los que usar "haz clic aquí" no provoca realmente un problema de accesibilidad
    Sobre todo cuando el botón está justo arriba ("Download", "Documentation"), no tienen claro si de verdad haga falta corregirlo Al final, el indicador de desempeño es cuánta gente visita realmente la página de descarga

• Personalmente, sienten que el segundo ejemplo que el artículo aconseja evitar (“Para descargar Amaya, ve al sitio web de Amaya y obtén el software que necesitas”) es mejor.
  Si simplemente se enlaza "Amaya", no queda claro si es un enlace interno o externo, ni si llevará directo al archivo o a una página de descarga

  • Prefieren añadir un ícono para indicar si el destino es externo o si es un archivo. En el caso de archivos, también comparten la idea de mostrar la extensión del archivo
  • El problema de distinguir enlaces internos y externos ya está bien resuelto en sitios como Wikipedia mediante pequeños íconos

• Quizá por la edad, tienen la intuición de que un enlace debe apuntar a un sustantivo (lugar/objeto).
  Por eso les parece bien un enlace como "mi sitio web", pero les incomoda una frase con verbo como "ir a mi sitio web"
  En especial no les gustan las formas imperativas, así que no usan expresiones como "go to my website" o "follow this link"

  • Esto les resulta comprensible. En casos con una acción, como descargar, puede ser confuso, pero "descarga" en sí también funciona como sustantivo, así que podría estar bien
  • En páginas de tutoriales o how-to, consideran que las frases en imperativo sí son adecuadas

• Consideran que usar solo "aquí" como enlace en internet es una falla fundamental que demuestra no haber entendido en absoluto cómo se escribe un documento de hipertexto. "Haz clic aquí" se siente como una acotación escénica. Creen que esto ocurre porque muchos autores no escriben pensando en el contexto hipertextual

• Al pensar en un texto como "I forgot my password" como enlace, intentaron imaginar cómo se vería si se cambiara por "haz clic aquí", pero intuitivamente sintieron que algo no encajaba.
  A medida que se desdibujan los estándares de UI, cada vez hay más casos en los que el usuario se confunde sobre qué debe hacer clic en la página y qué texto lo representa realmente
  Coinciden en que si "I forgot my password" fuera un botón, sería mucho más efectivo que un enlace
  También mencionan que cuando Microsoft eliminó la mayoría de los botones y los reemplazó por enlaces de color ambiguo, se multiplicaron los casos en que no estaba claro dónde había que hacer clic
  (post de referencia: publicación relacionada en Mastodon)

• Presentan el ensayo de 2022 de Dragan Espenschied, historia del cambio del texto de los enlaces.
  Menciona la tendencia reciente de que el texto de los enlaces pase de ser un call-to-action a convertirse en texto de botón que describe el estado del usuario (una definición de qué tipo de persona es, por ejemplo: “inicia sesión”)

• Están de acuerdo con la mayoría de los principios explicados en el artículo, pero creen que hay excepciones en las que verbos o frases verbales como "download" sí son apropiados, cuando deben dejar muy clara la acción. En esos casos, solo debería usarse si el enlace lleva a una descarga directa, y siempre verificando que encaje con el contexto

• Si, como en el ejemplo, todos los enlaces realmente iniciaran la descarga de Amaya, la forma preferida sería un hipervínculo tipo Download Amaya.
  Si es posible, sería bueno acompañarlo con un ícono que sugiera que se trata de una descarga. Preferirían evitar que el enlace lleve a una página de descarga llena de botones publicitarios en vez de apuntar al archivo real