À la prise de focus

Le simple fait d’accéder à un élément, par exemple en appuyant sur la touche Tab, ne devrait jamais déclencher un changement majeur comme le chargement d’une nouvelle page, l’envoi d’un formulaire ou l’ouverture d’une fenêtre contextuelle.

Il s’agit d’une : l’automatisation ne peut pas déterminer de manière fiable, à partir de JavaScript minifié ou généré par un cadre de développement, si un gestionnaire de focus change le contexte. Silktide affiche donc la question sur chaque page, et une personne la confirme en naviguant avec la touche Tab.

Pourquoi c’est important

Les utilisateurs de clavier déplacent le focus sur une page pour l’explorer, de la même manière que les utilisateurs de souris déplacent le pointeur : atteindre un contrôle ne signifie pas qu’ils ont choisi de l’utiliser. Si le simple fait d’accéder avec Tab à un champ de recherche recharge la page, ou si l’accès à un bouton ouvre une boîte de dialogue, les utilisateurs de clavier et de sont brusquement envoyés à un endroit où ils n’ont pas demandé d’aller, perdant souvent leur position et leur travail. Les personnes ayant une déficience motrice qui naviguent lentement, élément par élément, rencontrent constamment ces pièges.

Il s’agit du critère de succès 3.2.1 des (À la prise de focus), une exigence de , qui fait partie du niveau de conformité le plus élémentaire.

Éléments à vérifier

Naviguez avec la touche Tab dans chaque contrôle pouvant recevoir le focus sur la page.
Confirmez que le focus seul ne permet jamais de naviguer, d’envoyer un formulaire ni d’ouvrir une boîte de dialogue ou une nouvelle fenêtre.
Les gestionnaires de focus qui se contentent de mettre un champ en évidence, d’afficher une indication ou de préparer des données en arrière-plan sont acceptables.

Si le focus ne change jamais le contexte, le résultat.

Comment corriger le problème

Retirez l’action du gestionnaire de focus. La navigation, l’envoi de formulaire et les boîtes de dialogue devraient être déclenchés par une action explicite, comme un click, la touche Entrée ou une modification confirmée par le visiteur.
Utilisez les gestionnaires de focus uniquement pour des effets non perturbateurs.

// Problème : l’accès au champ déclenche immédiatement la navigation
searchBox.addEventListener('focus', () => {
  window.location.href = '/search';
});

// Correction : naviguer uniquement lorsque l’utilisateur choisit d’agir
searchBox.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    window.location.href = '/search';
  }
});

Comment Silktide effectue cette vérification

Silktide ne peut pas détecter de manière fiable les changements de contexte déclenchés par le focus en inspectant le code source des écouteurs : les cadres de développement et la minification rendent cette méthode fragile. Cette vérification affiche donc une question de révision par page décrivant ce qu’il faut vérifier en naviguant avec la touche Tab.