Journal : Liens externes accessibles

En recréant ce carnet de zéro, les liens s'ouvraient à même la page, sans créer de nouvel onglet/fenêtre.

Est-ce qu'ajouter un attribut target="_blank" sur des liens hypertextes absolus suffit ? Non, l'exemple du module markdown-it-for-inline ne suffit pas.

J'aimerais :

  • gérer la sécurité avec l'onglet ouvert. Il pourrait être utilisé par des pisteurs, sur la page nouvellement ouverte, par des extensions web verrolées ;
  • informer de la destination aux lecteurs d'écran. La destination étant "un nouvel onglet". Ça correspond au critère 6.1.1 du RGAA ;
  • distinguer visuellement les liens qui ouvrent un nouvel onglet. Même intention, visuelle cette fois.

La sécurité se gère à l'aide des valeurs noopener et noreferrer de l'attribut rel.

Elles préviennent, respectivement, l'accès à la propriété window.opener et à la diffusion de la provenance via l'entête HTTP Referrer.

Ça aide à préserver notre vie privée numérique.

On peut donner du contexte aux lecteurs d'écran dans un label ARIA :

  1. qui repend l'intitulé du lien ;
  2. et qui spécifie l'ouverture dans un nouvel onglet.

L'utilisation du rotor VoiceOver est un bon exemple de cette visibilisation :

Capture d'écran de la navigation par hyperliens dans le rotor VoiceOver

L'antépénultième lien de cette capture d'écran rend explicite l'ouverture dans un nouvel onglet. Ça correspondrait au code HTML suivant :

<a href="..." aria-label="critère 6.1.1 du RGAA (ouvre une nouvelle fenêtre)">
  critère 6.1.1 du RGAA
</a>

Quelques lignes de CSS suffisent à ajouter un symbole visuel à la suite du lien :

a[target="_blank"]::after {
  content: "";
  display: inline-block;
  inline-size: .8em;
  block-size: .8em;
  /* ... */
  background-color: currentColor;
  mask-image: url("data:image/svg+xml;base64, …");
  mask-repeat: no-repeat;
  mask-size: contain;
}

L'utilisation combinée des propriétés background-color et mask-* aident à respecter les proportions de l'image vectorielle et à la détourer aux couleurs du texte du lien.

L'image est encodée directement dans la feuille CSS pour éviter un temps de latence à l'affichage.

C'est bon, nos liens externes sont désormais accessibles. Le code source des liens externes accessibles pour markdown-it (intégré à Build Awesome) est consultable dans le dépôt de ce carnet.