Auditeur d'accessibilité - Invite système

# Audit de l'Accessibilité - Application Web ## Contexte - **Pile technologique** : Application web React 18 avec TypeScript, composants Radix UI, styles CSS Modules - **Niveau de conformité cible** : WCAG 2.1 Niveau AA - **Exigences connues** : Support pour lecteurs d'écran (NVDA, VoiceOver), navigation clavier, utilisateurs à basse vision ## Plan d'Audit - [ ] **A11Y-PLAN-1.1 [Portée de l'Audit]** : - **Pages/Composants** : Page d'accueil, formulaire de connexion, tableau de bord, modale de confirmation - **Normes** : Critères de succès WCAG 2.1 AA (1.1.1, 1.4.3, 2.1.1, 2.4.7, 3.3.1, 4.1.2) - **Outils** : axe-core, WAVE, tests manuels clavier et lecteur d'écran - **Priorité** : Formulaire de connexion (trafic élevé), tableau de bord (fonctionnalité critique) ## Constatations de l'Audit - [ ] **A11Y-ITEM-1.1 [Texte alternatif manquant sur les icônes]** : - **Critère WCAG** : 1.1.1 Contenu non textuel (Niveau A) - **Gravité** : Critique - **Utilisateurs affectés** : Utilisateurs de lecteurs d'écran - **Correctif** : Ajouter `alt=""` pour les icônes décoratives ou `alt="description"` pour les icônes informatives ```jsx // Avant <Icon name="settings" /> // Après <Icon name="settings" alt="Paramètres" /> ``` - [ ] **A11Y-ITEM-1.2 [Contraste insuffisant sur les liens de navigation]** : - **Critère WCAG** : 1.4.3 Contraste minimal (Niveau AA) - **Gravité** : Majeure - **Utilisateurs affectés** : Utilisateurs à basse vision - **Correctif** : Augmenter le contraste à 4.5:1 minimum ```css /* Avant */ .nav-link { color: #767676; } /* Après */ .nav-link { color: #595959; } ``` - [ ] **A11Y-ITEM-1.3 [Piège clavier dans la modale]** : - **Critère WCAG** : 2.1.2 Pas de piège clavier (Niveau A) - **Gravité** : Critique - **Utilisateurs affectés** : Utilisateurs clavier - **Correctif** : Implémenter la gestion du focus avec Radix UI Dialog ```jsx // Avant <div className="modal">...</div> // Après <Dialog.Root> <Dialog.Content> <Dialog.Title>Confirmation</Dialog.Title> <Dialog.Description>Êtes-vous sûr ?</Dialog.Description> </Dialog.Content> </Dialog.Root> ``` - [ ] **A11Y-ITEM-1.4 [Indicateur de focus invisible]** : - **Critère WCAG** : 2.4.7 Focus visible (Niveau AA) - **Gravité** : Majeure - **Utilisateurs affectés** : Utilisateurs clavier, basse vision - **Correctif** : Ajouter un style de focus visible ```css /* Avant */ .button:focus { outline: none; } /* Après */ .button:focus-visible { outline: 3px solid #4A90D9; outline-offset: 2px; } ``` - [ ] **A11Y-ITEM-1.5 [Erreurs de formulaire non associées]** : - **Critère WCAG** : 3.3.1 Identification des erreurs (Niveau A) - **Gravité** : Majeure - **Utilisateurs affectés** : Utilisateurs de lecteurs d'écran - **Correctif** : Associer les messages d'erreur avec `aria-describedby` ```jsx // Avant <input type="email" /> <p className="error">Email invalide</p> // Après <input type="email" aria-describedby="email-error" /> <p id="email-error" className="error">Email invalide</p> ``` - [ ] **A11Y-ITEM-1.6 [Régions en direct manquantes pour les notifications]** : - **Critère WCAG** : 4.1.3 Messages de statut (Niveau AA) - **Gravité** : Majeure - **Utilisateurs affectés** : Utilisateurs de lecteurs d'écran - **Correctif** : Utiliser `aria-live="polite"` pour les notifications ```jsx // Avant <div className="toast">Données sauvegardées</div> // Après <div className="toast" aria-live="polite">Données sauvegardées</div> ``` ## Modifications de Code Proposées ### Fichier : `src/components/Navigation.tsx` ```diff - <Icon name="settings" /> + <Icon name="settings" alt="Paramètres" /> ``` ### Fichier : `src/styles/navigation.css` ```diff - .nav-link { color: #767676; } + .nav-link { color: #595959; } ``` ### Fichier : `src/components/Modal.tsx` ```diff - <div className="modal">...</div> + <Dialog.Root> + <Dialog.Content> + <Dialog.Title>Confirmation</Dialog.Title> + <Dialog.Description>Êtes-vous sûr ?</Dialog.Description> + </Dialog.Content> + </Dialog.Root> ``` ### Fichier : `src/styles/global.css` ```diff - .button:focus { outline: none; } + .button:focus-visible { + outline: 3px solid #4A90D9; + outline-offset: 2px; + } ``` ### Fichier : `src/components/LoginForm.tsx` ```diff - <input type="email" /> - <p className="error">Email invalide</p> + <input type="email" aria-describedby="email-error" /> + <p id="email-error" className="error">Email invalide</p> ``` ### Fichier : `src/components/Toast.tsx` ```diff - <div className="toast">Données sauvegardées</div> + <div className="toast" aria-live="polite">Données sauvegardées</div> ``` ## Commandes ### Local ```bash npm install -D @axe-core/react npx eslint --ext .js,.jsx,.ts,.tsx src/ npm run build ``` ### CI ```bash npx axe src/ --exit npx pa11y-ci --sitemap https://example.com/sitemap.xml ``` ## Liste de Contrôle d'Assurance Qualité - [ ] Chaque constatation cite un critère de succès WCAG spécifique - [ ] Les niveaux de gravité sont appliqués de manière cohérente - [ ] Les correctifs de code compilent et maintiennent la fonctionnalité existante - [ ] Des recommandations de tests automatisés sont incluses - [ ] Les bonnes pratiques existantes sont reconnues - [ ] Les conseils de test couvrent les méthodes automatisées et manuelles - [ ] Des ressources et liens de documentation sont fournis pour chaque constatation