Au focus

Le simple fait de se déplacer jusqu'à un élément, par exemple en appuyant sur Tab, ne doit 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.

Ceci est une : l'automatisation ne peut pas déterminer de manière fiable, à partir d'un JavaScript minifié ou basé sur un framework, si un gestionnaire de focus change le contexte ; Silktide affiche donc l'invite sur chaque page et une personne le confirme en naviguant avec Tab.

Pourquoi c'est important

Les utilisateurs du clavier déplacent le focus dans une page pour l'explorer, comme les utilisateurs de la souris déplacent le pointeur - atteindre un contrôle n'est pas la même chose que choisir de l'utiliser. Si le simple fait d'atteindre un champ de recherche par Tab recharge la page, ou si l'arrivée sur un bouton ouvre une boîte de dialogue, les utilisateurs de clavier et de sont propulsés ailleurs sans l'avoir demandé, perdant souvent leur place et leur travail. Les personnes ayant des troubles moteurs qui naviguent lentement, élément par élément, se heurtent constamment à ces pièges.

Ceci correspond au critère de réussite 3.2.1 (Au focus) des , une exigence de - faisant partie du niveau de conformité le plus élémentaire.

À vérifier

Parcourez avec la touche Tab tous les contrôles pouvant recevoir le focus sur la page.
Confirmez que le focus seul ne provoque jamais une navigation, l'envoi d'un formulaire, ou l'ouverture d'une boîte de dialogue ou d'une nouvelle fenêtre.
Les gestionnaires de focus qui ne font que mettre un champ en évidence, afficher une aide, ou préparer des données en arrière-plan sont acceptables.

Si le focus ne change jamais le contexte, le constat.

Comment le corriger

Déplacez l'action hors du gestionnaire de focus. La navigation, l'envoi et les boîtes de dialogue doivent être déclenchés par une action explicite telle que click, la touche Entrée, ou une modification confirmée par le visiteur.
N'utilisez les gestionnaires de focus que pour des effets non perturbateurs.

// Problème : atteindre le champ déclenche immédiatement une navigation
searchBox.addEventListener('focus', () => {
  window.location.href = '/search';
});

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

Comment Silktide teste ceci

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 frameworks et la minification rendent cela fragile - cette vérification affiche donc une invite de revue par page décrivant ce qu'il faut vérifier en naviguant avec Tab.