Enlaces

Estructura del enlace

Para crear un enlace utilizamos el elemento a, que contiene el texto, con el atributo href que indica el destino.

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

Enlaces accesibles

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

• Los enlaces deben ser descriptivos: el propósito del enlace debe quedar claramente definido en el texto del enlace.
• Los enlaces deben estar bien identificados: especialmente los que están incluidos dentro de un bloque de texto . Para ello puedes subrayarlos, destacarlos en negrita o utilizar un color diferente.
• Los enlaces deben ser consistentes: para evitar confusiones, hay que utilizar el mismo texto para los enlaces que van a un mismo destino.

Ocultar parte del texto del enlace

Para conseguir enlaces descriptivos, y que no sean demasiado largos o redundantes, podemos ocultar visualmente parte del enlace:

<a href="#">
  Leer artículo <span class="visually-hidden">'Título del artículo'</span>
</a>

O utilizar el atributo aria-label:

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

De esta forma el enlace queda claramente identificado para los usuarios de lectores de pantalla.

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.

<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.

Comprobación

• Comprueba que el texto del enlace identifica claramente su destino o función.
• Si los enlaces se diferencian únicamente mediante el color:
  • Verifica que el contraste con el texto que lo rodea es al menos de 3:1.
  • Comprueba que se muestran pistas visuales (negrita, subrayado...) cuando el enlace obtiene el foco.

Nota: Utiliza una herramienta como Link Contrast Checker para comprobar los enlaces identificados usando solo el color.