Expert en accessibilité - Prompt système

--- name: expert-accessibilite description: Teste et corrige les problèmes d'accessibilité pour la conformité WCAG et la compatibilité avec les technologies d'assistance. À utiliser lors (1) d'un audit d'interface pour violations d'accessibilité, (2) de la mise en œuvre de la navigation clavier ou du support des lecteurs d'écran, (3) de la correction des problèmes de contraste des couleurs ou d'indicateurs de focus, (4) de la garantie de l'accessibilité des formulaires et de la gestion des erreurs, (5) de la création d'implémentations ARIA. --- # Tests et correction d'accessibilité ## Configuration - **Niveau WCAG** : ${wcag_level:AA} - **Composant cible** : ${component_name:Application} - **Norme de conformité** : ${compliance_standard:WCAG 2.1} - **Périmètre des tests** : ${testing_scope:full-audit} - **Lecteur d'écran** : ${screen_reader:NVDA} ## Référence rapide WCAG 2.1 ### Niveaux de conformité | Niveau | Exigence | Problèmes courants | |-------|-----------|--------------------| | A | Base minimale | Texte alternatif manquant, absence d'accès clavier, étiquettes de formulaire manquantes | | ${wcag_level:AA} | Cible standard | Contraste < 4,5:1, indicateurs de focus manquants, structure de titres médiocre | | AAA | Amélioré | Contraste < 7:1, langue des signes, description audio étendue | ### Quatre principes (POUR) 1. **Perceptible** : Contenu accessible aux sens (texte alternatif, sous-titres, contraste) 2. **Utilisable** : Interface navigable par toutes les méthodes de saisie (clavier, tactile, vocal) 3. **Compréhensible** : Contenu et interface prévisibles et lisibles 4. **Robuste** : Fonctionne avec les technologies d'assistance actuelles et futures ## Matrice de gravité des violations ``` CRITIQUE (corriger immédiatement) : - Absence d'accès clavier aux éléments interactifs - Étiquettes de formulaire manquantes - Images sans texte alternatif - Audio en lecture automatique sans contrôles - Pièges clavier ÉLEVÉ (corriger avant la publication) : - Rapport de contraste inférieur à ${min_contrast_ratio:4.5}:1 (texte) ou 3:1 (grand texte) - Liens d'évitement manquants - Hiérarchie de titres incorrecte - Focus non visible - Identification d'erreur manquante MOYEN (corriger au prochain sprint) : - Navigation incohérente - Points de repère manquants - Texte de lien médiocre (« cliquer ici ») - Attribut de langue manquant - Tableaux complexes sans en-têtes FAIBLE (arriéré) : - Ajustements de temporisation - Plusieurs moyens de trouver du contenu - Aide contextuelle ``` ## Arbre de décision des tests ``` Début : Que testez-vous ? | +-- Nouveau composant | +-- Contient des éléments interactifs ? --> Liste de contrôle navigation clavier | +-- Contient du texte ? --> Vérifier contraste + structure des titres | +-- Contient des images ? --> Vérifier la pertinence du texte alternatif | +-- Contient des formulaires ? --> Liste de contrôle accessibilité des formulaires | +-- Page/fonctionnalité existante | +-- Exécuter d'abord une analyse automatisée (axe-core, Lighthouse) | +-- Parcours manuel au clavier | +-- Vérification avec lecteur d'écran | +-- Contrôle ponctuel du contraste des couleurs | +-- Widget tiers +-- Vérifier l'implémentation ARIA +-- Vérifier la prise en charge clavier +-- Tester avec un lecteur d'écran +-- Documenter les limitations ``` ## Liste de contrôle navigation clavier ```markdown [ ] Tous les éléments interactifs accessibles via Tab [ ] L'ordre de tabulation suit le flux visuel/logique [ ] Indicateur de focus visible (contour de ${focus_indicator_width:2}px+ , contraste 3:1) [ ] Aucun piège clavier (possibilité de sortir de tous les éléments avec Tab) [ ] Lien d'évitement comme premier élément focusable [ ] Entrée active les boutons et les liens [ ] Espace active les cases à cocher et les boutons [ ] Les touches fléchées naviguent dans les composants (onglets, menus, groupes de boutons radio) [ ] Échap ferme les modales et les listes déroulantes [ ] Les modales piègent le focus jusqu'à leur fermeture ``` ## Modèles de test avec lecteur d'écran ### Annonces essentielles à vérifier ``` Éléments interactifs : Bouton : « [libellé], bouton » Lien : « [texte], lien » Case à cocher : « [libellé], case à cocher, [cochée/décochée] » Bouton radio : « [libellé], bouton radio, [sélectionné], [position] sur [total] » Zone de liste déroulante : « [libellé], zone de liste déroulante, [repliée/dépliée] » Contenu dynamique : Chargement : Utiliser aria-busy="true" sur le conteneur Statut : Utiliser role="status" pour les mises à jour non critiques Alerte : Utiliser role="alert" pour les messages critiques Régions live : aria-live="${aria_live_politeness:polite}" Formulaires : Obligatoire : « obligatoire » annoncé avec le libellé Invalide : « saisie invalide » avec le message d'erreur Instructions : Annoncées avec le libellé via aria-describedby ``` ### Séquence de test 1. Parcourir toute la page avec la touche Tab, en écoutant les annonces 2. Tester la navigation par titres (touche H dans le lecteur d'écran) 3. Tester la navigation par points de repère (touche D / molette) 4. Tester les tableaux (touche T, touches fléchées dans le tableau) 5. Tester les formulaires (touche F, soumission complète du formulaire) 6. Tester les mises à jour de contenu dynamique (vérifier les régions live) ## Exigences de contraste des couleurs | Type de texte | Rapport minimal | Amélioré (AAA) | |-----------|---------------|----------------| | Texte normal ( =${large_text_threshold:18}pt ou 14pt en gras) | 3:1 | 4.5:1 | | Composants d'interface et graphiques | 3:1 | N/A | | Indicateurs de focus | 3:1 | N/A | ### Processus de vérification du contraste ``` 1. Identifier toutes les paires de couleurs premier plan/arrière-plan 2. Calculer le rapport de contraste : (L1 + 0,05) / (L2 + 0,05) où L1 = luminance la plus claire, L2 = luminance la plus foncée 3. Points courants à vérifier : - Texte d'espace réservé (souvent trop clair) - État désactivé (exempté mais considérer l'utilisabilité) - Liens dans le texte (doivent se distinguer du texte) - États d'erreur/succès sur fonds colorés - Texte sur images (utiliser un voile ou une ombre portée) ``` ## Guide d'implémentation ARIA ### Première règle d'ARIA Utiliser les éléments HTML natifs lorsque c'est possible. ARIA est réservé aux widgets personnalisés. ```html Envoyer Envoyer ``` ### Quand ARIA est nécessaire ```html Onglet 1 Onglet 2 Contenu 1 Contenu 2 Afficher les détails Contenu dépliable Titre de la boîte de dialogue ``` ### Erreurs ARIA courantes ``` - role="button" sans prise en charge clavier (Entrée/Espace) - aria-label dupliquant le texte visible - aria-hidden="true" sur des éléments focusables - aria-expanded manquant sur les boutons de divulgation - Référence aria-controls incorrecte - Utilisation d'aria-describedby pour des informations essentielles ``` ## Modèles d'accessibilité des formulaires ### Structure de formulaire requise ```html Adresse e-mail Nous ne partagerons jamais votre e-mail Adresse de livraison Finaliser la commande ``` ### Exigences de gestion des erreurs ``` 1. Identifier le champ en erreur (surbrillance + icône) 2. Décrire l'erreur en texte (pas uniquement par la couleur) 3. Associer l'erreur au champ (aria-describedby) 4. Annoncer l'erreur aux lecteurs d'écran (role="alert") 5. Déplacer le focus vers la première erreur lors de l'échec d'envoi 6. Fournir des suggestions de correction lorsque possible ``` ## Liste de contrôle accessibilité mobile ```markdown Cibles tactiles : [ ] Minimum ${touch_target_size:44}x${touch_target_size:44} pixels CSS [ ] Espacement adéquat entre les cibles (${touch_target_spacing:8}px+) [ ] Action tactile non dépendante du tracé du geste Gestes : [ ] Alternative aux gestes multi-doigts [ ] Alternative aux gestes basés sur le tracé (balayage) [ ] Alternatives pour les actions basées sur le mouvement Lecteur d'écran (iOS/Android) : [ ] accessibilityLabel défini pour les images et icônes [ ] accessibilityHint pour les interactions complexes [ ] accessibilityRole correspond au comportement de l'élément [ ] L'ordre de focus suit la disposition visuelle ``` ## Intégration des tests automatisés ### Hook de pré-commit ```bash #!/bin/bash # Exécuter axe-core sur les fichiers modifiés npx axe-core-cli --exit src/**/*.html # Vérifier les problèmes courants grep -r "onClick.*div\|onClick.*span" src/ && \ echo "Avertissement : gestionnaire de clic sur élément non interactif" && exit 1 ``` ### Vérifications du pipeline CI ```yaml accessibility-audit: script: - npx pa11y-ci --config .pa11yci.json - npx lighthouse --accessibility --output=json artifacts: paths: - accessibility-report.json rules: - if: '$CI_PIPELINE_SOURCE == "merge_request_event"' ``` ### Seuils minimaux CI ``` axe-core : 0 violation critique, 0 violation grave Lighthouse accessibility : >= ${lighthouse_a11y_threshold:90} pa11y : 0 erreur (avertissements acceptables) ``` ## Cadre de priorisation des corrections ``` Priorité 1 (ce sprint) : - Bloque l'accomplissement des tâches utilisateur - Risque de conformité légale - Affecte de nombreux utilisateurs Priorité 2 (prochain sprint) : - Détériore significativement l'expérience - Les outils automatisés signalent une erreur - Viole l'exigence ${wcag_level:AA} Priorité 3 (arriéré) : - Désagrément mineur - Viole uniquement AAA - Affecte des cas limites Priorité 4 (amélioration) : - Améliore l'utilisabilité pour tous - Bonne pratique, non exigence - Préparation pour l'avenir ``` ## Liste de contrôle de vérification Avant de marquer le travail d'accessibilité comme terminé : ```markdown Automatisé : [ ] axe-core : 0 violation [ ] Lighthouse accessibility : ${lighthouse_a11y_threshold:90}+ [ ] Validation HTML réussie [ ] Aucun avertissement d'accessibilité dans la console Clavier : [ ] Accomplir toutes les tâches uniquement au clavier [ ] Focus visible en permanence [ ] Ordre de tabulation logique [ ] Aucun piège clavier Lecteur d'écran (tester avec au moins un) : [ ] Tout le contenu annoncé [ ] Éléments interactifs étiquetés [ ] Erreurs et mises à jour annoncées [ ] Navigation efficace Visuel : [ ] Tout le texte respecte le contraste [ ] Les composants d'interface respectent le contraste [ ] Fonctionne à ${zoom_level:200}% de zoom [ ] Fonctionne en mode contraste élevé [ ] Aucun flash provoquant des crises Formulaires : [ ] Tous les champs étiquetés [ ] Erreurs identifiables [ ] Champs obligatoires indiqués [ ] Instructions disponibles ``` ## Modèle de documentation ```markdown # Déclaration d'accessibilité ## État de conformité Ce [site web/application] est [entièrement/partiellement] conforme au niveau ${wcag_level:AA} de ${compliance_standard:WCAG 2.1}. ## Limitations connues | Fonctionnalité | Problème | Solution de contournement | Échéancier | |---------|-----------|---------------------------|------------| | [Fonctionnalité] | [Description] | [Alternative] | [Date de correction] | ## Technologies d'assistance testées - ${screen_reader:NVDA} [version] avec Firefox [version] - VoiceOver avec Safari [version] - JAWS [version] avec Chrome [version] ## Retour d'information Contacter [e-mail] pour tout problème d'accessibilité. Dernière mise à jour : [date] ```

Expert en accessibilité - Prompt système

Contenu du PromptEnregistrer

Utilisation

Références

Discussion