Blog One

Le blog

Des articles concernant l'accessibilité numérique, le référencement local, des tutoriels, mais aussi le NoCode, les applications ...

La navigation au clavier

La navigation au clavier est l’un des aspects les plus importants de l’accessibilité du Web. De nombreux utilisateurs handicapés moteurs naviguent sur le web à l’aide d’un clavier.

Notre service : Accessibilité web – Rendre votre site Internet accessible

Il est important de veiller à ce que toutes les fonctionnalités soient accessibles à la souris et au clavier

  • Tous les éléments interactifs  : boutons, champs de saisie, liens etc. doivent pouvoir être atteints avec la touche Tab. Les éléments doivent pouvoir être activés et manipulés à partir des touches du clavier. Un internaute voyant doit disposer d’un indicateur visuel sur l’élément qui a le focus (soulignement, bordure autour de l’élément). 
  • Le focus doit être visible lors de la Tabulation
  • L’ordre de tabulation doit être logique – L’ordre de navigation au clavier doit être logique et intuitif. Il suit le flux visuel de la page, de gauche à droite, de haut en bas (l’en-tête, puis la navigation principale, puis la navigation dans la page et enfin le pied de page).

Les tests du clavier

Intéraction Touches au clavier Notes
Accédez aux éléments interactifs
  • Tab
  • Shift + Tab 
  • Les indicateurs de focus du clavier doivent être présents.
  • L’ordre de navigation doit être logique et intuitif.
Lien Enter – activer le lien  
Bouton Entrer or Barre d’espace
Activer le bouton
  • Assurez-vous que les éléments avec ARIArole="button"peuvent être activés avec les deux raccourcis clavier.
Case à cocher Barre d’espace
cocher/décocher une case
  • Les cases à cocher doivent être utilisées lorsqu’une ou plusieurs options d’un groupe peuvent être sélectionnées.
Boutons radio
  • / or / – sélectionnez une option.
  • Tab – passer à l’élément suivant
  • Les boutons radio doivent être utilisés lorsqu’une seule option d’un groupe peut être sélectionnée.
Sélectionnez le menu (déroulant)
  • / – naviguer entre les options du menu
  • Barre d’espace
  • Vous pouvez également filtrer ou accéder aux options du menu lorsque vous tapez des lettres.
Saisie automatique
  • Tapez pour commencer le filtrage
  • / – naviguer vers une option
  • Entrer – sélectionnez une option
 
Boites de Dialogue Esc – Fermer
  • Les boîtes de dialogue modales doivent maintenir le focus clavier.
  • Les boîtes de dialogue non modales doivent se fermer automatiquement lorsqu’elles perdent le focus.
  • Lorsqu’une boîte de dialogue se ferme, le focus doit généralement revenir à l’élément qui a ouvert la boîte de dialogue.
Barre de menu
  • / –  Option de menu précédente/suivante
  • Entrer – développez le menu (facultatif) et sélectionnez une option.
  • / – développer/réduire le sous-menu
  • Une barre de menus modifie dynamiquement le contenu d’une application. Les liens qui utilisent Tab/Enter ne sont PAS des barres de menu
Barre de défilement
  • / – faire défiler verticalement
  • / – faire défiler horizontalement
  • Spacebar/Shift + Spacebar – faire défiler par page
  • La barre d’espace va, par défaut, faire défiler la page est un contrôle interactif qui permet la saisie de la barre d’espace n’est pas focalisée. Le défilement horizontal doit être minimisé.

 

Chaque projet est unique, souhaitez-vous un devis ?

Parlez-moi de votre projet
Retourner en haut de la page