CSS
Focus visible et contrastes : corriger l’accessibilité d’un thème
À trois mois de l’entrée en application de l’European Accessibility Act, beaucoup de boutiques découvrent qu’elles sont inutilisables au clavier. La cause est presque toujours la même, une ligne héritée d’un vieux reset CSS : outline: none. Elle supprime le repère qui indique où l’on se trouve dans la page. C’est la première chose à corriger, et la plus simple.
/* À proscrire : supprime le repère du clavier sans le remplacer */
a:focus, button:focus { outline: none; }
/* Un contour visible, seulement pour la navigation au clavier */
:focus-visible {
outline: 3px solid #1a56db;
outline-offset: 2px;
}
/* Lien d'évitement : invisible jusqu'à ce qu'on arrive dessus au clavier */
.lien-evitement {
position: absolute;
left: -9999px;
}
.lien-evitement:focus {
left: 1rem;
top: 1rem;
z-index: 1000;
padding: .5rem 1rem;
background: #fff;
color: #111;
}
/* Respecter la préférence « réduire les animations » du système */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}Reste le contraste. Les critères WCAG demandent un rapport d’au moins 4,5:1 pour le texte courant et 3:1 pour les grands textes et les éléments d’interface (bordures de champs, icônes). Le gris clair si courant sur les thèmes, #999 sur fond blanc, n’atteint que 2,8:1 ; le gris le plus clair qui passe sur du blanc est #767676. Pour tester, un parcours complet de la page à la touche Tab, puis un outil de mesure de contraste : ces deux vérifications trouvent l’essentiel des défauts.
<body>
<a class="lien-evitement" href="#contenu">Aller au contenu</a>
<header>…</header>
<main id="contenu">…</main>
</body>Sources
- W3C, WCAG 2.1, critère 1.4.3 Contraste (minimum) w3.org
- MDN, :focus-visible developer.mozilla.org