Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung →
Barrierefreiheit
Pourquoi le focus du clavier doit-il être visible sur un site web ?
Le focus du clavier doit être visible, sinon les utilisateurs du clavier naviguent à l'aveugle : sans marque visible — généralement un cadre coloré autour de l'élément actif — il n'est pas clair quel élément est sélectionné et ce que la touche Entrée activera ensuite. De nombreux designers suppriment ce cadre pour des raisons esthétiques, excluant ainsi les utilisateurs du clavier. Le critère WCAG 2.4.7 exige un affichage du focus visible.
Le cadre de focus est le curseur du clavier
Les utilisateurs de souris voient toujours où se trouve leur curseur. Les utilisateurs de clavier ont le cadre de focus pour cela : il se déplace d'un élément à l'autre à chaque appui sur la touche de tabulation et montre quel élément la touche Entrée activera. S'il disparaît, c'est comme naviguer à la souris avec un curseur invisible. Le raison la plus courante est une seule ligne dans les directives de style qui désactive le contour standard du navigateur, parce que c'était considéré comme gênant. La bonne solution n'est jamais de supprimer, mais de concevoir : un cadre dans votre couleur d'entreprise, assez fort pour ressortir sur chaque arrière-plan.
Comment le service de contrôle mesure la visibilité du focus par comparaison de pixels
Le service de contrôle photographie chaque élément de contrôle testé deux fois : une fois sans focus, une fois avec. Puis il compare les deux images pixel par pixel. Si le focus change moins de 0,2 % des pixels autour de l'élément, l'affichage du focus est pratiquement invisible — le critère est considéré comme violé, et le rapport nomme l'élément affecté avec une capture d'écran de preuve. Les environnements instables, par exemple avec des animations, sont détectés par la mesure lors d'une comparaison préalable de deux captures sans focus et sont exclus de l'évaluation. De plus, le rapport note si les directives de style désactivent en bloc les contours de focus.
Beispiele
Fokusrahmen entfernt
*:focus { outline: none; }:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }outline: none macht die Tastaturbedienung blind. :focus-visible zeigt den Rahmen nur bei Tastatur, nicht beim Mausklick.
- Naviguez à travers votre page d'accueil et observez : est-il clairement visible à chaque arrêt quel élément est sélectionné ?
- Demandez à votre agence de supprimer chaque règle qui désactive en bloc le contour de focus.
- Faites définir un cadre de focus personnalisé dans votre couleur d'entreprise — assez fort pour ressortir sur des arrière-plans clairs et sombres.
- Testez le focus aussi sur les images et les zones colorées — un cadre gris mince disparaît vite là -bas.