Enlaces

Estructura del enlace

Para crear un enlace utilizamos el elemento <a> junto con el atributo href para indicar el destino.

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

Enlaces accesibles

Para que los enlaces sean accesibles deben ser:

• Descriptivos: El propósito del enlace debe quedar claramente definido en el texto del enlace.
• Distinguibles: Especialmente los que están incluidos dentro de un bloque de texto. Para ello los puedes subrayar, destacar en negrita o utilizar un color diferente.
• Consistentes: Utiliza el mismo texto para los enlaces que van a un mismo destino.

Ocultar parte del enlace

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

<a href="#">
  Leer artículo <span class="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.

Saltar al contenido principal

El enlace “saltar al contenido principal” 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.

Este enlace se coloca al principio de la página para poder saltar el menú de navegación e ir directo al contenido principal.

<a href="#content">Saltar al contenido principal</a>
...
<main id="content">...</main>

Nota: Puedes hacer que este enlace sea visible únicamente para lectores de pantalla y navegación por teclado mediante CSS.