Accessibilité : ne négligez pas la navigation au clavier

La navigation au clavier : un enjeu pour vos utilisateurs

La navigation au clavier est un aspect souvent négligé en matière d’accessibilité web. C’est pourtant un prérequis essentiel pour permettre à tous les utilisateurs, notamment porteurs d’un handicap, de naviguer efficacement. Pour certains utilisateurs, le clavier est leur seul moyen de parcourir un site web, c’est pourquoi il est impératif de rendre tous les contenus et éléments interactifs accessibles avec le clavier. Rappelons à toutes fins utiles que 16% de la population mondiale est porteuse d’un handicap, et 13% de la population française.

Dans cet article nous allons nous pencher sur les bonnes pratiques à mettre en place pour optimiser la navigation au clavier sur les applications et sites web.

La communication clavier-interface

La qualité d’une expérience utilisateur se mesure à travers la simplicité d’utilisation d’une interface. Pour que cette expérience soit fluide, l’interaction entre le clavier et l’interface doit communiquer de manière perceptible, et donner un retour clair à l’utilisateur. Différents éléments sont importants afin d’optimiser cette communication :

Connaître les codes de la navigation au clavier

Afin de pouvoir communiquer avec n’importe quelle interface, il faut tout d’abord se familiariser avec certains codes de navigation. Apprendre les codes de la navigation au clavier, c’est un peu comme apprendre une nouvelle langue. Chaque touche devient comme un mot et les combinaisons de touches deviennent des phrases, facilitant ainsi la communication avec l’interface. Les touches principales, celles qui sont les plus utilisées par l’utilisateur sont :

• la touche Tab : elle permet de naviguer entre les éléments interactif de la page ( boutons, liens, champs de formulaire…)
• la combinaison des touches Maj + Tab : elles permettent aussi de naviguer dans la page, mais à rebours, et donc par exemple de revenir à l’élément précédemment sélectionné.
• la touche Espace, utilisée dans les cas suivants :
  • activer les boutons
  • activer les cases à cocher et boutons radio
  • faire défiler la page
  • développer un menu déroulant
• la touche Entrée, utilisée pour :
  • activer les boutons
  • activer les liens
    

Malgré ces conventions établies, la réalité est parfois toute autre et le fonctionnement attendu n’est pas toujours cohérent. Par exemple, un lien qui visuellement a l’apparence d’un bouton, mais qui du point de vue sémantique est un lien, ne pourra pas s’activer avec la touche espace. Cette situation créé une confusion quant au comportement attendu avec la barre d’espace pour l’utilisateur.

C’est pourquoi il est important à la fois de connaître les bonnes pratiques sémantiques, et de maîtriser les codes de la navigation au clavier pour les appliquer correctement. Négliger ces aspects peut devenir un vecteur d’une très mauvaise expérience pour les utilisateurs qui naviguent dans les interfaces à l’aide du clavier.

D’autres éléments plus spécifiques fonctionnent avec des interactions différentes, nous avons concocté un peu plus bas dans cet article un mini-guide regroupant quelques patterns et leur fonctionnement avec la navigation au clavier.

Optimiser le focus

Pour naviguer avec le clavier, l’utilisateur va utiliser la touche Tab pour se déplacer, se “focaliser” sur un élément puis un autre dans la page. C’est ce qu’on appelle le focus clavier. C’est l’indicateur visuel clé de la communication clavier-machine : il sert de point de repère, remplaçant le curseur de la souris. Sans ce focus, l’utilisateur serait perdu et ne saurait pas comment parcourir le site. Plusieurs critères d’exigence ont été établi par le W3C pour s’assurer que le focus soit maximisé en terme d’accessibilité (niveau AAA) :

La visibilité

L’élément focus est toujours entièrement visible.

Solution : Éviter de recouvrir l’élément.

La taille

Le focus est au moins aussi grand que la zone d’un périmètre de 2 pixels CSS du composant ou sous-composants non focalisé.

Solution : Utiliser un contour solide et visible d’au moins 2px et qui entoure l’élément

Le contraste

Le focus a un rapport de contraste d’au moins 3:1 entre les mêmes pixels dans les états focalisés et non focalisé.

Solution : Utiliser une couleur a contraste élevé avec la couleur de l’élément focus plutôt que laisser celle par défaut et changer la couleur d’arrière plan de l’élément

Mini-guide de la navigation au clavier

Comme on est super sympa chez DPP, on a listé pour vous quelques patterns et comment ils doivent fonctionner lors d’une navigation au clavier.

Boutons et liens

Une fois l’élément mis en surbrillance (sélectionné), il est activable et donc utilisable. Pour activer un bouton on utilise la touche Espace ou la touche Entrée. Pour un lien on choisira d’utiliser le bouton Entrée seulement.

Déplier et replier des éléments collapsibles

Une fois le focus sur l’élément collapsible, on peut les ouvrir avec au choix Entrée ou Espace. Pour sélectionner le prochain élément collapsible : on utilise Tab et/ou la flèche vers le bas Down. Pour sélectionner le précédent élément collapsible : on utilise Maj + Tab et/ou la flèche vers le haut Up.

Checkboxes et boutons radio

Sélection d’un des choix et navigation entre les choix à l’aide des touches “Tab” et “Maj” + “Tab”. Pour changer l’état d’un élément, on utilise la touche “Espace”. Dans le cas d’un bouton radio, l’activation d’un élément désactive automatiquement l’élément précédemment coché.

Les combobox

Les listes déroulantes ou combobox peuvent proposer à l’utilisateur des choix simples ou multiples.

Pour les deux types de listes on retrouve un socle d’interaction au clavier commun :

• sélection du champ avec “Tab”
• ouverture de la liste : “Up”, “Down”, “Entrée” et “Espace”
• si 0 sélection : la première option de la liste reçoit le focus lors de l’ouverture
• si un élément est déjà sélectionné : c’est l’option déjà sélectionnée qui reçoit le focus lors de l’ouverture
• navigation dans la liste : “Up” et “Down”
• changer l’état d’un élément de la liste : “Espace” (se coche ou se décoche selon l’état initial)

Switch

Quand le focus est sur le switch, on en change l’état avec le bouton “Espace”

Il y a encore de très nombreux patterns qui ne sont pas listés ici, ou qui sont trop spécifiques pour faire l’objet d’une littérature précise. Ces bonnes pratiques devraient déjà vous aider à rédiger des specs plus complètes d’une part, et à faire des choix quand vous créez des composants un peu exotiques d’autre part.

Des ressources utiles pour aller plus loin

Le site du W3C, référence des bonnes pratiques, des spécifications ARIA (Accessible Rich Internet Application) et des patterns :

→ www.w3.org/WAI/ARIA/apg/patterns

Le site du WebAIM (Web Accessibility In Mind), regorge d’articles et ressources sur l’accessibilité web :

→ webaim.org/techniques/keyboard

Le guide d’accessibilité IBM, propose des solutions pertinentes sur les problématiques d’accessibilité :

→ www.ibm.com/able/toolkit/develop/keyboard

→ www.ibm.com/able/toolkit/design/ux

Des articles spécifiques sur le focus :

→ www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html

→ css-tricks.com/focusing-on-focus-styles

Des recommandations de lectures et d’outils pour facilité l’accessibilité numérique :

→ a11yproject.com

Nous espérons que cet article vous a permis d’en savoir un peu plus sur la navigation au clavier, d’en comprendre les enjeux et de vous acculturer à la question de l’accessibilité.

Et si vous avez besoin de notre expertise pour votre projet web, n’hésitez pas à nous contacter !