Tests d’accessibilité : color-contrast et focus

Le CSS contrôle le contraste des couleurs, la visibilité de l'indicateur de focus, la visibilité des éléments (display:none les retire de l'arbre d'accessibilité) et l'ordre de lecture (réorganisation visuelle avec la propriété order de flexbox par rapport à l'ordre du DOM). Les choix CSS influencent directement la possibilité pour les personnes handicapées d'utiliser l'interface.

WCAG 2.1 AA exige un ratio de contraste de 4.5:1 pour le texte courant et de 3:1 pour le texte de grande taille (au moins 18 px en gras ou 24 px en texte normal). AAA exige respectivement 7:1 et 4.5:1. Ces ratios comparent la luminance de la couleur du texte au premier plan à celle de la couleur d'arrière-plan.

Cliquez sur n'importe quel élément de texte dans DevTools → le panneau Styles. La pastille de couleur affiche un indicateur de ratio de contraste. Une coche indique que le contraste est conforme ; un X indique un échec. Le sélecteur de couleur affiche les lignes des seuils AA/AAA sur le dégradé de couleurs.

axe-core, Lighthouse et Pa11y vérifient automatiquement les ratios de contraste de tous les éléments de texte. Exécutez axe-core avec @axe-core/react en développement pour obtenir des avertissements de contraste en temps réel dans la console du navigateur pendant le développement.

Le CSS outline: none ou outline: 0 sur :focus supprime l'anneau de focus par défaut du navigateur, rendant la navigation au clavier invisible. Il s'agit d'un grave problème d'accessibilité. Remplacez-le par un style de focus personnalisé et visible plutôt que de supprimer complètement les indicateurs de focus.

:focus s'applique à tous les événements de focus, y compris les clics de souris (ce qui provoque l'affichage d'un anneau visible lors d'un clic, ce que les concepteurs n'apprécient pas). :focus-visible s'applique uniquement lorsque le navigateur détermine que la navigation au clavier est utilisée — les personnes naviguant au clavier disposent ainsi d'un anneau de focus sans qu'il s'affiche lors des clics de souris.

WCAG 2.2 introduit le critère de succès 2.4.11 (apparence du focus, niveau AA) : les indicateurs de focus doivent présenter un contraste d'au moins 3:1 avec les couleurs adjacentes et entourer le pourtour du composant. Les styles de focus personnalisés doivent respecter ces exigences, et pas seulement exister.

Le mode Contraste élevé de Windows remplace les couleurs CSS par des couleurs système définies par l'utilisateur. Utilisez @media (forced-colors: active) pour fournir des styles alternatifs qui fonctionnent en mode contraste élevé. Testez avec Paramètres Windows → Accessibilité → Contraste élevé.

WCAG 1.4.1 interdit d'utiliser la couleur comme seul moyen de transmettre une information. Un état d'erreur qui devient uniquement rouge ne respecte pas ce critère. Associez la couleur à des icônes, des libellés textuels, des motifs ou des soulignements afin qu'une information indépendante de la couleur soit toujours présente.

WCAG 1.4.4 exige que le texte puisse être agrandi à 200 % sans perte de contenu. WCAG 1.4.12 exige que les modifications de l'espacement du texte (augmentation de l'espacement des lettres ou de la hauteur de ligne) ne perturbent pas la mise en page. Utilisez des unités relatives (rem, em) pour la typographie afin de respecter ces deux exigences.

Tests CSS complets de l'accessibilité : l'extension de navigateur axe DevTools pour le développement, Lighthouse CI pour les contrôles automatisés de la chaîne d'intégration, Pa11y pour les vérifications de pages en ligne de commande et les tests manuels de navigation au clavier avec Tab/Shift+Tab pour vérifier la visibilité et l'ordre des indicateurs de focus.

Pourquoi outline: none ne doit-il jamais être le CSS final de l'état :focus d'un élément ?

Les tests d'accessibilité du CSS couvrent les ratios de contraste des couleurs (minimum AA de 4.5:1), les indicateurs de focus visibles et conformes à WCAG 2.2 grâce à :focus-visible, l'interdiction d'utiliser la couleur comme unique vecteur d'information, la prise en charge du mode forced-colors et l'utilisation d'unités typographiques relatives pour respecter les exigences de redimensionnement. Des outils automatisés associés à des tests manuels au clavier garantissent une couverture complète.