Liens

Fonction du lien

Les lecteurs d’écran permettent aux utilisateurs de parcourir des liens sur une page, en passant de l’un à l’autre sans déclarer le texte avoisinant. Dans la mesure du possible, fournir le texte du lien qui indique la fonction du lien sans avoir besoin de contexte supplémentaire. Selon le Guide de rédaction du contenu de Canada.ca, « Vos liens devraient être descriptifs et pouvoir être autonomes afin que les gens sachent à quoi s’attendre s’ils cliquent dessus. »

Les personnes ayant une déficience visuelle peuvent également déterminer la fonction d’un lien en explorant le contexte du lien. S’il est impossible de rédiger un texte de lien autonome, assurez-vous que le texte de lien indique sa fonction en combinaison avec l’un des éléments suivants :

• La phrase qui accompagne;
• La liste de pièces jointes;
• Le paragraphe joint;
• La cellule de tableau jointe et la cellule d’en-tête de tableau;
• L'élément de liste parent d’une liste imbriquée (l’exemple suit).

Si deux liens ou plus sur la même page ont un texte de lien identique, mais des destinations différentes, vous pouvez les distinguer de trois façons:

• Reformuler le texte du lien.
• Utiliser une étiquette ARIA (l’attribut aria-label ou aria-labelledby). L’étiquette ARIA remplace le texte du lien natif dans la technologie d’assistance. Assurez-vous d’inclure le texte visible du lien dans l’étiquette ARIA pour que les utilisateurs puissent cibler le lien (voir Activation du lien, ci-dessous).
• Ajouter du texte visuellement caché au texte du lien (l’exemple suit).

Lien et bouton

Les développeurs confondent souvent les rôles des liens et des boutons, ce qui transmet la confusion aux utilisateurs des lecteurs d’écran. Les utilisateurs s’attendent à ce que les liens naviguent (d’une page à l’autre ou à l’intérieur d’une page) et à ce que les boutons déclenchent un effet local (ou soumettent un formulaire). L’utilisateur d’un lecteur d’écran peut être désorienté lorsqu’il active un bouton et navigue plutôt vers une nouvelle page ou lorsqu’il active un lien et interprète plutôt un effet de bouton local.

<h1>Outils et ressources</h1>
<h2>Planification d’événements virtuels accessibles – Aide-mémoire</h2>
<p>[Description de la ressource]</p>
<p>
   <a href="[...]" aria-label="Planification d’accès aux événements virtuels accessibles – Aide-mémoire">Accès</a>
</p>
<h2>Réseau des employés handicapés (REH)</h2>
<p>[Description de la ressource]</p>
<p>
   <a href="[...]" aria-label="Accès au Réseau des employés handicapés">Accès</a>
</p>

<h1>Outils et ressources</h1>
<h2 id="planning-virtual">lanification d’événements virtuels accessibles – Aide-mémoire</h2>
<p>[Description de la ressource]</p>
<p>
   <a id="linktext" href="[...]" aria-labelledby="linktext planning-virtual">Accès</a>
</p>
<h2 id="ewdn">Réseau des employés handicapés (REH)</h2>
<p>[Description de la ressource]</p>
<p>
   <a href="[...]" aria-labelledby="linktext ewdn">Accès</a>
</p>

<h1>Outils et ressources</h1>
<h2>Planification d’événements virtuels accessibles – Aide-mémoire</h2>
<p>[Description de la ressource]</p>
<p>
   <a href="[...]">
      Accès
      <span class="wb-inv">Planification d’événements virtuels accessibles – Aide-mémoire</span>
   </a>
</p>
<h2>ERéseau des employés handicapés (REH)</h2>
<p>[Description de la ressource]</p>
<p>
   <a href="[...]">
      Accès
      <span class="wb-inv">Réseau des employés handicapés</span>
   </a>
</p>

.wb-inv {
   clip: rect(1px,1px,1px,1px);
   height: 1px;
   margin: 0;
   overflow: hidden;
   position: absolute;
   width: 1px;
}

Ressources WCAG connexes

Activation du lien

Certaines personnes en situation de handicap ne sont pas en mesure d’utiliser une souris et utilisent plutôt des mécanismes comme le clavier, la reconnaissance vocale et d’autres dispositifs de pointage pour naviguer et interagir avec le Web. Assurez-vous que les liens (ainsi que les boutons et autres commandes) sont réglables et utilisables au moyen d’un clavier et d’une saisie vocale, et non seulement à l’aide d’une souris.

Les liens natifs sont activés au clavier en appuyant sur la touche Entrée. Si vous concevez un lien personnalisé en utilisant l’attribut ARIA role=”link” et un élément div ou span, assurez-vous d'inclure :

• Un attribut tabindex="0", de sorte que le lien personnalisé reçoit la cible du clavier au moyen de la touche Tab.
• Un auditeur d’événement JavaScript pour la touche Entrée pour l'activation, en plus du clic de souris.

Pour activer un lien en utilisant la saisie vocale, l’utilisateur déclare que le nom du lien est visible. Lorsque vous utilisez aria-label ou aria-labelledby pour nommer un lien, assurez-vous que le texte visible du lien correspond à l’étiquette ARIA ou qu'il est inclus dans celle-ci. Sinon, les utilisateurs de saisies vocales ne pourront pas cibler le lien par son nom, ce qui les obligera à passer à des techniques moins efficaces pour activer le lien.

Ressources WCAG connexes

Indicateur visuel de la cible

Pour les utilisateurs du clavier seulement, le suivi visuel de l’endroit où ils se trouvent dans une page peut être difficile. Les utilisateurs de souris peuvent parcourir la page et recevoir deux indices au sujet des éléments exploitables : la flèche de la souris se transforme en une main lorsque le curseur passe au-dessus d’un élément pouvant être exploité, et l’élément affiche son état « survol » pour indiquer qu’il est accessible (p. ex., un soulignement apparaît sous un lien).

Habituellement, les utilisateurs du clavier appuient sur la touche Tab pour naviguer dans les éléments interactifs d’une page Web (liens, boutons, champs de formulaire, commandes personnalisées).

• La tabulation vers un élément lui donne la « cible » du clavier, auquel moment il peut être activé avec le clavier. Voir la section Cible et ordre de cible plus loin dans ce module.
• Les utilisateurs de clavier voyants ont besoin d’une rétroaction visible de l’état de la cible d'une commande.

Les navigateurs Web fournissent un indicateur visuel de la cible par défaut qui varie en apparence selon le navigateur, mais qui consiste habituellement en une bordure ou un contour autour de l’élément ciblé.

• Évitez toujours les styles qui éliminent ou limitent la visibilité des indicateurs de cible du clavier. L’indicateur visuel de la cible par défaut du navigateur peut être supprimé avec CSS outline:0 ou outline: none, ce qui est une barrière commune et un anti-pattern.
• Sa pratique exemplaire consiste à utiliser CSS pour concevoir un indicateur de cible très visible avec un fort contraste.

a:focus {
   outline: none;
}

 Bon exemple : Indicateur visuel de la cible du site Canada.ca

Dans cet exemple, le premier lien d’un menu de trois comporte un indicateur visuel de la cible composé d’un contour noir épais, fixé étroitement au texte.

CSS

Début du code

a:focus { 
   outline: 2px auto -webkit-focus-ring-color; 
   outline-offset: -2px; 
}

Fin du code

Ressources WCAG connexes

Distinguer les liens du texte

Les utilisateurs malvoyants et daltoniens ont besoin de faire la distinction entre les liens et le texte voisin. La façon la plus simple de le faire consiste à souligner le lien.

Lorsque la couleur est utilisée comme seule façon d’identifier un lien (ce qui signifie que le soulignement a été supprimé), deux conditions doivent être remplies :

• Contraste de 3:1 entre le corps du texte et le texte du lien.
• Un « indice visuel » (pas seulement un changement de couleur) qui apparaît sur le survol de la souris et la cible de clavier. La façon la plus courante d’y arriver est de souligner le lien sur le survol et la cible, mais vous pouvez aussi fournir une couleur d’arrière-plan, ou une bordure ou un contour.

Ces exigences s’ajoutent à l’exigence minimale de contraste des textes de 4,5:1 (voir le module du tutoriel 7 Conception visuelle et couleurs > Contraste). Il peut être difficile de trouver une couleur de lien qui présente un contraste de 3:1 avec le corps noir et un contraste de 4,5:1 avec un fond blanc. La technique WCAG G183 énumère les valeurs de couleur qui le sont dans l’exemple 1 (voir Ressources WCAG connexes, ci-dessous).

Ressources WCAG connexes

Liens qui s’ouvrent dans une nouvelle fenêtre

Les liens s’ouvrent dans une nouvelle fenêtre via l’attribut target=”_blank”.

En général, évitez d’ouvrir des liens dans une nouvelle fenêtre. Lorsque les liens s’ouvrent dans une nouvelle fenêtre, avertissez les utilisateurs. Soit en :

• Ajoutant le lien visible « (Ouvre une nouvelle fenêtre) ».
• Affichant un avertissement visuel caché sur la cible et le survol (voir exemple).

<p>
   Voici un exemple d’un 
   <a class="info" href="[...]" target="_blank">
      <strong>Lien externe</strong>
      <span>Ouvre une nouvelle fenêtre</span>
   </a>          
</p>

Ressources WCAG connexes