Leçon 10Le processus de conception : comment faire de la place pour l'accessibilité du Web ?

Notion 74

L'importance de la navigation par clavier

Compétences ciblées

Identifiez la nécessité de concevoir votre site pour les visiteurs ne possédant qu'un clavier et certaines fonctionnalités associées.

La navigation au clavier offre une meilleure expérience utilisateur sur un site web. La possibilité d'effectuer toutes les différentes actions sur une page Web en utilisant uniquement votre clavier a un impact significatif sur l'efficacité de l'utilisateur. Elle rend également votre site Web accessible au clavier, conformément aux directives d'accessibilité au contenu Web. En revanche, l'utilisation d'une souris peut s'avérer difficile pour les utilisateurs souffrant de handicaps moteurs, de déficiences visuelles ou de limitations matérielles. En outre, des interactions complexes avec la souris peuvent limiter l'accessibilité de votre page Web.

Voici quelques actions pour lesquelles le clavier peut remplacer la souris.

Pour commencer, vous pouvez voir dans ce Canva les touches du clavier principalement utilisées pour la navigation sur un site Web accessible :

Transcription du diaporama
Raccourcis clavier pour une navigation accessible uniquement au clavier (utilisés sur chaque système d'exploitation (OS) suivant les directives WCAG).

La touche Tab est ici une touche clavier essentielle :

Appuyer sur Tab = naviguer dans les liens, les éléments ou les boutons.
Appuyer sur Tab et Shift = naviguer en arrière.
Appuyer sur Tab et Controle = se déplacer dans vos onglets de navigation.

---NOUVELLE DIAPOSITIVE---

Touche Entrée = Activer l'élément courant (lien, bouton, etc.).
Touche Échap = Quitter un menu, une fenêtre contextuelle, une fenêtre de dialogue ou l'action en cours.
Touche d'effacement arrière = Retour à la page précédente.
Touche Espace = Activer un élément (bouton, case à cocher, liste défilée).
Touches fléchées = Naviguer/parcourir les options (dans une liste, entre les boutons).

Cliquer avec un clavier

La touche Entrée est considérée comme l'équivalent d'un clic sur un bouton ou de la soumission d'un formulaire. Une fois qu'un élément de la page Web est ciblé, la touche Entrée déclenche ses actions. Les actions de glisser-déposer peuvent être délicates sans souris et devraient avoir une alternative au clavier comme, par exemple, une action basée sur des valeurs numériques ou des boutons d'action.

Se concentrer sur les éléments

La souris est un excellent outil pour pointer un élément sur l'écran. Pour offrir aux utilisateurs la même expérience, l'accessibilité du clavier doit également garantir que tout élément intéressant peut être pointé, comme les boutons, les liens ou les menus. Certaines ancres HTML, telles que les ancres dans le menu de navigation et dans les sections ou titres principaux, peuvent également aider à parcourir les pages plus facilement avec le clavier.

Faire défiler une page avec un clavier

Faire défiler une page avec un clavier est une fonction native du HTML également, et vous ne devez donc pas limiter le défilement des utilisateurs à la seule souris. Attention à ne pas piéger le visiteur dans un cadre sans possibilité de sortie ! Une telle situation peut se produire avec des modèles, des formulaires ou des menus.

Sur un clavier, la touche Tab est également un bon moyen de parcourir rapidement toute la page web et tous ses éléments.

Fournir un retour d'information aux visiteurs

Lorsqu'il navigue et se concentre sur un élément, le visiteur doit savoir où se trouve le curseur de la souris. Cela l'aide à savoir quand il doit cliquer sur quelque chose ou où le curseur regarde sur la page. Ne remplacez pas l'option outline on focus ; sinon, certains utilisateurs pourraient perdre le curseur !

HTML est accessible au clavier par défaut

Heureusement, le HTML est entièrement compatible avec la navigation au clavier. Il y a quelques éléments auxquels les développeurs doivent faire attention et qu'ils doivent éviter :