Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung
Accessibilité
Pourquoi un site web doit-il être accessible sans souris ?
Un site web doit être utilisable sans souris, car beaucoup de gens ne l'utilisent que : les aveugles avec lecteur d'écran, les personnes atteintes de tremblements ou de paralysies, et les utilisateurs de claviers spécialisés. Si la tabulation n'atteint pas un élément de menu ou un bouton, cette fonction n'existe simplement pas pour ces personnes — comme si vous ne l'aviez jamais construite. Le critère WCAG 2.1.1 impose donc l'accessibilité au clavier complète.
Utilisation au clavier au quotidien : Tab, Entrée et flèches
L'utilisation sans souris suit un schéma fixe. La touche Tabulation déplace un marqueur visible d'élément en élément : du logo au menu, du menu au champ de recherche, puis aux liens et boutons. La touche Entrée ouvre l'élément marqué, les flèches contrôlent les menus et listes de sélection. Exemple : celui qui remplit votre formulaire de contact saute avec Tab d'un champ au suivant et envoie à la fin avec Entrée. Ce schéma ne fonctionne que si chaque élément de commande est techniquement un lien, un bouton ou un champ de formulaire. Un paragraphe de texte cliquable qu'un script transforme en bouton se présente pareille à la souris — pour le clavier, il n'existe pas.
Comment le service de contrôle examine l'utilisation au clavier
Le service de contrôle appuie réellement sur la touche Tabulation de votre page, arrêt après arrêt, jusqu'au bout du document. De plus, il scrute le code à la recherche d'éléments de commande réactifs seulement au clic souris : des éléments avec ordres de clic inaccessibles au clavier. S'il en trouve, le critère est marqué comme non-conforme, et le rapport nomme le premier élément touché avec preuve photo. Si la tabulation n'atteint aucun arrêt malgré la présence d'éléments de commande, c'est aussi une non-conformité. Si la mesure reste indécise, le rapport le signale comme point d'examen manuel — c'est notre principe : une mesure vide est une erreur, jamais un blanc-seing.
Exemples
Cliquez sur Handler sur un div
<div class="knopf" onclick="warenkorb()">In den Warenkorb</div><button type="button" onclick="warenkorb()">In den Warenkorb</button>Un div n'atteint pas la touche onglet et ne répond pas à la touche Entrée ou espace. Un bouton peut faire les deux sur son propre.
Le menu s'ouvre seulement quand il est croisé
.menue li:hover > ul { display: block; }.menue li:hover > ul,
.menue li:focus-within > ul { display: block; }focus-in ouvre également le sous-menu si le focus est sur une entrée par clavier.
- Posez la souris et commandez votre page d'accueil pendant cinq minutes seulement avec Tabulation, Entrée et flèches.
- Examinez surtout les menus, le champ de recherche et le panier — c'est là que se cachent la plupart des points réactifs seulement au clic.
- Priez votre agence d'utiliser de vrais éléments de commande pour chaque point cliquable : lien, bouton ou champ de formulaire au lieu de texte cliquable.
- Répétez le test au clavier après chaque gros remaniement — un script de menu nouveau peut retirer l'accessibilité clavier sans prévenir.
