Vérifier le focus et les liens d’évitement

Lorsque vous parcourez une page longue au clavier, devoir traverser tous les liens de l’en-tête avant d’atteindre le contenu ralentit la navigation. Et si le focus n’est pas visible, vous ne savez plus quel contrôle recevra votre prochaine action. Vous allez vérifier le lien d’évitement déjà présent dans la page et rendre le focus clavier repérable.

Vous avez déjà vérifié que l’ordre de tabulation suit l’ordre du document : reportez-vous à la leçon précédente pour cette notion. Ici, concentrez-vous sur deux questions pratiques : pouvez-vous rejoindre directement la zone principale, et pouvez-vous toujours localiser visuellement le contrôle qui a le focus ? Aucun changement de structure HTML n’est nécessaire à ce stade ; le lien d’évitement du squelette mène déjà à #contenu, l’identifiant de l’élément main.

Atteindre le contenu principal

Le lien placé au début du corps de la page est le premier contrôle interactif rencontré. Quand vous l’activez, le navigateur suit sa destination et positionne la page sur l’élément dont l’identifiant est contenu. Le lien doit rester compréhensible hors contexte : « Aller au contenu principal » indique clairement la destination, contrairement à un libellé vague comme « Passer ».

• Rechargez la page, puis placez-vous au début du document avec la commande de début de page de votre navigateur.
• Appuyez sur Tab une fois : le lien « Aller au contenu principal » doit recevoir le focus.
• Appuyez sur Entrée : la page doit rejoindre la zone principale, qui commence par le titre « Nos événements ».
• Continuez avec Tab : vérifiez que les contrôles suivants apparaissent dans un ordre compréhensible.

Faites ce contrôle sans utiliser la souris. Le lien peut être visible en permanence ou apparaître lorsqu’il reçoit le focus ; dans les deux cas, il doit être réellement atteignable au clavier et facile à repérer au moment où vous en avez besoin. Dans l’état actuel du projet, il n’existe pas encore de règle dans style.css qui mette en évidence le focus : vous allez en ajouter une.

Rendre le focus visible

Ajoutez la règle suivante à style.css. Elle s’applique aux éléments recevant un focus lors d’une interaction clavier et utilise la variable de couleur de focus prévue par le contrat du projet. L’épaisseur et le style de contour restent ceux fournis par le navigateur ; cette règle les colore sans imposer une valeur CSS supplémentaire.

:focus-visible {
  outline-color: var(--culture-couleur-focus);
  outline-style: solid;
}

:focus-visible cible l’état de focus lorsque le navigateur juge qu’un indicateur visuel est utile, notamment lors d’une navigation au clavier. La règle s’applique aussi aux liens et aux boutons natifs de la page, sans ajouter de classe au HTML. Gardez le contour : supprimer l’indicateur avec outline: none sans le remplacer rendrait la navigation clavier plus difficile à suivre.

Le navigateur peut également afficher un anneau de focus lorsque vous utilisez la souris, selon son comportement et ses réglages. Ne concluez donc pas à l’absence de focus clavier sur la seule base d’un clic : évaluez le résultat en utilisant effectivement le clavier. Si un contrôle reçoit le focus mais que son indicateur est masqué par une autre règle CSS, corrigez cette règle plutôt que de modifier l’ordre de tabulation.

À retenir

• Placez le lien d’évitement au début du corps du document et donnez-lui un libellé explicite.
• Vérifiez que sa destination existe et mène au contenu principal.
• Parcourez la page avec Tab et Maj + Tab, sans souris, pour suivre le focus.
• Conservez un indicateur de focus visible et contrôlez qu’il contraste avec le fond.

Dans la prochaine leçon, vous construirez une fenêtre de dialogue avec l’élément natif dialog.