Accessibilité
Démo des patterns a11y AURORA — cible WCAG 2.1 AA. Tabuler pour explorer. Contenu fictif — aucune donnée réelle.
1. Skip link
Tabuler depuis le début de la page pour révéler le lien «Aller au contenu principal». Invisible à la souris, visible dès le premier focus clavier.
position: fixed, top: -9999px → visible au focus via handler onFocus. La cible id="main-content" porte tabindex="-1".2. Anneau de focus visible
Anneau 2px plasma-cyan, offset 3px. Ratio de contraste ~9:1 sur fond aurora-void — conforme WCAG 1.4.11. Tabuler pour le voir sur chaque élément interactif.
Tabuler pour voir l'anneau de focus cyan (2px, offset 3px). Anneau : ratio ~9:1 sur fond AURORA.
3. Toggle accessible (aria-pressed)
Activation par clic ou clavier (Espace / Entrée). Le SR annonce l'état via aria-pressed. La région aria-live confirme le changement sans changer le libellé du bouton.
Le SR annonce : "Masquer les montants, bouton bascule, [actif | inactif]". Le libellé reste stable — l'état est communiqué par aria-pressed. La région aria-live="polite" confirme le changement.
4. Montant masqué — Privacy
Quand masqué, le SR lit «Montant masqué». Aucune valeur réelle dans aria-label, title, ni data-*. Le symbole •••••• seul serait illisible par le SR — l'aria-label est obligatoire. Contenu fictif.
aria-label, title, ni data-*. Contenu fictif.5. Nuancier de contraste AURORA
Ratios calculés depuis les valeurs brutes des tokens (rawColors). Thème AURORA dark — les thèmes clairs feront l'objet d'un audit séparé.
6. Formulaire avec erreur accessible
Anneau de focus sur le champ, aria-invalid + aria-describedby lié au message d'erreur, role=alert pour annonce SR immédiate. Erreur signalée par texte + icône, jamais par couleur seule.