Enlaces

Crea enlaces descriptivos y que estén bien identificados.

Estructura del enlace

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

HTML

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

Enlaces accesibles

Para mejorar la accesibilidad, los enlaces deben ser:

Descriptivos: El propósito del enlace debe entenderse sin depender del contexto que lo rodea. Evita textos como “haz clic aquí”.
Distinguibles: Asegúrate de que los enlaces se diferencien visualmente del texto normal, sobre todo dentro de párrafos. Puedes usar subrayado, color o negrita.
Consistentes: Usa el mismo texto para enlaces que llevan al mismo destino, para no generar confusión.

Utiliza una herramienta como Link Contrast Checker para comprobar los enlaces cuando se distinguen solo por el color.

Ocultar parte del enlace

Para que los enlaces sean descriptivos pero no demasiado extensos visualmente, puedes ocultar parte del texto mediante CSS:

HTML

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

O utilizar el atributo aria-label:

HTML

<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” permite evitar secciones repetidas, como el menú de navegación, y acceder directamente al contenido principal.

Es especialmente útil para quienes navegan con teclado o lectores de pantalla, ya que ahorra tiempo y mejora la experiencia.

HTML

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

Mediante CSS, puedes hacer que este enlace solo sea visible al recibir el foco para no afectar el diseño visual, pero seguir siendo accesible mediante teclado.