Saltar al contenido principal

Enlaces

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>

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

  • Debe haber suficiente contraste entre los colores de texto y de fondo. Para comprobarlo puedes utilizar una herramienta para calcular el contraste del color.

  • Los enlaces incluidos dentro de un bloque de texto deberían ir subrayados para ser fácilmente identificables, y no diferenciarse únicamente mediante el color.

  • Los enlaces deben ser descriptivos. El propósito del enlace debe quedar claramente definido en el texto del enlace.

  • Los enlaces deben ser consistentes. Para evitar confusiones, hay que utilizar el mismo texto para los enlaces que van a un mismo destino.

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

Texto de introducción...

Leer artículo "Título"

Técnica 1: ocultar parte del texto del enlace

Incluimos el título del artículo dentro del enlace y lo ocultamos mediante CSS.

HTML
<h2>Título</h2>
<p>...</p>
<a href="#">Leer artículo <span class="screenreader">
"Título"</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</h2>
<p>...</p>
<a href="#" aria-label="Leer artículo 'Título'">Leer artículo</a>

Pauta de Accesibilidad 2.4: Navegable, criterio de conformidad 2.4.4.