Gros travail sur la mise en accessibilité des liens sur le blog.

Ce que j’ai fait :

• modifier le code du blog pour avoir des liens accessibles et en conformité avec les recommandations Opquast

Aperçu du code

Les hyperliens de même nature ont des couleurs, des formes et des comportements identiques sur toutes les pages

Tous les liens présents dans mes articles sont de couleur bleu par défaut. Les liens du menu de navigation, du header et des titres d’article ont des couleurs spécifiques à leur fonction.

Le survol ou l’activation des hyperliens ne modifie pas la mise en page

Les liens par défaut sont soulignés au survol, les autres liens changent de couleur. C’est une mise en forme simple mais efficace.

Des styles différents pour les liens visités et non visités

J’ai choisi de changer la couleur des liens visités pour qu’ils soient violet. Il s’agit de la couleur par défaut des liens visités, donc c’est potentiellement un comportement avec lequel les internautes sont familiers.

La langue principale de la page cible d’un hyperlien est identifiable lorsqu’elle diffère de celle de la page d’origine

Pour les liens pointant vers une page en anglais par exemple, j’ai ajouté des attributs spécifiques :

- l'emploi de la syntaxe <a href="http://getbem.com/" lang="en" hreflang="en">BEM (Block Element Modifier)</a> pour nommer les class CSS

L’attribut lang="en" signale aux lecteurs d’écran que le contenu du lien est dans une langue différente de la langue principale, ici l’anglais. L’attribut hreflang="en" indique que la page cible du lien est en anglais.

L’attribut lang doit être utilisé pour tous les mots différents de la langue principale signalée dans la balise html.

Le libellé de chaque hyperlien décrit sa fonction ou la nature du contenu vers lequel il pointe

J’ai dû reprendre un à un tous les liens insérés dans chacun de mes articles depuis le lancement de ce blog (heureusement pour moi je n’en suis qu’au jour 16 et pas au jour 99).

Je n’ai pas touché aux liens dont je jugeais l’intitulé suffisamment explicite.

- lire les <a href="https://www.w3.org/WAI/fundamentals/accessibility-principles/fr">Principes d'accessibilité du W3C</a>

J’ai ajouté un aria-label sur les liens qui me paraissaient moins évidents à comprendre uniquement via l’intitulé.

je vous propose un retour d'expérience d'<a href="https://twitter.com/eaboaf_" aria-label="Compte Twitter d'Emanuelle Aboaf">Emmanuelle Aboaf</a>

Certains liens m’ont vraiment interrogé sur la manière de compléter l’intitulé, puisque nous sommes censés - dans la mesure du possible - reprendre dans l’attribut aria-label une partie de l’intitulé du lien. Ce problème s’est notamment posé avec les deux liens présents dans mon premier article. En faisant des tests, il est apparu que pour que l’intégralité du texte soit lue, je devais procéder ainsi :

il paraît que <a href="https://vimeo.com/142169449" aria-label="nous sommes toutes et tous légitimes : Conférence en vidéo de Marie Guillaumet sur Viméo">nous sommes toutes et tous légitimes</a>

La répétition de l’intitué dans le aria-label est donc nécessaire car seul le contenu du aria-label est lu par les lecteurs d’écran.

Les hyperliens internes et externes sont différenciés

Voilà sûrement la partie qui m’a posé le plus de problèmes. L’idée est d’avertir clairement l’internaute du fait qu’il va quitter le site qu’il est en train de visiter. Je souhaitais une solution qui permette de remplir plusieurs objectifs :

• la différentiation doit être visible pour tous les internautes, qu’ils utilisent un lecteur d’écran ou non
• je ne souhaitais pas ajouter une mention “lien externe” directement dans l’intitulé. Il s’agit effectivement de la solution la plus claire et la plus simple, mais je la trouve un peu trop verbeuse.
• je voulais que la mise en forme appliquée aux liens visités s’applique également aux liens externes visités
• je voulais une solution pas trop compliquée à implémenter sur les liens déjà existants

J’ai donc choisi la solution suivante :

<a href="https://www.24joursdeweb.fr/2013/attribut-title-avec-moderation/">l'article de Romy Duhem-Verdière : L'attribut title : à consommer avec modération

<span class="sr-only">(lien externe)</span>

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="12" height="12" aria-hidden="true"><path id="stroke-ext" fill="#fff" stroke="#06c" d="M1.5 4.5h6v6h-6z"/><path id="fill-ext" d="M4 2.5l1 1 .25.75-2.5 2.25L5.5 9.25l2.25-2.5.75.25 1 1L11 6.5V1H5.5L4 2.5z" fill="#06f" fill-rule="evenodd"/><path d="M6 2h4v4l-.5.75-1.25-2-3 3.25L4 6.75l3.25-3-2-1.25L6 2z" fill="#fff" fill-rule="evenodd"/></svg>
</a>

J’ai choisi d’utiliser un SVG car la pseudo-class :visited ne tolère que peu de propriétés de style, donc fill et stroke (voir à ce sujet l’article de Mozilla(lien externe)).

Le code suivant me permet donc de changer la couleur du SVG en fonction de l’état du lien, visité ou non :

a {
  color: #3673B0;
  cursor: pointer;
  text-decoration: none;

  svg {
    margin-left: 3px;

    path#stroke-ext {
      stroke: #3673B0;
    }

    path#fill-ext {
      fill: #3673B0;
    }
  }

  &:visited {
    color: #800080;

    svg {
      path#stroke-ext {
        stroke: #800080;
      }

      path#fill-ext {
        fill: #800080;
      }
    }
  }
}

Ce SVG étant porteur de sens, je lui ai ajouté un attrbut aria-hidden="true" pour qu’il ne soit pas lu par les lecteurs d’écran, et j’ai ajouté un <span class="sr-only">(lien externe)</span> contenant un texte de remplacement permettant de rendre explicite l’icone SVG. La class sr-only rend la balise invisible mais toujours lisible par des lecteurs d’écran.

.sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

J’ai encapsulé le code spécifique à un lien externe dans un fichier include, ce qui me permet de n’avoir à ajouter qu’un simple include external-icon.html pour tous les liens externes.

Il aurait été possible de passer par une police d’icones et de générer ensuite l’icone via un <span> et un pseudo-element :after, mais étant donné que je ne prévoyais d’utiliser qu’un seul icone, je ne voyais pas l’intérêt de télécharger une police entière.

Que pensez-vous de cette solution ? N’hésitez pas à donner votre avis !