Cómo crear enlaces accesibles
El hipervínculo es uno de los elementos más arcaicos del Internet. Una manera tan sencilla y potente de conectar información. He aquí cómo hacerlos accesibles.
Diferencia los enlaces de los botones
Un botón hace algo, permite llevar a cabo una acción.
Un enlace lleva a algún sitio, permite navegar.
Nota para desarrolladores:
Un botón debe usar una etiqueta de botón <button></button>
Un enlace debe usar una etiqueta de anclaje <a></a>
No estilices una etiqueta <a> o un <div> para que se vea como un botón. Aunque consigas el mismo resultado visual, debes diferenciarlos desde el código HTML.
Evita links de palabras, como “click aquí”
Escribir enlaces únicos y descriptivos significa que a) si leyeras todos los links en una lista se podrían diferenciar uno del otro y b) el texto del link deberá describir claramente a dónde te llevará.
Esto es muy importante, ya que una forma de navegar un sitio web usando lectores de pantalla, es a través de los listados de links. Si todos son iguales o si son todos palabras como ‘aquí’, entonces no se permitirá este modo de navegación (ver ejemplo). Por esto el texto del link debe decir a dónde va, independientemente del texto que lo rodea.
Ejemplo de listado de links en JAWS, muestra por qué es problemático cuando el texto de link no es descriptivo.
"Click aquí" o "Más", son palabras sin sentido por sí solas.
Para escribir un buen link piensa:
¿A dónde iré al dar click aquí?, ¿De qué voy a saber más?
Un enlace accesible deja claro el destino, independientemente del texto que los rodea.
Aquí puedes encontrar un mal enlace.
No uses solo el color para indicar un link
No usar únicamente el color es un principio de accesibilidad. Cuando se trate de enlaces, simplemente es no olvidarse de subrayarlos.
No pierdas el subrayado al pasar el ratón por encima
Observo esta interacción con bastante frecuencia, así que pensé que merecía una reflexión propia. La pérdida del subrayado puede justificarse por el hecho de que aparece el pointer y hay un movimiento con respecto al estado anterior que se produce al pasar el ratón por encima; sin embargo, ¿qué pasaría si no vieras cuándo se ha eliminado el subrayado?
Acabas confiando sólo en el color para identificar el enlace, y recuerda que esto es una infracción de una directriz de accesibilidad. Si eres daltónico, el enlace te parecerá texto una vez que desaparezca el subrayado.
Terminas usando memoria a corto plazo; si estamos hablando de un segundo cambio, ¿qué pasa si no lo has visto? o ¿si tienes problemas cognitivos para recordar?
Por estas razones, prefiero mantener el enlace subrayado en todos los estados.
Simplemente dejándolo subrayado junto con el cambio de puntero se asegura la visibilidad de un enlace al pasar el puntero por encima.
Puedes seleccionar una interacción que se adapte a tu sistema de diseño; lo importante es no depender únicamente de los cambios de color para indicar los estados de tus enlaces.
Especifica cuándo el link se abre en una pestaña nueva
Cuando se trata de accesibilidad, WCAG recomienda abrir en una nueva pestaña sólo cuando sea necesario. Cuando hablamos de estrategia de UX, lo normal es querer que los usuarios permanezcan en el sitio web o producto en lugar de abandonarlo.
Recuerda que abrir una ventana nueva sin avisar puede desorientar a los usuarios de lectores de pantalla, especialmente si se abre un PDF en nueva pestaña sin avisar.
La solución es avisar de antemano que el enlace se abrirá en una nueva pestaña.
Los diseñadores y editores de contenidos pueden incluir un icono o simplemente texto entre paréntesis, para decir que al hacer click el usuario saldrá de la página en la que está.
Si se utiliza una opción de icono, los desarrolladores deben usar alt-text o aria label en el icono para especificar que abrirá una nueva pestaña.
¿Todos los enlaces externos deben tenerlo?
Todo depende. Yo diría que es imprescindible para los PDF que se abren en pestañas nuevas o los enlaces externos que van a interrumpir a los usuarios que completan una tarea, pero no todos deben tenerlo, como cuando el enlace ya te informa de que te llevará a otro sitio: Visite el sitio web del Proyecto A11Y; el texto ya remite a una fuente externa, así que no lo he añadido ahí.
Operables con el teclado
Los enlaces, como todos los elementos interactivos, deben tener un estado de foco visual y activarse con la tecla ENTER o RETURN.
Los estados focus y hover pueden combinarse, pero focus debería ser algo más que hover, normalmente un contorno alrededor del elemento. Garantizar la diferenciación visual entre los estados mejorará tus affordances y la accesibilidad del sitio.
Ejemplo de gov.uk donde los tres estados de un link resting, hover y focus, son claramente diferenciables.
Tenemos que hacer enlaces a diario, así que espero que esto te resulte útil y sencillo de aplicar la próxima vez que hagas un enlace.
Este texto fue originalmente publicado en Bootcamp de UX Collective por Alejandra Avilés en febrero 2023.
