Accessibilité

L’accessibilité est une contrainte de conception de base, pas une passe appliquée après la publication d’un patron. Un composant qui ne fonctionne qu’à la souris, qui ne se lit qu’à un seul niveau de zoom, ou qui n’a de sens qu’en couleur, n’est pas terminé. Le niveau visé sur les deux sites est WCAG 2.2, niveau AA.

Ce sont les contraintes; qui les satisfait dépend de la page. Site implementation → Components énonce comment chaque composant les satisfait. Site governance → Content énonce comment les autrices et auteurs rédigent des titres, des liens et des textes alternatifs qui les satisfont.

Contraste#

Le texte et les éléments d’interface porteurs de sens respectent le critère de succès WCAG 2.2 1.4.3, niveau AA : au moins 4,5:1 pour le texte normal, 3:1 pour le grand texte (18 points, ou 14 points gras, et plus) et pour les contours des objets graphiques et des composants interactifs porteurs de sens. Ne comptez pas sur la couleur seule pour porter une distinction; associez-la à une forme, une icône, une étiquette ou un changement de texte.

APCA, la méthode de contraste perceptuel associée à WCAG 3, demeure un brouillon de travail (Working Draft) du W3C, sans recommandation attendue avant la fin des années 2020. Traitez le ratio WCAG 2.2 ci-dessus comme la base applicable jusqu’à ce que cela change.

Focus visible#

Chaque élément interactif porte un indicateur de focus visible qui respecte le critère de succès WCAG 2.2 2.4.7, niveau AA. Un composant peut restyler l’indicateur, mais ne peut jamais le retirer. Une affordance déclenchée seulement au survol ne remplace pas un état de focus.

Taille du texte#

Fixez la taille du texte en unités relatives — l’échelle --step-* dans les Jetons, jamais en pixels, points ou picas fixes — pour que le texte s’agrandisse jusqu’à 200 % sans perte de contenu ni de fonction, selon le critère de succès WCAG 2.2 1.4.4, niveau AA. Une mise en page qui casse sous le zoom du navigateur est un défaut de mise en page, pas une erreur de la personne qui consulte.

Mouvement#

Le mouvement non essentiel respecte le réglage prefers-reduced-motion de la personne qui consulte, la technique que WCAG nomme pour le critère de succès 2.3.3, niveau AAA. Les transitions au survol, les animations de révélation et le mouvement décoratif se réduisent à un changement d’état instantané lorsque la personne le demande. Le mouvement porteur d’information — un état de chargement, un indicateur de progression — peut rester, mais ne doit ni clignoter ni boucler sans moyen de l’arrêter.

Structure sémantique#

La structure communique la hiérarchie indépendamment du style. Utilisez un seul <h1> par page, imbriquez les niveaux de titre sans en sauter, et utilisez l’élément qui correspond à ce qu’il représente visuellement : une liste pour une liste, une table pour des données tabulaires, un <button> pour une action, un <a> pour la navigation. Un élément stylé pour ressembler à un titre ou à un contrôle n’en est pas un.

Texte alternatif#

Chaque image porteuse de sens a une alternative textuelle, selon le critère de succès WCAG 2.2 1.1.1, niveau A. Une image décorative — une icône qui répète une étiquette adjacente, une texture d’arrière-plan, une marque ornementale — porte un alt="" vide ou aria-hidden="true" pour que la technologie d’assistance l’ignore plutôt que d’annoncer du bruit. Rédiger le texte alternatif lui-même est une décision de rédaction, couverte dans Site governance → Content.

Accès clavier#

Chaque élément interactif est atteignable et utilisable au clavier seul, dans un ordre qui correspond à la mise en page visuelle, sans piège à clavier. Rien ne peut s’ouvrir, se révéler ou s’activer seulement au :hover ou par un clic de souris. C’est la contrainte que le lien d’évitement existe pour raccourcir, et celle contre laquelle chaque menu déroulant, fenêtre modale et composant à divulgation dans Components est construit.