Accessibilité web : la navigation au clavier Blog-One, Agence Wordpress - Pau

Blog

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

 

 

Ces articles peuvent vous interesser

Comment structurer sa page web pour la rendre accessible ?

Les titres et sous-titres organisent le contenu de vos pages web. Ils sont importants pour ...

Accessibilité web : la navigation au clavier

La navigation au clavier La navigation au clavier est l’un des aspects les plus importants ...

Rendre son site Internet accessible : la sémantique HTML

En mai 2001, un article publié par Tim Berners-Lee (l’inventeur du World Wide Web), James Hendler et Ora Lassilain dans Scientific America publiait ...

Norme accessibilité web en France : Le RGAA Version 4.1

Norme accessibilité web RGAA : Référentiel Général d’Amélioration de l’Accessibilité  “L’accessibilité numérique consiste à rendre ...

Accessibilité site Internet : La page doit présenter un ordre de tabulation logique

De nombreux utilisateurs souffrant de handicap naviguent sur un site Internet à l’aide de leur ...

Votre site Internet est-il accessible ?

Vous souhaitez tester l’accessibilité de votre site Internet ? Une petit vérification rapide vous permettra ...

Qu’est-ce-que l’accessibilité web ?

Cet article a pour sujet l’accessibilite web. Lorsque les sites Web sont correctement conçus et ...
Back to top