Enlaces

Los enlaces deben ser descriptivos y estar bien identificados.

Los enlaces se crean mediante el elemento a y el atributo href que indica el destino del enlace.

HTML
<a href="https://google.com">Google</a>

Para que los enlaces sea accesibles deben cumplir los siguientes requisitos:

  • Debe haber suficiente contraste entre los colores de texto y de fondo. Para comprobarlo puedes utilizar una herramienta para calcular el contraste del color.
  • Los enlaces incluidos dentro de un bloque de texto deberían ir subrayados para ser fácilmente identificables, y no diferenciarse únicamente mediante el color.
  • Los enlaces deben ser descriptivos. El propósito del enlace debe quedar claramente definido en el texto del enlace.
  • Los enlaces deben ser consistentes. Para evitar confusiones, hay que utilizar el mismo texto para los enlaces que van a un mismo destino.

Ocultar el texto del enlace

Para conseguir enlaces descriptivos, y que no sean demasiado largos o redundantes, podemos ocultar visualmente parte del enlace o utilizar el atributo aria-label

Ejemplo

Título del artículo

Texto de introducción...

Leer artículo "Título del artículo"

Técnica 1: ocultar parte del texto del enlace

Incluimos el título del artículo dentro del enlace y lo ocultamos mediante CSS.

HTML
<a href="#">Leer artículo <span class="sr-only">
"Título del artículo"</span></a>

Técnica 2: utilizar el atributo aria-label

Incluimos el título del artículo mediante el atributo aria-label, para que sea accesible a los lectores de pantalla.

HTML
<a href="#" aria-label="Leer artículo 'Título del artículo'">
Leer artículo</a>

Enlace 'saltar a'

El enlace “saltar a” nos permite evitar las partes de una página que se repiten, al navegar por un sitio web.

Es una ayuda para usuarios de lectores de pantalla o navegación por teclado, porque evita tener que pasar por los mismos bloques de contenido en cada página.

Un caso típico es colocar este enlace al principio de la página para poder saltar el menú de navegación e ir directo al contenido principal.

HTML
<a href="#main">Saltar al contenido principal</a>

<main id="main">
...
</main>

Nota: Puedes hacer que el enlace “saltar a” sea visible únicamente para lectores de pantalla y navegación por teclado, usando CSS.

Criterios de conformidad WCAG 2.1