Accessibilité

Les règles qui s'appliquent à tous les composants du système, quel que soit le projet.

Focus Anneau --border-focus visible sur tout élément atteignable au clavier. Ne supprimez jamais l’outline sans le remplacer.
Sémantique Un bouton est un <button>, un lien un <a href>. Les composants du système sont des habillages : portez l’élément natif à l’intérieur.
Modales role="dialog", aria-modal="true", aria-labelledby sur le titre. Focus piégé à l’ouverture, rendu au déclencheur à la fermeture, fermeture au clavier par Échap.
Messages Les messages de validation et d’erreur sont annoncés : aria-live="polite", et aria-describedby reliant le champ à son message. La couleur ne porte jamais seule l’information.
Icônes Décoratives : aria-hidden="true". Porteuses de sens seules : aria-label sur le bouton, jamais sur le tracé.