Enlaces

Estructura del enlace

Para crear un enlace se utiliza el elemento <a> junto con el atributo href, que indica su destino.

<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, especialmente dentro de los 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.

Enlaces deshabilitados

Para deshabilitar un enlace:

• Elimina el atributo href para que el enlace no sea activable.
• Añade role="link" para que las tecnologías de asistencia lo reconozcan como un enlace.
• Incluye aria-disabled="true" para que se muestre como deshabilitado.

<a role="link" aria-disabled="true">Siguiente Página</a>

Ocultar parte del enlace

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

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

Así, el enlace queda claramente identificado por los usuarios de lectores de pantalla.