Regla de accesibilidad: Los enlaces deben tener texto distinguible

Acerca de esta regla de accesibilidad

Los enlaces son uno de los elementos interactivos más fundamentales en la web. Cuando un enlace carece de un nombre accesible, los usuarios de lectores de pantalla escuchan algo como “enlace” sin más contexto, haciendo imposible entender el propósito o destino del enlace. Esto afecta a personas que son ciegas, sordociegas, o tienen visión reducida y dependen de lectores de pantalla, así como a usuarios que solo usan teclado y navegan por los enlaces secuencialmente.

El nombre accesible de un enlace puede provenir de varias fuentes: su contenido de texto visible, un atributo aria-label, una referencia aria-labelledby, un atributo title, o el texto alt de una imagen contenida dentro de él. Si ninguna de estas proporciona una cadena no vacía, el enlace no tiene texto distinguible, y esta regla lo marcará.

Más allá de tener texto, los enlaces también deben ser programáticamente enfocables. Evita depender de eventos JavaScript específicos del dispositivo como onmouseover o mouseout(), que son inaccesibles para usuarios de teclado. Usa alternativas independientes del dispositivo como onfocus, onblur, focus(), y blur(). Adicionalmente, no ocultes el texto del enlace de las tecnologías de asistencia usando display: none, visibility: hidden, o aria-hidden="true" en el enlace o su contenido de texto.

También es importante usar elementos <a> semánticos con un atributo href válido en lugar de simular enlaces con elementos <span> o <div> y controladores de clic. Los enlaces reales son enfocables por defecto y transmiten el rol correcto a las tecnologías de asistencia.

Criterios de conformidad WCAG relacionados

Esta regla se relaciona con dos criterios de conformidad de Nivel A que se aplican en WCAG 2.0, 2.1, y 2.2:

WCAG 2.4.4 (Propósito de los enlaces en contexto): Los usuarios deben poder determinar el propósito de cada enlace solo con el texto del enlace, o con el texto del enlace combinado con su contexto determinado programáticamente.
WCAG 4.1.2 (Nombre, función, valor): Todos los componentes de interfaz de usuario, incluyendo enlaces, deben tener un nombre accesible y función que puedan ser determinados programáticamente.

Esta regla también es requerida bajo Section 508, EN 301 549, y las directrices Trusted Tester.

Cómo solucionarlo

Añade contenido de texto visible dentro del elemento <a>.
Para enlaces de imagen, proporciona texto alt significativo en el elemento <img>.
Usa aria-label cuando necesites proporcionar un nombre accesible que difiera o complemente el texto visible.
Usa aria-labelledby para referenciar el texto de otro elemento como el nombre accesible del enlace.
No ocultes el texto del enlace de los lectores de pantalla con aria-hidden="true" o CSS que elimine elementos del árbol de accesibilidad.
Asegúrate de que los enlaces sean enfocables usando elementos <a> apropiados con atributos href y evitando controladores de eventos solo para ratón.

Ejemplos

Enlace vacío (incorrecto)

Un enlace sin texto o nombre accesible:

<a href="/settings"></a>

Un enlace que solo contiene una imagen sin texto alt:

<a href="/home">
  <img src="logo.png" alt="">
</a>

Un enlace con su texto oculto de las tecnologías de asistencia:

<a href="/profile">
  <span aria-hidden="true">Profile</span>
</a>

Enlace con texto visible (correcto)

<a href="/settings">Settings</a>

Enlace de imagen con texto alt descriptivo (correcto)

<a href="/home">
  <img src="logo.png" alt="Homepage">
</a>

Enlace con `aria-label` (correcto)

Esto es útil cuando múltiples enlaces comparten el mismo texto visible, como enlaces repetidos “Leer más”:

<h3>Accessibility Updates</h3>
<p>New WCAG 2.2 guidelines have been published.
  <a href="/wcag22" aria-label="Read more about WCAG 2.2 updates">Read more</a>
</p>

<h3>Screen Reader Tips</h3>
<p>Learn how to navigate tables with a screen reader.
  <a href="/sr-tips" aria-label="Read more about screen reader tips">Read more</a>
</p>

Enlace con `aria-labelledby` (correcto)

<h3 id="report-title">Annual Report 2024</h3>
<a href="/report-2024.pdf" aria-labelledby="report-title">Download PDF</a>

Enlace de icono con texto visualmente oculto (correcto)

Para enlaces que usan iconos sin texto visible, usa un <span> visualmente oculto para proporcionar un nombre accesible:

<a href="/search">
  <svg aria-hidden="true" focusable="false">
    <use href="#icon-search"></use>
  </svg>
  <span class="visually-hidden">Search</span>
</a>

La clase visually-hidden oculta el texto visualmente pero lo mantiene disponible para lectores de pantalla:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Learn more: