Navigation clavier

Plusieurs raisons peuvent empêcher une personne de naviguer à l'aide d'une souris:

Temporaire

  • Une tendinite.
  • Un bras dans le plâtre suite à un accident.
  • Etc.

Permanent

  • Une difficulté à faire des mouvements fins en raison d'une maladie (Parkinson, sclérose en plaque, AVC, etc.)
  • Impossibilité d'utiliser son bras (problème de développement, amputation, etc.).
  • Un problème de vision créant une difficulté à distinguer le curseur sur l'écran.
  • Etc.

Heureusement, le navigateur offre une alternative native aux personnes aux prises avec ces difficultés via la navigation par clavier.

Plutôt que de déplacer son curseur et de cliquer sur un bouton avec sa souris, un utilisateur peut déplacer le focus de son navigateur d'un élément à l'autre (effet de surbrillance autour d'un élément) et déclencher son action via le clavier avec les touches suivantes:

  • Tab pour focuser sur le prochain élément interactif.
  • Shift + Tab pour revenir à l'élément précédent.
  • ⏎ ou Espace pour interagir avec l'élément focusé.

Par défaut, les éléments reçoivent le focus en fonction de leur ordre dans le code.

Par exemple, remarquez sur Chrome l'effet de surbrillance bleu 🔵 entourant le bouton ayant le focus et comment cet effet se déplace lorsque la navigation clavier est utilisée. On remarque aussi que le bouton 3 devient légèrement plus pâle lorsqu'il a le focus et que la touche Espace est utilisée afin de le déclencher.


L’effet de surbrillance peut varier d’un navigateur à l’autre.

À priori, seules les balises prévues pour l'interaction peuvent recevoir le focus du navigateur. Par exemple, les balises: <button>, <a>, <input>, <details>, etc. D'où l'importance d'utiliser les bonnes balises, aux bons endroits.

Par exemple, dans le cas où un alert est déclenché en JavaScript lorsqu'un élément est cliqué. Si cet élément est un <span>, qui est une balise prévue à des fins de mise en page et non d'interaction, cette interactivité ne sera pas accessible aux individus navigants avec leur clavier, puisque cette balise ne recevra jamais le focus du navigateur.

👌

<button>Afficher un alert</button>

🚫

<span>Afficher un alert</span> L’apparence d’une balise peut être modifiée en CSS. Ainsi, le choix d’une balise ne devrait pas être effectué en fonction de son apparence de base, mais en fonction de sa valeur sémantique. Tabindex

Il est parfois impossible d'utiliser la balise appropriée pour diverses raisons. Heureusement, il est quand même possible d'indiquer au navigateur qu'un élément devrait être en mesure de recevoir le focus, autrement dit d'être "tabé", en lui donnant l'attribut tabindex.

Par exemple:

<span tabindex="0">Afficher un alert</span>

Ainsi, la balise <span> est à même de recevoir le focus, comme dans l'exemple ci-dessous:

Pourquoi 0 ?

0 correspond à la priorité de focus par défaut de tous les éléments interactif. Puisqu'ils sont tous à 0, le navigateur les considères égaux et donc leur attribut le focus l'un après l'autre selon leur ordre d'apparition dans le code.

Attribuer tabindex="0" à un élément lui permet de recevoir le focus, mais le place au même niveau d'importance que les autres éléments interactif. Bref, l'élément recevra le focus en fonction de son ordre d'apparition dans le code, comme tout autre élément et son ordre de sélection sera intuitif/prévisible pour l'utilisateur.

Le concept initial de tabindex était de modifier la priorité de focus des éléments afin de contrôler leur ordre de sélection. Ainsi, un élément pouvait apparaitre au milieu du code et quand même recevoir le focus en premier s'il était doté d'un attribut tabindex avec une valeur supérieure à 0. Cependant, cette approche est maintenant fortement déconseillée, puisqu'elle engendre beaucoup de confusion. Le navigateur saute directement à l'élément avec le tabindex le plus élevé, ignorant souvent plusieurs éléments interactifs au passage, et ensuite reprend son ordre de sélection normal. Ainsi, plusieurs éléments peuvent sembler inaccessibles à l'utilisateur.

Par exemple:

tabindex tabindex Focus

Par défaut, la majorité des navigateurs vont utiliser la propriété CSS outline afin de créer l'effet de surbrillance de l'élément ayant le focus. Si pour des raisons esthétiques le outline cause un problème il est conseillé de simplement le modifier en CSS plutôt que de le retirer complètement.

Par exemple:

Enlever le outline indiquant le focus est l’équivalent d’enlever une rampe d’accès pour personne à mobilité réduite dans une école, parce que ça ne “fit pas” avec le design.