Saltar al contenido principal

Enlaces

El elemento a

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

HTML
<a href="https://twitter.com">Twitter</a>

Enlaces accesibles

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

  • Los enlaces tienen que tener suficiente contraste entre el color de texto y el del fondo. Para comprobarlo puedes utilizar una herramienta para calcular el contraste del color.

  • Los enlaces incluidos dentro de un texto deben ir subrayados, y no identificarse únicamente con el color.

  • Los enlaces deben ser descriptivos. El propósito del enlace debe quedar claramente definido, preferiblemente en el texto del enlace, sin depender de su contexto.

  • Los enlaces deben ser consistentes. Para evitar confusiones, hay que utilizar el mismo texto para los enlaces que van a un mismo destino, y no repetir el mismo texto en enlaces que van a destinos diferentes.

  • La URL no debe usarse como texto del enlace, pero puede aportar información adicional. Por este motivo es importante que esté construida de forma comprensible, reflejando la estructura de directorios y páginas del sitio.

Ocultar el texto del enlace

Para conseguir enlaces descriptivos, y que no sean demasiado largos o redundantes, existen dos técnicas: la primera es ocultar visualmente una parte del texto del enlace; y la segunda, utilizar el atributo aria-label.

Ejemplo

Título del artículo

...

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

Técnica 1: ocultar parte del texto del enlace

Incluimos el título del artículo para que el enlace sea descriptivo y lo hacemos invisible mediante una técnica para ocultar el texto.

HTML
<h2>Título del artículo</h2>
<p>...</p>

<a href="/destino">Leer artículo <span class="screen-reader">"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
<h2>Título del artículo</h2>
<p>...</p>

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