Programación web

¿Cómo crear enlaces accesibles?

Los links en nuestro proyecto web serán esenciales y nos ayudarán a nivel de SEO, pero ¿qué hay que tener en cuenta para que sean accesibles?

Drauta agencia digitalDrauta

¿Cómo crear enlaces accesibles?

¿Qué pautas debo seguir para tener enlaces accesibles para todos los usuarios?

Crear un link con un texto de 'Click aquí' es algo muy sencillo y que aprendemos en la primera clase de programación, pero cada vez más debemos tener en cuenta que debemos adaptarnos a los usuarios con todo tipo de habilidades. Las normas de la comunidad W3C enfatizan en contextualizar el link para que sea entendible por usuarios con discapacidades.

Las aplicaciones de lectura de pantalla ofrecen sólo maneras limitadas para interpretar una página. Es por ese motivo que la W3C insisten en identificar y describir el target del link.

A continuación, os presentamos algunos puntos a tener en cuenta:

  • No utilizar la palabra 'link' en nuestros links. Los lectores de pantalla ya le indican al usuario que lo han encontrado.
  • No utilizar letras en mayúsculas, ya que hay lectores de pantalla que no las reconocen como palabras enteras y es más difícil de leer por personas con problemas de visión. Además, algunas culturas interpretan que las frases escritas en mayúsculas son un signo de enfado.
  • Evitar caracteres ASCII.
  • Evitar utilizar URLs como texto del link: hay lectores de pantalla que leen letra por letra si encuentran una url. 
  • Utilizar un texto corto en el link: 100 caracteres es la longitud aceptable.
  • Restringir el número de links de texto en una página. Hay tipos de información que requieren muchos, pero son casos que se tienen en cuenta como links de descarga, links que abren una nueva ventana o paginación.
  • No crear links directos a descargas: es esencial indicar que ese link activa una descarga. Si utilizas un icono asegúrate de utilizar ALT informativos.
  • Indicar al usuario que se abrirá una nueva ventana: las personas con problemas cognitivos necesitan este tipo de información. Lo mejor es indicarlo en el texto del link. También se puede añadir un icono con su ALT correspondiente. 
  • Hay que tener cuidado con la paginación o los links alfabéticos: incluso para un usuario normal que se encuentra un paginador puede resultar confuso. Es por ello que se recomienda incluir un 'Ir a la página' antes del paginador.
  • Hay que vigilar con la utilización de 'anchor links' e informar de alguna manera de que se trata de uno de ellos.
  • Subrayar links: los usuarios esperan que un link siempre esté subrayado.  De igual manera, si cualquier otro tipo de texto está subrayado por cualquier otro motivo (para destacarlo) esperarán que sea un link. Es por ello, que lo mejor es evitar el uso de texto subrayado para otras finalidades. Eso sí, si tenemos un link debemos destacarlo de alguna manera (utilizando a:focus o a:hover).
  • Diseñar pensando en usuarios que sólo utilizan el teclado para navegar: debemos utilizar un indicador focus de teclado.
  • Hay que tener cuidado con la utilización de imágenes como links: el atributo ALT tendrá la misma función que el texto del link. Este atributo le indicará al usuario la descripción de la imagen y qué pasará si activan la imagen.
  • Eliminar links rotos o vacíos: además de ser un acto necesario para el buen posicionamiento SEO, ayudará a los usuarios a no acceder a links que les llevan a ningún sitio.
  • Utiliza un mismo estilo único para todos los links: no utilices un mismo diseño (subrayado de color azul, por ejemplo) con dos fines distintos en una misma página web. 
  • Haz un test de contraste de colores: debes asegurarte que el color del link tiene suficiente contraste con el color de background. También deberás comprobarlo cuando se aplique el hover o el focus. Dos buenos tests de contraste de colores son Check My Colors y Luminosity Colour Contrast Radio Analyser.

¿Quieres empezar un nuevo proyecto con nosotros?

¿Necesitas servicios para tu web? Descubre como te podemos ayudar y no dudes en contactar con nosotros.