8 min lecture • Guide 761 of 877
Accessibilité dans les Projets de Développement
L'accessibilité n'est pas optionnelle - elle est essentielle. GitScrum aide les équipes à suivre les exigences d'accessibilité et garantit que l'a11y fait partie de chaque fonctionnalité.
Fondamentaux de l'Accessibilité
Pourquoi l'A11y Compte
IMPACT DE L'ACCESSIBILITÉ :
┌─────────────────────────────────────────────────────────────┐
│ │
│ QUI EN BÉNÉFICIE : │
│ │
│ HANDICAPS PERMANENTS : │
│ • Utilisateurs aveugles (lecteurs d'écran) │
│ • Utilisateurs sourds (sous-titres, transcriptions) │
│ • Handicaps moteurs (navigation clavier) │
│ • Handicaps cognitifs (design clair) │
│ │
│ CONDITIONS TEMPORAIRES : │
│ • Bras cassé (ne peut pas utiliser la souris) │
│ • Infection oculaire (ne voit pas bien) │
│ • Environnement bruyant (n'entend pas) │
│ │
│ SITUATIONNEL : │
│ • Forte luminosité (faible contraste) │
│ • Une main occupée (tient un bébé) │
│ • Connexion lente (besoin de légèreté) │
│ │
│ ─────────────────────────────────────────────────────────── │
│ │
│ ARGUMENT COMMERCIAL : │
│ │
│ LÉGAL : De nombreux pays exigent l'accessibilité │
│ • ADA (États-Unis), EN 301 549 (UE), RGAA (France) │
│ • Les poursuites augmentent chaque année │
│ │
│ MARCHÉ : 15% de la population mondiale a un handicap │
│ • Segment client significatif │
│ • Population vieillissante en augmentation │
│ │
│ SEO : Les sites accessibles sont mieux référencés │
│ • Le HTML sémantique aide les moteurs de recherche │
│ • Les textes alternatifs améliorent la recherche image │
│ │
│ QUALITÉ : Accessible = meilleur pour tous │
│ • Design plus clair │
│ • Meilleur support clavier │
│ • Performance améliorée │
└─────────────────────────────────────────────────────────────┘
Directives WCAG
APERÇU WCAG 2.1 :
┌─────────────────────────────────────────────────────────────┐
│ │
│ QUATRE PRINCIPES (POUR) : │
│ │
│ PERCEPTIBLE : │
│ Le contenu doit être présentable aux utilisateurs │
│ • Alternatives textuelles pour les images │
│ • Sous-titres pour les vidéos │
│ • Contraste de couleurs suffisant │
│ • Texte redimensionnable │
│ │
│ UTILISABLE : │
│ L'interface doit être navigable │
│ • Accessible au clavier │
│ • Pas de contenu provoquant des crises │
│ • Temps suffisant pour lire/interagir │
│ • Navigation claire │
│ │
│ COMPRÉHENSIBLE : │
│ Le contenu et l'interface doivent être clairs │
│ • Texte lisible │
│ • Navigation prévisible │
│ • Assistance à la saisie │
│ │
│ ROBUSTE : │
│ Le contenu doit fonctionner avec les technologies d'aide │
│ • HTML valide │
│ • Utilisation correcte d'ARIA │
│ • Compatible avec les lecteurs d'écran │
│ │
│ ─────────────────────────────────────────────────────────── │
│ │
│ NIVEAUX DE CONFORMITÉ : │
│ │
│ Niveau A : Accessibilité minimale (minimum absolu) │
│ Niveau AA : Objectif standard (la plupart des exigences) │
│ Niveau AAA : Plus haut niveau (besoins spécialisés) │
│ │
│ RECOMMANDATION : Viser WCAG 2.1 Niveau AA │
└─────────────────────────────────────────────────────────────┘
Intégrer l'A11y
Dans les Exigences
ACCESSIBILITÉ DANS LES EXIGENCES :
┌─────────────────────────────────────────────────────────────┐
│ │
│ STORY AVEC CRITÈRES A11Y : │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ PROJ-123 : Ajouter Upload d'Images ││
│ │ ││
│ │ En tant qu'utilisateur ││
│ │ Je peux uploader des images dans mes projets ││
│ │ Afin d'inclure des visuels dans la documentation ││
│ │ ││
│ │ CRITÈRES D'ACCEPTATION : ││
│ │ ││
│ │ Fonctionnel : ││
│ │ □ Upload par glisser-déposer ou sélection fichier ││
│ │ □ Supporte JPEG, PNG, GIF (max 10 Mo) ││
│ │ □ Affiche prévisualisation avant confirmation ││
│ │ ││
│ │ Accessibilité : ││
│ │ □ Zone d'upload accessible au clavier ││
│ │ □ Champ obligatoire pour texte alternatif ││
│ │ □ Messages d'erreur annoncés au lecteur d'écran ││
│ │ □ Indicateur de progression accessible ││
│ │ □ Bouton supprimer avec label descriptif ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ CHAQUE STORY devrait avoir des critères a11y explicites │
└─────────────────────────────────────────────────────────────┘
Definition of Done avec A11y
DEFINITION OF DONE ACCESSIBLE :
┌─────────────────────────────────────────────────────────────┐
│ │
│ CHECKLIST A11Y POUR CHAQUE FONCTIONNALITÉ : │
│ │
│ CLAVIER : │
│ □ Toutes les fonctions accessibles au clavier │
│ □ Ordre de focus logique │
│ □ Indicateur de focus visible │
│ □ Pas de piège au clavier │
│ │
│ LECTEUR D'ÉCRAN : │
│ □ Testé avec NVDA ou VoiceOver │
│ □ Toutes les images ont texte alternatif │
│ □ Formulaires ont labels associés │
│ □ Landmarks ARIA appropriés │
│ │
│ VISUEL : │
│ □ Contraste couleurs ≥ 4.5:1 (texte) │
│ □ Contraste couleurs ≥ 3:1 (grands textes, icônes) │
│ □ Information pas transmise par couleur seule │
│ □ Zoom 200% sans perte de fonctionnalité │
│ │
│ FORMULAIRES : │
│ □ Messages d'erreur clairs et associés au champ │
│ □ Instructions avant la saisie │
│ □ Pas de limite de temps stricte │
│ │
│ TESTS AUTOMATISÉS : │
│ □ axe-core ou WAVE sans erreur critique │
│ □ Lighthouse Accessibility ≥ 90 │
└─────────────────────────────────────────────────────────────┘
Tests d'Accessibilité
Outils Recommandés
BOÎTE À OUTILS A11Y :
┌─────────────────────────────────────────────────────────────┐
│ │
│ TESTS AUTOMATISÉS : │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ axe DevTools │ Extension navigateur, CI/CD ││
│ │ WAVE │ Évaluation visuelle rapide ││
│ │ Lighthouse │ Audit intégré Chrome DevTools ││
│ │ Pa11y │ Ligne de commande, CI ││
│ │ jest-axe │ Tests unitaires accessibilité ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ TESTS MANUELS : │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ Navigation clavier (Tab, Enter, Espace, Flèches) ││
│ │ Lecteur d'écran (NVDA, JAWS, VoiceOver) ││
│ │ Zoom navigateur jusqu'à 200% ││
│ │ Mode contraste élevé Windows ││
│ │ Désactiver CSS pour vérifier structure ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ VÉRIFICATEURS DE CONTRASTE : │
│ • Colour Contrast Analyser (gratuit) │
│ • WebAIM Contrast Checker (en ligne) │
│ • Chrome DevTools (inspecteur couleurs) │
│ │
│ IMPORTANT : │
│ Les tests automatisés trouvent ~30% des problèmes │
│ Les tests manuels sont ESSENTIELS │
└─────────────────────────────────────────────────────────────┘
Composants Courants
Patterns Accessibles
COMPOSANTS A11Y COMMUNS :
┌─────────────────────────────────────────────────────────────┐
│ │
│ BOUTONS : │
│ • Texte descriptif (pas juste "Cliquez ici") │
│ • Icône seule → aria-label obligatoire │
│ • États focus et hover distincts │
│ │
│ FORMULAIRES : │
│ • Label associé à chaque champ (for/id) │
│ • Grouper avec fieldset/legend si lié │
│ • aria-describedby pour instructions │
│ • aria-invalid pour erreurs │
│ │
│ MODALES : │
│ • Focus piégé dans la modale ouverte │
│ • Échap ferme la modale │
│ • aria-modal="true" │
│ • Focus retourne à l'élément déclencheur │
│ │
│ TABLEAUX : │
│ • <th> avec scope pour en-têtes │
│ • caption pour description du tableau │
│ • Éviter les tableaux pour la mise en page │
│ │
│ NAVIGATION : │
│ • Lien "Aller au contenu principal" │
│ • nav avec aria-label si plusieurs │
│ • aria-current="page" pour page active │
└─────────────────────────────────────────────────────────────┘
Suivi dans GitScrum
Organisation du Travail A11y
STRUCTURE PROJET ACCESSIBILITÉ :
┌─────────────────────────────────────────────────────────────┐
│ │
│ LABELS RECOMMANDÉS : │
│ • a11y : Tâches liées à l'accessibilité │
│ • a11y-audit : Audits d'accessibilité │
│ • a11y-bug : Problèmes d'accessibilité │
│ • a11y-enhancement : Améliorations a11y │
│ │
│ COLONNE DÉDIÉE (optionnel) : │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Backlog │ │ Dev │ │ A11y QA │ │ Done │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ TÂCHES TYPE : │
│ • Audit WCAG page X │
│ • Corriger contraste boutons │
│ • Ajouter alt text catalogue images │
│ • Implémenter navigation clavier menu │
│ • Former équipe sur tests lecteur d'écran │
└─────────────────────────────────────────────────────────────┘