Crear activos accesibles: Enlaces

Los enlaces accesibles ayudan a todos los usuarios (especialmente a los que utilizan lectores de pantalla o navegación por teclado) a comprender adónde les llevará un enlace y cómo interactuar con él. Este artículo cubre las mejores prácticas para escribir un texto de enlace claro, utilizando un contexto significativo y evitando frases vagas como “haz clic aquí”. Aprende a hacer tus enlaces más utilizables, informativos y conformes con las normas de accesibilidad.

Requisitos

• Los enlaces deben designarse semánticamente como tales.
• Lo ideal es utilizar un elemento <a> con un valor href válido. Establecer role="enlace" (y añadir todos los demás aspectos de la funcionalidad del enlace) puede ser aceptable en casos problemáticos poco frecuentes.
• Un enlace debe tener un texto que un programa pueda reconocer, siguiendo el algoritmo de cálculo de nombres accesibles.
• Los detalles específicos sobre dicha información se definen en otras especificaciones, como WAI-ARIA, o en las normas de la plataforma correspondiente.
• El propósito de cada enlace debe ser claro y distinguible de otros enlaces de la misma página, ya sea por el propio texto del enlace (preferiblemente) o por el contexto que lo rodea.
• Se aconseja evitar nombres de enlaces como:
  • Más información,
  • Más información,
  • Haz clic aquí para obtener más información.
• Los enlaces que lleven a los mismos destinos deben utilizar sistemáticamente el mismo texto (o muy similar) en todas las páginas del sitio web
• Los enlaces deben poder enfocarse con el teclado sin requerir una sincronización precisa de cada pulsación.
• Además, los enlaces deben activarse con la tecla Intro/Retorno.
• El orden de navegación de los elementos enfocables (enlaces, elementos de formulario, etc.) debe ser lógico e intuitivo.
• El orden de los elementos debe seguir una secuencia lógica.
• Los enlaces deben distinguirse visualmente del texto circundante no enlazado.
• Los enlaces no deben basarse únicamente en el color para diferenciarse del texto circundante, a menos que haya suficiente contraste entre ellos y el texto.
• Cuando se pasa el ratón por encima del enlace o éste recibe atención, debe aparecer una señal visual adicional (como un subrayado o un contorno).
• Los enlaces deben tener una relación de contraste de 4,5 a 1 (para texto pequeño) o de 3 a 1 (para texto grande) respecto a su fondo.
• Todos los enlaces deben mostrar un indicador visual de enfoque cuando estén enfocados.
• El contraste de todos los indicadores visuales de enfoque frente al fondo debe ser de al menos 3 a 1.
• Los usuarios deben tener una forma de saltarse bloques de contenido repetidos en varias páginas web (por ejemplo, una larga lista de archivadores en un sitio web de comercio electrónico que sea un elemento estándar de muchas páginas).
  • El enlace “saltar” debe ser el primer elemento enfocable de la página.
  • El enlace “saltar” debe estar siempre visible o en foco de teclado.
  • los enlaces “saltar”, los puntos de referencia (por ejemplo, <nav>, <main>, etc.) y el índice de la página son métodos aceptables para cumplir el requisito WCAG 2.4.1 de permitir a los usuarios saltarse bloques de contenido. Lo ideal es incorporar todas estas técnicas en el diseño cuando sea conveniente.
• El índice de contenidos de la página puede colocarse en la parte superior del contenido o en la cabecera.
• Lo ideal es que los enlaces del índice coincidan con la estructura de encabezamientos del contenido de la página.

Ejemplos

	El panel de filtros se abre a petición del usuario, lo que permite omitir la lectura de esta columna de contenido mediante un lector de pantalla.
	NO HACER:El siguiente ejemplo utiliza incorrectamente tabindex para especificar un orden de tabulación alternativo. Si se navega por esta lista mediante el tabulador, la lista se navega en el orden Página de inicio, capítulo 3, capítulo 2, capítulo 1, que no sigue la secuencia del contenido.
	Cuando los campos de texto reciben el foco, se muestra una barra vertical en el campo, indicando que el usuario puede insertar texto o se resalta todo el texto, indicando que el usuario puede escribir sobre el texto.
	NO HACER: En este ejemplo, al utilizar un teclado, se salta el botón de llamada a la acción (o incluso todo el elemento que proporciona al usuario información crucial).
	NO HACER: Todos los elementos marcados en rojo tienen el mismo aspecto, pero Ver precios es un enlace. El resto del texto azul son sólo resaltados. Esto significa que los enlaces no se distinguen visualmente del texto circundante que no es un enlace. NO HACER: Al mismo tiempo, los elementos marcados en verde provocan una acción, pero parecen texto normal. Esto significa que los enlaces no se distinguen visualmente del texto circundante no enlazado.