ARIA : le rôle link

Description

Le rôle link est utilisé pour identifier un élément qui crée un lien hypertexte vers une ressource qui se trouve dans ou en dehors de l'application.

Lorsque le HTML sémantique n'est pas utilisé dans le but prévu, les fonctions interactives doivent être réimplémentées. Par exemple, lorsque role="link" est ajouté à un élément, la touche TAB doit permettre de cibler le lien et la touche ENTRER doit exécuter le lien lorsqu'il est ciblé.

Utilisez l'attribut tabindex avec une valeur à 0 pour vous assurer que le lien est dans l'ordre correct de ciblage avec la tabulation.

Exemple

Pour recréer un lien accessible en utilisant le rôle link sur un élément qui n'est pas un <a>, vous devez vous assurer que le lien reçoit la mise au point dans le bon ordre d'onglet, que l'élément ressemble à un lien, et que le « lien » se comporte comme un lien.

<span data-href="https://mozilla.org" tabindex="0" role="link">
  Un faux lien, accessible, dans un span
</span>

CSS

span[role="link"] {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
span[role="link"]:hover,
span[role="link"]:active,
span[role="link"]:focus {
  color: purple;
}

span[role="link"]:focus {
  background-color: palegoldenrod;
  outline: 1px dotted;
}

JavaScript

const fauxLiens = document.querySelectorAll('[role="link"]');

for (const lien of fauxLiens) {
  lien.addEventListener("click", navigateLink);
  lien.addEventListener("keydown", navigateLink);
}

// prend en charge les événements de clic et de clavier sur le lien
function navigateLink(e) {
  if (e.type === "click" || e.key === "Enter") {
    const ref = e.target ?? e.srcElement;
    if (ref) {
      window.open(ref.getAttribute("data-href"), "_blank");
    }
  }
}

Si l'élément avec role="link" reçoit un événement du clavier ENTREZ, cela exécute le lien, en allant à la page liée ou en déplaçant la vue vers la zone cible de la page.

Facultativement, SHIFT + F10 ouvre un menu contextuel pour le lien.

Bonnes pratiques

Les différents rôles sont utilisés pour définir des modèles interactifs communs. Semblable aux rôles document-structure, certains de ces rôles, y compris le rôle link, dupliquent la sémantique des éléments HTML natifs qui sont bien pris en charge et ne doivent pas être utilisés.

Évitez d'utiliser link, que nous avons inclus par souci d'exhaustivité. L'équivalent sémantique <a> a une interactivité accessible qui est disponible et pris en charge.

Utilisez le HTML

Utilisez de préférence l'élément <a>.

Spécifications

Voir aussi

• L'élément <a>
• L'élément <button>
• aria-label
• Bonnes pratiques ARIA - Rôle link (en anglais)