link

Cuándo utilizarlo

Casi nunca; se debe usar <a href="...">. El ancla nativa ofrece foco, activación por teclado con Enter, el estado de visitado, la apertura en una nueva pestaña mediante el menú contextual, la posibilidad de arrastrar para crear un marcador y una URL real que el usuario puede compartir. Usar role="link" en un <div> elimina todas esas ventajas.

Los únicos casos legítimos son:

• Un sistema de diseño de terceros incluye un componente de «enlace» que no usa el elemento ancla y que no se puede reemplazar.
• Se está parcheando un <div onclick> inaccesible mientras llega una refactorización.

Si se usa role="link", también es necesario:

• Hacer el elemento enfocable con tabindex="0".
• Conectar el evento keydown para Enter (los enlaces NO se activan con la barra espaciadora, ese comportamiento corresponde a los botones).
• Proporcionar al usuario una forma real de ver la URL de destino al pasar el ratón por encima o al recibir el foco, ya que no hay atributo href.

Errores frecuentes

• <a> sin href. Sin href, el elemento no forma parte del orden de tabulación y los lectores de pantalla no lo anuncian como enlace.
• <a href="#" onclick="..."> utilizado como botón. Se debe usar <button> en su lugar: los enlaces navegan, los botones actúan.
• role="link" que se activa con la barra espaciadora. La barra espaciadora desplaza la página; los enlaces se activan únicamente con Enter.
• Texto de enlace del tipo «haga clic aquí» o «leer más». Los usuarios de lectores de pantalla que consultan la lista de enlaces solo ven el texto del enlace: debe ser descriptivo.
• Ausencia de aria-current="page" en el enlace que representa la página actual dentro de una navegación.

Ejemplo

<!-- Opción preferida -->
<a href="/toolkit/standards/wcag/">Referencia WCAG 2.2</a>

<!-- Solo cuando <a href> es imposible -->
<span
  role="link"
  tabindex="0"
  onclick="location.href='/toolkit/'"
  onkeydown="if (event.key === 'Enter') location.href='/toolkit/'"
>
  Toolkit
</span>