Regla de accesibilidad: Los enlaces con el mismo nombre deben tener un propósito similar

Acerca de esta regla de accesibilidad

Cuando los usuarios de lectores de pantalla navegan por una página, a menudo abren una lista de todos los enlaces para escanear rápidamente los destinos disponibles. Si esa lista contiene varios enlaces todos etiquetados como “Leer más”, no hay forma de distinguirlos. Esto crea confusión y obliga a los usuarios a salir de la lista de enlaces, encontrar cada enlace en contexto, y leer el contenido circundante para entender su propósito. Los usuarios que son ciegos o sordociegos son los más afectados, pero este problema también impacta a cualquiera que dependa del texto del enlace para entender las opciones de navegación.

Esta regla se relaciona con el Criterio de Éxito WCAG 2.4.9: Propósito del Enlace (Solo Enlace), un requisito de Nivel AAA. Establece que el propósito de cada enlace debe ser determinable solo desde el texto del enlace. Mientras que el criterio relacionado 2.4.4 (Nivel A) permite que el propósito del enlace se determine a partir del contexto, SC 2.4.9 establece un estándar más alto: el texto de cada enlace debe ser auto-explicativo por sí mismo. Adicionalmente, el Criterio de Éxito 3.2.4: Identificación Consistente requiere que los componentes con la misma funcionalidad sean identificados de manera consistente. En conjunto, estos criterios significan que los enlaces con el mismo nombre deberían ir al mismo lugar, y los enlaces que van a lugares diferentes deberían tener nombres diferentes.

Cómo solucionar el problema

El principio clave es directo: si dos enlaces tienen el mismo nombre accesible, deberían servir el mismo propósito. Si sirven propósitos diferentes, dales nombres accesibles distintos.

Aquí tienes formas prácticas de solucionarlo:

Escribe texto descriptivo en los enlaces. En lugar de frases genéricas como “Leer más” o “Haz clic aquí”, escribe texto de enlace que describa el destino, como “Lee la política de accesibilidad” o “Ver las actas de la reunión de enero”.
Usa aria-label para diferenciar enlaces. Cuando el texto visible debe ser genérico (ej., por razones de diseño), usa aria-label para proporcionar un nombre único y descriptivo para cada enlace.
Usa aria-labelledby para combinar encabezados visibles u otro texto con el enlace para formar un nombre accesible único.
Proporciona texto alt significativo en enlaces de imagen. Si un enlace contiene solo una imagen, el atributo alt de la imagen se convierte en el nombre accesible del enlace. Asegúrate de que describe el destino del enlace.

Ejemplos

Incorrecto: múltiples enlaces con el mismo nombre que van a páginas diferentes

En este ejemplo, dos enlaces “Leer más” aparecen idénticos para la tecnología de asistencia pero llevan a artículos completamente diferentes:

<h3>Neighborhood News</h3>

<p>Seminole tax hike: City managers propose a 75% increase in property taxes.
  <a href="taxhike.html">Read more...</a>
</p>

<p>Baby Mayor: Voters elect the city's youngest mayor ever.
  <a href="babymayor.html">Read more...</a>
</p>

Un lector de pantalla listando todos los enlaces en esta página mostraría dos entradas idénticas — “Read more…” — sin forma de distinguirlas.

Correcto: usar `aria-label` para diferenciar enlaces

Al agregar un aria-label, cada enlace obtiene un nombre accesible único mientras mantiene el texto visible corto:

<h3>Neighborhood News</h3>

<p>Seminole tax hike: City managers propose a 75% increase in property taxes.
  <a href="taxhike.html" aria-label="Read more about Seminole tax hike">Read more...</a>
</p>

<p>Baby Mayor: Voters elect the city's youngest mayor ever.
  <a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">Read more...</a>
</p>

Correcto: escribir texto de enlace descriptivo directamente

El enfoque más simple es hacer que el texto del enlace sea descriptivo por sí mismo:

<a href="routes.html">Current routes at Boulders Climbing Gym</a>

Correcto: texto `alt` descriptivo en un enlace de imagen

Cuando un enlace envuelve una imagen, el atributo alt sirve como el nombre accesible del enlace:

<a href="routes.html">
  <img src="topo.gif" alt="Current routes at Boulders Climbing Gym">
</a>

Correcto: imagen y texto juntos en un enlace

Cuando un enlace contiene tanto una imagen como texto, usa un atributo alt vacío en la imagen para evitar redundancia. El texto visible se convierte en el nombre accesible:

<a href="routes.html">
  <img src="topo.gif" alt="">
  Current routes at Boulders Climbing Gym
</a>

Correcto: enlaces con el mismo nombre que apuntan al mismo destino

Si dos enlaces van genuinamente al mismo lugar, está bien que compartan el mismo nombre:

<nav>
  <a href="/contact">Contact us</a>
</nav>

<footer>
  <a href="/contact">Contact us</a>
</footer>

Ambos enlaces están etiquetados “Contact us” y ambos llevan a la misma página de contacto, por lo que no hay ambigüedad.

Correcto: usar `aria-labelledby` para construir un nombre único a partir del contenido existente

Puedes hacer referencia a un encabezado cercano para crear un nombre accesible único sin agregar texto visible extra:

<h3 id="tax-heading">Seminole Tax Hike</h3>
<p>City managers propose a 75% increase in property taxes.
  <a href="taxhike.html" aria-labelledby="tax-heading tax-link">
    <span id="tax-link">Read more</span>
  </a>
</p>

<h3 id="mayor-heading">Baby Mayor Elected</h3>
<p>Voters elect the city's youngest mayor ever.
  <a href="babymayor.html" aria-labelledby="mayor-heading mayor-link">
    <span id="mayor-link">Read more</span>
  </a>
</p>

El nombre accesible del primer enlace se resuelve a “Seminole Tax Hike Read more” y el segundo a “Baby Mayor Elected Read more”, haciéndolos distinguibles en una lista de enlaces.

Learn more: