Un enlace o link es un elemento dentro de una página con el que un usuario puede interactuar para:
- Acceder a otra página o a otro lugar en la misma página
- Abrir un archivo o comenzar a descargarlo en su ordenador
- Abrir el servicio de e-mail para enviar un mensaje, llamar por teléfono, abrir un mapa para hallar una dirección…
Los enlaces deben informar sobre cuál será el resultado de activarlos. Si utilizan textos adaptados a la audiencia y no muy largos, los enlaces serán fácilmente comprensibles por el mayor número de personas.
Ciertas personas utilizan herramientas para navegar (lectores de pantalla, reconocimiento de voz…) que les permiten mostrar un listado de todos los enlaces de una página, por lo que es importante que se entiendan fuera del contexto.
Cómo crear enlaces comprensibles
Enlaces comprensibles fuera de su contexto
Usa un lenguaje claro y sencillo, no uses textos genéricos y se conciso describiendo el contenido o funcionalidad.
- Siempre que sea posible utiliza el propio texto del enlace sin añadir descripción adicional. Sé lo más conciso posible (máximo 100 caracteres).
- Si no es posible usar el texto significativo como enlace, añade una descripción adicional concreta dentro del enlace.
- No uses textos genéricos como: pulse aquí, haga clic aquí, más información, leer más.
- No uses las URLs como texto del enlace, ya que no suelen ser descriptivas y son muy largas. En su lugar utiliza un nombre fácil de entender.
- Si el enlace es una frase, pon la información relevante del enlace al comienzo. Por ejemplo use “Contacto” o “Contáctenos” en vez de “Puede contactarnos aquí” para que el usuario lector de pantalla lo encuentre fácilmente.
- Evita comenzar con verbos (Click, abrir), utiliza sustantivos.
- Intenta no utilizar caracteres especiales dentro del contenido, los lectores no suelen leerlos bien. Por ejemplo, en lugar de escribir “16 - 17”, es preferible escribir “de 16 a 17”.
- Si varios enlaces del contenido llevan al mismo lugar deben llamarse del mismo modo. De otro modo, si llevan a distintos lugares no deben nombrarse igual.
- Si el enlace abre una página externa, debe indicarse al usuario de forma textual y/o visual.
Enlaces comprensibles en su contexto inmediato
Contexto inmediato es el contenido que se presenta alrededor del enlace (dentro del mismo párrafo, elemento de listado, celda de tabla... Algunos productos de apoyo, como lectores de pantalla, permiten al usuario leer la frase o el párrafo en el que se incluye el enlace para facilitar su comprensión.
Para que los usuarios de lectores de pantallas puedan interpretar el contexto de un enlace dentro de un párrafo <p>, introduce el enlace dentro de esa etiqueta HTML y no fuera.
Tipos de enlaces
Enlaces internos dentro de una página
Los enlaces internos se utilizan para ayudar a los usuarios a llegar de forma rápida a secciones de un contenido. Ejemplos de este tipo de enlaces son los contenidos dentro de una tabla de contenido al principio del texto.
- Nombra el enlace con el título de la sección de destino añadiendo información adicional si es necesaria para entenderlo fuera del contexto.
- Si el enlace interno va en una frase, estructura el contenido de tal forma que este se sitúe al final de la frase.
- Revisa que al pulsar en el enlace, este va a la sección correcta.
Enlaces a otras páginas dentro del mismo sitio
A veces es útil añadir dentro del propio contenido enlaces a otras páginas que están relacionadas entre sí o forman parte de un tema desarrollado.
Un ejemplo es una tabla de contenidos de que sirve para enlazar páginas dentro del sitio web o cuando un contenido está formado varios capítulos.
- Usa un texto de enlace significativo y comprensible fuera del contexto.
- Si forma parte de una serie, indícalo para que sea comprensible por los usuarios. Por ejemplo: “Paso1: Introducción”.
Enlaces a páginas externas
- Informa al usuario cuando un enlace abre una página externa al sitio. Utiliza al menos información textual, por ejemplo “abrir en una nueva página” para informar a los productos de apoyo como lectores de pantalla, complementada con una ayuda visual como un icono.
- Si muestras una imagen, puedes mostrar la ayuda textual sólo para ciertos productos de apoyo.
Enlaces a documentos
- Usa un nombre descriptivo del archivo lo más corto y conciso posible. Si enlazas hacia un artículo o libro, no es recomendable utilizar la palabra “artículo” o “libro” para el enlace, sino su título. No uses la URL del documento. Leer ejemplos de cómo añadir un documento.
- Incluye detalles sobre el documento: formato, tamaño, peso, entre paréntesis sobre el enlace (PDF, 5.5 Mb, abre en nueva ventana).
- Intenta no provocar la descarga de archivos automáticamente, se deben producir al pulsar en el enlace.
- Como ayuda visual, añade una imagen descriptiva como un icono característico, por ejemplo el de PDF, o una imagen como la portada del documento.
Cómo hacer que un enlace sea perceptible
Asegúrate de que tus usuarios son capaces de percibir los enlaces y distinguirlos del resto de elementos de la página. En particular:
- Utiliza el mismo estilo visual en todos los enlaces.
- Incorpora variaciones para los distintos estados de un enlace (activo, en foco, visitado...).
- Escoge un color para los enlaces que ofrezca suficiente contraste con el color del fondo y con el resto del rexto.
- No utilices solo el color para distinguir un enlace del contenido textual no interactivo, ya que las personas con problemas de visión pueden no diferenciales. Se recomienda subrayar los enlaces ya que los usuarios los reconocen fácilmente esta convención.
Cómo hacer que un enlace sea operable
Asegúrate de que todos los usuarios pueden realizar las acciones relativas a los enlaces. En particular, si utilizas HTML:
- Asegúrate de seguir las especificaciones del W3C, así los usuarios que utilizan el teclado pueden moverse por la página usando el tabulador de enlace a enlace.
- Comprueba que la etiqueta <a> dispone de un atributo href=“” o destino de vínculo adecuado. Esto es, es una URL completa o lo suficientemente relativa. Si se utiliza la “#” es porque es un enlace tipo ancla a otra sección dentro de la página.
- No utilices el atributo title=“” para dar información relevante o sustituir al texto alternativo alt=“” de una imagen cuando no existe texto. Este atributo sólo es visible para personas que usan el ratón y sólo durante un periodo corto de tiempo.
- Si un enlace pertenece a un párrafo, listado, etc.. incluye la etiqueta <a> como una etiqueta anidada dentro de <p>, <li>, etc.