Assurer l’utilisation complète au clavier

Un tableau de bord peut sembler utilisable à la souris tout en étant bloquant au clavier : un filtre inaccessible, un bouton sans focus visible ou une commande activable seulement au clic suffit à interrompre le parcours. Vous allez vérifier l’ordre des contrôles et préserver le comportement clavier fourni par les éléments HTML natifs.

Parcourir la page dans l’ordre

L’ordre de tabulation est la séquence dans laquelle les éléments interactifs reçoivent le focus lorsque vous appuyez sur Tab. Maj+Tab parcourt cette séquence dans le sens inverse. Dans le tableau de bord, vérifiez que le parcours suit l’ordre du contenu : liens de navigation, champ du mois, champs du formulaire, filtres, puis commandes de la liste. Les éléments non interactifs, comme les titres et les paragraphes, ne doivent pas devenir des étapes artificielles du parcours.

Le navigateur établit cet ordre à partir de la position des éléments dans le document et de leur nature interactive. Les liens, boutons, champs de formulaire et sélecteurs natifs sont normalement accessibles avec Tab, sans attribut supplémentaire. Gardez le DOM dans le même ordre que la lecture attendue : ne réordonnez pas visuellement les contrôles d’une manière qui contredirait leur séquence clavier.

Rendre le focus visible

Le focus indique quel contrôle recevra la prochaine action clavier. Il doit rester perceptible lorsqu’un lien, un champ ou un bouton est sélectionné. La pseudo-classe :focus-visible permet d’appliquer un indicateur lorsque le navigateur estime qu’il est nécessaire, notamment pendant une navigation au clavier, sans imposer le même contour après chaque clic à la souris.

Ajoutez la règle suivante dans l’unique feuille src/styles/style.css. Elle cible les éléments interactifs natifs, sans ajouter de classe au contrat ni modifier la structure des composants. La bordure et l’espace utilisés proviennent des variables de présentation autorisées.

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--atelier-couleur-accent);
  outline-offset: 2px;
}

Ne supprimez pas l’outline sans fournir un indicateur de remplacement tout aussi visible. Testez le contour sur le fond réel de la page, y compris autour du sélecteur de catégorie et des boutons de suppression. Si le focus se retrouve caché ou difficile à distinguer, corrigez la règle de présentation plutôt que de demander à l’utilisateur de deviner quel contrôle est actif.

Activer les commandes sans souris

Les éléments natifs fournissent aussi les interactions clavier attendues. Un lien se suit avec Entrée ; un bouton se déclenche avec Entrée ou Espace ; un champ de recherche accepte la saisie ; un sélecteur se parcourt avec les touches proposées par le navigateur. Les filtres du tableau de bord doivent donc rester de vrais input et select, et les actions de vrais éléments button, plutôt que des éléments génériques rendus cliquables uniquement avec une souris.

Dans le tableau des dépenses, le bouton de suppression doit rester un bouton et conserver son nom accessible, par exemple « Supprimer Courses ». Le texte visible « Supprimer » peut être identique sur plusieurs lignes, mais l’intitulé associé à la description permet de distinguer l’action. L’activation clavier appelle alors le même gestionnaire que l’activation à la souris ; n’ajoutez pas de logique parallèle selon le type d’entrée.

Le formulaire de dépense possède déjà des libellés associés et des erreurs reliées à leurs champs ; conservez ces éléments pendant vos vérifications. Pour cette leçon, concentrez-vous sur l’accès aux contrôles et leur activation, sans ajouter de gestion personnalisée du focus après une action. Les annonces de changements et le déplacement éventuel du focus seront abordés dans la leçon « Annoncer les mises à jour utiles ».

À retenir

• Vérifiez le parcours avec Tab et Maj+Tab, dans un ordre conforme à la lecture de la page.
• Préservez un indicateur de focus visible avec :focus-visible ; ne neutralisez pas l’outline sans remplacement.
• Utilisez les liens, boutons, champs et sélecteurs natifs pour bénéficier de leur activation clavier.
• Évitez les valeurs positives de tabindex et les commandes qui ne fonctionnent qu’à la souris.

Dans la prochaine leçon, vous rendrez les mises à jour utiles perceptibles aux technologies d’assistance, sans interrompre inutilement la navigation.