Pratique exemplaire

Fonction du lien

  • Fournir le lien du texte de lien qui indique la fonction du lien sans ajout de contexte additionnel.
  • Si le texte du lien n’est pas autodescriptif, assurez-vous que le contexte du lien décrit la fonction du lien.
  • Ne pas utiliser de texte de lien vide comme “Cliquer ici” ou “Lire plus” etc.
  • Faire la distinction entre les liens dont le texte est identique, mais dont les destinations sont différentes soit en
    • reformulant le texte du lien,
    • utilisant une étiquette ARIA, ou
    • ajoutant du texte visuellement caché au texte du lien.

Activation du lien

  • Les liens personnalisés ont besoin de tabindex="0" pour recevoir la cible du clavier et un événement onkeypress pour être activé par la touche Entrée.
  • Le nom visible d’un lien correspond au nom accessible du lien ou est y inclus.

Indicateur visuel de la cible

  • Les liens doivent avoir un état de cible visible.

Distinguer les liens du texte

  • Assurez-vous que les liens comportent des indicateurs visuels pour permettre aux utilisateurs de les identifier rapidement.
  • La couleur ne doit pas être le seul moyen de différencier un lien du texte ordinaire. Accompagnez la couleur d’un autre indice visuel (p. ex. soulignement, italique, gras) pour différencier le texte du lien du texte ordinaire.

Le lien s'ouvre dans une nouvelle fenêtre

  • 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.

Blocs de navigation

  • Identifiez les blocs de navigation importants au moyen de l’élément <nav> ou de l'attribut role="navigation".
  • Lorsqu’il y a deux régions de navigation ou plus sur la page, nommez chaque région avec aria-label ou aria-labelledby pour les différencier.
  • Indiquez visuellement l’emplacement actuel en utilisant CSS, et sémantiquement, en utilisant aria-current="page" l’attribut.

Liens de saut navigation

  • Placez le lien de saut de navigation au haut de la page avant tout autre élément ciblable (lien, bouton ou commande personnalisée).
  • Le lien de saut n’a pas besoin d’être visible avant d’avoir reçu la cible.
  • Utilisez un texte de lien clair – p. ex. “Passer au contenu principal” ou “Passer au contenu”
  • Utilisez un lien de même page en ciblant la valeur de l’attribut d'identification de la destination (habituellement l’élément <main>.
  • Attribuez l'attributtabindex="-1" à la destination. Cela corrige les lacunes de certains navigateurs qui déplacent la fenêtre d'affichage vers la destination, mais pas vers la cible.
  • Ne masquez pas le lien de saut en utilisant l’une des options suivantes:
    • Utiliser CSS pour positionner de façon permanente l’écran de renvoi
    • Régler display: none
    • Régler visibility: invisible

Accès multiples

Fournir plus d’une façon de localiser une page Web dans un ensemble de pages Web. Utiliser au moins deux des techniques suivantes :

  • Fournir des liens de navigation vers les pages Web reliées (en anglais)
  • Fournir une table des matières (en anglais)
  • Fournir un plan du site (en anglais)
  • Fournir une fonction de recherche pour aider l'utilisateur à trouver le contenu (en anglais)
  • Fournir une liste de liens vers toutes les autres pages Web (en anglais)
  • Fournir des liens vers toutes les autres pages du site à partir de la page d'accueil (en anglais)

Table des matières

  • S’assurer que la table des matières reflète la hiérarchie des en-têtes du document.
  • S’assurer que chaque sujet de la table des matières est lié à l’endroit approprié.

Cible et ordre de cible

  • Assurez un ordre de tabulation significatif en positionnant le contenu ciblable dans la même séquence que le code sous-jacent.
  • S’assurer que l’ordre de navigation au clavier est logique et intuitif. Habituellement, cela signifie qu’il faut s’assurer que la navigation suit le flux visuel de la page, de gauche à droite, de haut en bas. Il passe par la bannière, la navigation principale, la navigation et les commandes des pages, puis le pied de page d’une page type.
  • Éviter d’utiliser des valeurs tabindex supérieures à 0.

Raccourcis clavier de caractères

Critère de succès 2.1.4 : Si un raccourci clavier est utilisé dans un contenu utilisant uniquement des lettres (y compris des majuscules et des minuscules), des signes de ponctuation, des chiffres ou des symboles, au moins un des énoncés suivants est vrai :

Désactiver
Un mécanisme permet de désactiver le raccourci;
Remapper
Un mécanisme permet de remapper le raccourci pour y inclure une ou plusieurs touches de clavier non imprimables (p. ex., Ctrl, Alt);
Actif seulement sur la cible
Le raccourci clavier d’un composant d’interface utilisateur n’est actif que lorsque ce composant a une cible.

Changement de contexte

Dans la mesure du possible, donner à l’utilisateur le contrôle des changements de contexte au moyen d’une action explicite de l’utilisateur généralement connue pour provoquer un changement de contexte; p. ex., cliquer sur un lien ou appuyer sur un bouton de validation.

Les changement de contexte :

  • ne doivent jamais être déclenchés sur la cible
  • doivent être anticipés par l’utilisateur s’ils sont déclenchés par la modification du paramètre d’une commande (à la saisie).

Cohérence

Navigation cohérente
D’une page à l’autre, l’ordre relatif des composants de la page et des liens dans les blocs de navigation devrait demeurer inchangé. D’autres composants ou liens peuvent être retirés ou insérés, mais l’ordre relatif doit demeurer le même.
Identification cohérente
D’une page à l’autre, les composantes fonctionnelles identiques doivent être nommées de façon uniforme. Par exemple, une vignette nommée « Rechercher » sur une page est nommée « Rechercher » sur les autres pages et non, comme c’est le cas parfois, « Trouver ». Cela inclut le texte alt des icônes et autres éléments non textuels ayant une fonctionnalité identique.
Haut de la page