1. Rendre atteignable et activable au clavier tout élément interactif
Un problème bloquant en accessibilité survient lorsque des éléments ne sont pas accessibles au clavier. Ces obstacles peuvent empêcher les utilisateurs d'accéder à des fonctionnalités et des informations importantes du site.
Cette balise <span> utilisée comme un bouton fonctionne à la souris mais ne peut pas fonctionner au clavier en l'état :
<span onclick="alert('Action!');">Action</span>Il est donc essentiel que tous les éléments interactifs, tels que les liens, boutons et champs de formulaire, puissent être atteints et activés au clavier.
Exemples conformes
Un lien HTML accessible :
<a href="#">Lien</a>Un bouton HTML accessible :
<button type="button">Bouton HTML</button>Un lien ARIA accessible (avec JS) :
<div role="link" tabindex="0">Lien ARIA</div>Note : l'attribution d'un rôle ARIA ne suffit pas, il faut implémenter la gestion des événements clavier (Entrée/Espace) via JavaScript.
2. S'assurer de la visibilité du focus
La visibilité du focus est indispensable. Un élément focusable qui n'est pas clairement visible peut semer la confusion.
Il est impératif de rendre chaque élément recevant le focus parfaitement visible, soit avec l’outline natif, soit avec un style CSS personnalisé (contraste 3:1 mini).
:focus {
outline: 2px solid #000; /* A la prise de focus, bordure noire de 2px */
}3. Utiliser un ordre de tabulation cohérent
Un ordre de tabulation désordonné peut désorienter les utilisateurs. Par exemple, un attribut tabindex avec des valeurs positives (> 0) perturbe l'ordre naturel.
Assurez-vous que l'ordre de tabulation suit la logique visuelle et structurelle de la page.
4. Éviter les pièges au clavier
Un piège au clavier se produit lorsqu'un utilisateur ne peut pas naviguer hors d'un élément interactif. Tous les éléments focusables doivent être atteignables et quittables avec le clavier.
5. Donner un rôle à chaque élément focusable
Chaque élément interactif doit être identifiable par son rôle (lien, bouton, checkbox...).
- <a href="..."> est un lien (navigation).
- <button> est un bouton (action).
- <div role="button"> simule un bouton pour les technologies d'assistance.
6. Nommer chaque élément focusable
Un bouton sans intitulé ou un champ sans étiquette pose un problème majeur. Chaque élément doit avoir un nom accessible.
Bouton explicite
Un bouton doit être explicite par lui-même (ex: pour une modale "En savoir plus", le contexte ne suffit pas toujours techniquement).
<button type="button" title="Titre : en savoir plus">En savoir plus</button>Champ de formulaire
Chaque champ doit avoir une étiquette liée via l'attribut for et id.
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">7. Informer l'utilisateur sur l'état de l'élément
Il est important de communiquer si un élément est plié/déplié, sélectionné ou activé.
Pour un dépliant (Accordéon) :
<button aria-expanded="false">Voir plus</button>
<div hidden>Contenu...</div>Pour un bouton bascule (Toggle) :
<button aria-pressed="true">J'aime</button>8. Maîtriser les changements de contexte
Un changement de contexte (ex: rechargement de page à la sélection d'une option dans un <select>) ne doit pas surprendre l'utilisateur.
La bonne pratique : Ajouter un bouton de validation.
<select id="lang">...</select>
<button type="submit">Changer de langue</button>9. Gérer le focus après une action
Une fois une action effectuée (ouverture de modale, filtre, suppression...), le focus doit être géré logiquement :
- Soit on déplace le focus (ex: ouverture de modale).
- Soit on vocalise le changement sans bouger le focus (ex: filtre de recherche) via aria-live="polite".
10. Gérer les pages réactives (SPA)
Sur les applications modernes (React, Vue, Angular) où la page ne recharge pas vraiment : il est requis de gérer le focus manuellement lors du changement de "vue" (route) pour simuler un rechargement (ex: focus sur le titre H1 de la nouvelle page).
Conclusion
Adopter ces 10 conseils dès le développement simplifie grandement l'audit final et garantit une expérience robuste.
Pour aller plus loin, découvrez nos formations développeurs ou nos spécifications techniques.