Conformité WCAG 2.2WCAG 2.2 compliance
Garantir la conformité WCAG 2.2 AA sur tous les composants et pages modifiés, en couvrant les critères de contraste, de focus et de cibles tactiles.Ensure WCAG 2.2 AA compliance across all modified components and pages, covering contrast, focus, and touch target criteria.
Flux du pipelinePipeline flow
01 · Déclencheur01 · Trigger
Interface ou couleurs modifiéesInterface or colors modified
site/build.js · components/*.js · tokens/ (couleurs) · Nouveau composant interactifsite/build.js · components/*.js · tokens/ (colors) · New interactive component
02 · Contrôles02 · Checks
6 critères WCAG 2.26 WCAG 2.2 criteria
1.4.3 Contraste texte ≥ 4.5:1 · 1.4.11 Non-textuel ≥ 3:1 · 1.4.12 Espacement · 2.4.7 Focus visible · 2.4.11 Focus non masqué · 2.5.8 Cibles ≥ 24×24px1.4.3 Text contrast ≥ 4.5:1 · 1.4.11 Non-text ≥ 3:1 · 1.4.12 Spacing · 2.4.7 Focus visible · 2.4.11 Focus not hidden · 2.5.8 Targets ≥ 24×24px
03 · Résultat03 · Outcome
Violation = blocageViolation = block
Toute violation d'un critère AA = commit bloqué. Les nouvelles valeurs de contraste sont vérifiées avec WebAIM Contrast Checker.Any AA criterion violation = commit blocked. New contrast values are checked with WebAIM Contrast Checker.
Valeur métierBusiness value
L'accessibilité n'est pas optionnelle. Ce pipeline garantit que chaque interface respecte les critères WCAG 2.2 AA avant d'atteindre les utilisateurs — contraste, focus et cibles tactiles inclus.Accessibility is not optional. This pipeline guarantees every interface meets WCAG 2.2 AA criteria before reaching users — contrast, focus, and touch targets included.
Matrice de déclenchementTrigger matrix
| Fichier modifiéChanged file | ActionAction |
|---|---|
tokens/primitives.json (couleurs) | Oui — vérification contraste complèteYes — full contrast check |
tokens/semantic.json (couleurs) | Oui — vérification contraste complèteYes — full contrast check |
site/build.js (CSS) | Oui — focus visible, cibles tactilesYes — focus visible, touch targets |
components/*.js | Oui — ARIA, focus, rôlesYes — ARIA, focus, roles |
Nouveau composant interactif | Oui — checklist WCAG complèteYes — full WCAG checklist |
ContrôlesChecks
- Texte normal sur fond : ratio ≥ 4.5:1 (critère 1.4.3)Normal text on background: ratio ≥ 4.5:1 (criterion 1.4.3)
- Texte large (≥ 18pt ou 14pt gras) : ratio ≥ 3:1Large text (≥ 18pt or 14pt bold): ratio ≥ 3:1
- Composants non-textuels (icônes, bordures) : ratio ≥ 3:1 (1.4.11)Non-text components (icons, borders): ratio ≥ 3:1 (1.4.11)
- :focus-visible explicite sur tous les éléments interactifs (2.4.7)Explicit :focus-visible on all interactive elements (2.4.7)
- Focus non masqué par le header fixe ou les modales (2.4.11)Focus not hidden by fixed header or modals (2.4.11)
- Étiquette dans le nom accessible — aria-label contient le texte visible (2.5.3)Label in accessible name — aria-label contains visible text (2.5.3)
- Cibles tactiles ≥ 24×24px (critère 2.5.8, nouveau WCAG 2.2)Touch targets ≥ 24×24px (criterion 2.5.8, new in WCAG 2.2)
- prefers-reduced-motion respecté sur toutes les animationsprefers-reduced-motion respected on all animations