Audit d'Accessibilité

Audit d'accessibilité WCAG 2.1 complet pour les pages Webflow avec détection détaillée des problèmes et correctifs exploitables.

Note Importante

Utilisez TOUJOURS les outils MCP Webflow pour toutes les opérations :

Utilisez webflow_guide_tool de Webflow MCP pour obtenir les bonnes pratiques avant de commencer
Utilisez data_sites_tool de Webflow MCP avec l'action list_sites pour identifier les sites disponibles
Utilisez data_sites_tool de Webflow MCP avec l'action get_site pour récupérer les détails du site
Utilisez data_pages_tool de Webflow MCP avec l'action list_pages pour obtenir toutes les pages et leurs ID
Utilisez data_element_tool de Webflow MCP avec l'action get_all_elements (en passant directement l'ID de la page) pour obtenir des informations détaillées sur les éléments
Utilisez data_element_tool de Webflow MCP avec l'action set_attributes pour corriger les problèmes d'accessibilité
Utilisez element_snapshot_tool de Webflow MCP pour obtenir des aperçus visuels des éléments – c'est un outil du Designer et nécessite une connexion au Designer
N'utilisez AUCUN autre outil ou méthode pour les opérations Webflow
Tous les appels d'outils doivent inclure le paramètre context requis (15-25 mots, perspective à la troisième personne)
Aucune connexion au Designer n'est requise pour l'audit ou les correctifs. data_element_tool fonctionne sans tête sur n'importe quel ID de page provenant de list_pages. Le Designer n'est nécessaire que si vous choisissez d'utiliser element_snapshot_tool pour des aperçus visuels facultatifs.

Instructions

Phase 1 : Sélection du Site et de la Page

Obtenir les informations du site : Utilisez data_sites_tool de Webflow MCP avec l'action list_sites pour identifier le site cible
Demander la sélection de la page :
- Si l'utilisateur fournit un ID de page, utilisez-le directement
- Sinon, utilisez data_pages_tool avec l'action list_pages pour afficher les pages disponibles
- Laissez l'utilisateur sélectionner la ou les pages à auditer
Confirmer le périmètre de l'audit : Demandez à l'utilisateur ce qu'il souhaite vérifier :
- Audit complet (toutes les vérifications d'accessibilité)
- Problèmes critiques uniquement (WCAG Niveau A)
- Catégories spécifiques (formulaires, boutons, navigation, etc.)

Phase 2 : Extraction et Analyse des Éléments

Extraire tous les éléments : Utilisez data_element_tool avec l'action get_all_elements, en passant l'ID de la page cible de la Phase 1, pour une analyse détaillée – aucune connexion au Designer n'est nécessaire
- Définissez include_style_properties: true pour vérifier les styles de focus
- Définissez include_all_breakpoint_styles: false pour minimiser les données
Analyser les données des éléments : Identifiez les éléments interactifs et de contenu :
- Boutons (Button, LinkBlock avec rôle de bouton)
- Liens (TextLink, Link, LinkBlock)
- Champs de formulaire (Input, Select, Textarea)
- Titres (éléments Heading avec niveaux)
- Div/span interactifs (vérifiez la présence d'onClick ou de rôles interactifs)
- Images (éléments Image) – IGNORER pour cet audit
Extraire les attributs pour chaque élément :
- Attributs ARIA (aria-label, aria-describedby, role, tabIndex)
- Attributs DOM (id, domId, href, type, placeholder)
- Contenu texte
- Propriétés de style (outline, border pour les états de focus)
- Métadonnées de l'élément (canHaveAttributes, nom de balise)

Phase 3 : Vérifications d'Accessibilité

Problèmes Critiques (À Corriger Impérativement – WCAG Niveau A)

Boutons avec icône uniquement sans libellé (WCAG 4.1.2)
- Rechercher : Éléments Button sans contenu textuel
- Vérifier : Absence d'aria-label ou d'aria-labelledby
- Impact : Les lecteurs d'écran ne peuvent pas identifier l'action du bouton
- Correctif : Ajoutez l'attribut aria-label avec un texte descriptif
Champs de formulaire sans libellé (WCAG 1.3.1)
- Rechercher : Éléments Input, Select, Textarea
- Vérifier : Absence de libellé associé ou d'aria-label
- Impact : Les utilisateurs ne savent pas à quoi sert le champ
- Correctif : Ajoutez aria-label ou associez avec <label> en utilisant id
Gestionnaires de clic non sémantiques (WCAG 2.1.1)
- Rechercher : Éléments Div ou Span (identifiés par le type d'élément)
- Vérifier : Comportement interactif sans rôle/prise en charge clavier appropriés
- Impact : Non accessible au clavier, les lecteurs d'écran ignorent l'interactivité
- Correctif : Ajoutez role="button", tabIndex="0", suggérez d'utiliser un véritable <button>
Liens sans destination (WCAG 2.1.1)
- Rechercher : Éléments Link sans attribut href
- Vérifier : Liens qui utilisent uniquement onClick sans href
- Impact : Non accessible au clavier, casse les fonctionnalités du navigateur
- Correctif : Ajoutez un href approprié ou convertissez en bouton

Problèmes Sérieux (Devraient Être Corrigés – WCAG Niveau AA)

Suppression du contour de focus sans remplacement (WCAG 2.4.7)
- Rechercher : Éléments avec style outline: none
- Vérifier : Absence d'indicateur de focus alternatif visible
- Impact : Les utilisateurs clavier ne peuvent pas voir le focus
- Correctif : Ajoutez un style de focus visible (border, box-shadow, changement de fond)
Gestionnaires clavier manquants (WCAG 2.1.1)
- Rechercher : Éléments avec gestionnaires onClick
- Vérifier : Absence d'onKeyDown pour les touches Entrée/Espace
- Impact : Non utilisable avec le clavier seul
- Correctif : Ajoutez des gestionnaires d'événements clavier
Cible tactile trop petite (WCAG 2.5.5)
- Rechercher : Éléments cliquables (boutons, liens)
- Vérifier : Largeur ou hauteur < 44px
- Impact : Difficile à taper sur les appareils mobiles
- Correctif : Augmentez le padding ou min-width/min-height à 44px

Problèmes Modérés (À Envisager de Corriger)

Problèmes de hiérarchie des titres (WCAG 1.3.1)
- Rechercher : Éléments de titre (h1-h6)
- Vérifier : Niveaux sautés (h1 → h3, en sautant h2)
- Impact : Structure de document confuse
- Correctif : Utilisez des niveaux de titre séquentiels appropriés
tabIndex positif (WCAG 2.4.3)
- Rechercher : Éléments avec tabIndex > 0
- Vérifier : Perturbe l'ordre de tabulation naturel
- Impact : Navigation clavier confuse
- Correctif : Utilisez uniquement tabIndex="0" ou "-1", laissez l'ordre DOM naturel fonctionner
Rôle sans attributs requis (WCAG 4.1.2)
- Rechercher : Éléments avec des rôles ARIA
- Vérifier : Attributs ARIA requis manquants (ex. role="button" sans tabIndex)
- Impact : Sémantique d'accessibilité incomplète
- Correctif : Ajoutez les attributs requis pour le rôle

Phase 4 : Catégorisation et Score des Problèmes

Catégoriser toutes les constatations :
- Critique : À corriger impérativement (bloque l'accès)
- Sérieux : Devrait être corrigé (impacte significativement l'utilisabilité)
- Modéré : Envisager la correction (améliore l'expérience)
Calculer le score d'accessibilité (0-100) :
- Commencez à 100
- Problème critique : -10 points chacun
- Problème sérieux : -5 points chacun
- Problème modéré : -2 points chacun
- Score minimum : 0
Générer le résumé de sévérité :
- Nombre total de problèmes trouvés
- Répartition par sévérité
- Types de problèmes les plus courants
- Pages/sections les plus touchées

Phase 5 : Génération du Rapport

Créer un rapport détaillé avec le format spécifique :

═══════════════════════════════════════════════════
AUDIT D'ACCESSIBILITÉ : [Nom de la page]
═══════════════════════════════════════════════════

CRITIQUE (X problèmes)
───────────────────
[A11Y] Élément : Bouton "Envoyer"
  Problème : Le bouton manque d'un nom accessible
  Emplacement : Section formulaire, ID élément : {component: "abc", element: "xyz"}
  Actuel : <button><CloseIcon /></button>
  Correctif : Ajoutez aria-label="Fermer"
  WCAG : 4.1.2 Nom, Rôle, Valeur

[A11Y] Élément : Champ de saisie
  Problème : Champ de formulaire sans libellé
  Emplacement : Formulaire de contact, ID élément : {component: "def", element: "uvw"}
  Actuel : <input type="email" />
  Correctif : Ajoutez aria-label="Adresse e-mail" ou associez avec <label>
  WCAG : 1.3.1 Informations et Relations

SÉRIEUX (X problèmes)
──────────────────
[A11Y] Élément : Lien "En savoir plus"
  Problème : Contour de focus supprimé sans alternative visible
  Emplacement : Section blog
  Actuel : outline: none
  Correctif : Ajoutez un style de focus visible (ex. border: 2px solid blue)
  WCAG : 2.4.7 Focus Visible

MODÉRÉ (X problèmes)
───────────────────
[A11Y] Élément : Titre
  Problème : Hiérarchie de titre sautée (h1 → h3)
  Emplacement : Section article
  Actuel : <h3>Sous-section</h3> après <h1>Titre</h1>
  Correctif : Remplacez par <h2> ou ajoutez un h2 intermédiaire
  WCAG : 1.3.1 Informations et Relations

═══════════════════════════════════════════════════
RÉSUMÉ
───────────────────────────────────────────────────
Nombre total de problèmes : X
- Critique : X problèmes
- Sérieux : X problèmes
- Modéré : X problèmes

Score d'accessibilité : XX/100

Problèmes les plus courants :
1. [Type de problème] - X occurrences
2. [Type de problème] - X occurrences
3. [Type de problème] - X occurrences
═══════════════════════════════════════════════════

Fournir des informations exploitables :
- Liste de correctifs priorisés (critiques en premier)
- Victoires rapides (correctifs faciles à fort impact)
- Recommandations de motifs de conception
- Ressources pour en apprendre davantage

Phase 6 : Suggestions de Correctifs et Approbation (Optionnelle)

Proposer de corriger automatiquement les problèmes : Les correctifs ne nécessitent pas le Designer, alors proposez des correctifs automatiques directement

Afficher un aperçu des correctifs :

Quels problèmes souhaitez-vous corriger ?

[1] ✓ Ajouter aria-label au bouton Envoyer
    Élément : Bouton dans le formulaire de contact
    Correctif : Ajouter aria-label="Soumettre le formulaire de contact"
    Sûr : Oui (ajout d'attribut uniquement)

[2] ✓ Ajouter aria-label à la saisie e-mail
    Élément : Champ de saisie dans le formulaire de contact
    Correctif : Ajouter aria-label="Adresse e-mail"
    Sûr : Oui

[3] ⚠️ Corriger la hiérarchie des titres
    Élément : h3 dans la section article
    Correctif : Changer le niveau de titre de h3 à h2
    Sûr : Peut affecter le style visuel

Tapez les numéros à ignorer (ex. "3"), "all" pour tout, "none" pour annuler

Appliquer les correctifs approuvés : Utilisez data_element_tool avec l'action set_attributes
- Traitez par lots
- Affichez la progression pour les grands ensembles de correctifs
- Signalez le succès/échec de chaque correctif
Générer le rapport post-correctif :
- Problèmes corrigés : X
- Problèmes restants : Y
- Nouveau score d'accessibilité : XX/100 (amélioré de YY/100)

Phase 7 : Exportation et Ressources (Optionnelle)

Proposer des formats d'exportation :
- Markdown (documentation lisible)
- JSON (lisible par machine pour le suivi)
- CSV (feuille de calcul pour révision en équipe)
Fournir des ressources :
- Liens de référence rapide WCAG 2.1
- Bonnes pratiques d'accessibilité Webflow
- Outils de test recommandés (extensions de navigateur, lecteurs d'écran)

Considérations Importantes

Ce Que Cette Compétence Vérifie

✅ Accessibilité des boutons (libellés, rôles) ✅ Libellés des champs de formulaire et associations ✅ Sémantique des liens et accès clavier ✅ Visibilité du focus et navigation clavier ✅ Hiérarchie et structure des titres ✅ Rôles et attributs ARIA ✅ Tailles des cibles tactiles ✅ Sémantique des éléments interactifs

Ce Que Cette Compétence NE Vérifie PAS

❌ Texte alternatif des images (utilisez la compétence asset-audit à la place) ❌ Ratios de contraste des couleurs (nécessite une analyse visuelle) ❌ Préférences d'animation/mouvement ❌ Test de lecteur d'écran (nécessite une vérification manuelle) ❌ Lisibilité du contenu (niveau de langue, clarté)

Limitations

Ne peut pas détecter les problèmes purement visuels (contraste des couleurs, petit texte)
Ne peut pas tester le comportement réel du lecteur d'écran
Ne peut pas valider la qualité ou la clarté du contenu
Se base uniquement sur les attributs des éléments et la structure

Exemples

Exemple 1 : Audit de Page Complet

Invite utilisateur :

Effectue un audit d'accessibilité sur ma page d'accueil

Étape 1 : Sélection du Site et de la Page

🔍 Audit d'Accessibilité : Sélection de la Page

Je vais vous aider à auditer votre page d'accueil pour les problèmes d'accessibilité.

D'abord, laissez-moi obtenir les informations de votre site...

Sites disponibles :
1. Site Entreprise
2. Site Portfolio

Quel site ? (1/2)

Réponse utilisateur : 1

Étape 2 : Sélection de la Page

Pages disponibles dans Site Entreprise :
1. Accueil (/)
2. À propos (/about)
3. Contact (/contact)
4. Blog (/blog)

Quelle page souhaitez-vous auditer ? (1 pour Accueil)

Réponse utilisateur : 1

Étape 3 : Périmètre de l'Audit

Quel niveau d'audit souhaitez-vous ?

1. Audit complet (toutes les vérifications WCAG) - Recommandé
2. Problèmes critiques uniquement (conformité Niveau A)
3. Catégories spécifiques (boutons, formulaires, navigation)

Votre choix : (1/2/3)

Réponse utilisateur : 1

Étape 4 : Progression de l'Audit

🔄 Exécution de l'audit d'accessibilité...

Progression :
✅ Contenu de la page extrait (45 éléments)
✅ Analyse des boutons et éléments interactifs
✅ Vérification des champs de formulaire et libellés
✅ Validation de la hiérarchie des titres
✅ Vérification de la navigation clavier
🔄 Analyse des états de focus...

Analyse terminée !

Étape 5 : Rapport

═══════════════════════════════════════════════════
AUDIT D'ACCESSIBILITÉ : Accueil
═══════════════════════════════════════════════════

CRITIQUE (3 problèmes)
───────────────────
[A11Y] Élément : Bouton (bascule de navigation)
  Problème : Bouton avec icône uniquement sans nom accessible
  Emplacement : Navigation d'en-tête
  ID élément : {component: "nav-01", element: "btn-menu"}
  Actuel : <button><MenuIcon /></button>
  Correctif : Ajoutez aria-label="Ouvrir le menu de navigation"
  WCAG : 4.1.2 Nom, Rôle, Valeur

[A11Y] Élément : Champ de saisie (abonnement e-mail)
  Problème : Champ de formulaire sans libellé
  Emplacement : Pied de page, inscription à la newsletter
  ID élément : {component: "footer-01", element: "email-input"}
  Actuel : <input type="email" placeholder="Saisir e-mail" />
  Correctif : Ajoutez aria-label="Adresse e-mail pour la newsletter"
  WCAG : 1.3.1 Informations et Relations

[A11Y] Élément : Div (carte cliquable)
  Problème : Élément interactif non sémantique
  Emplacement : Section services, carte 2
  ID élément : {component: "services-01", element: "card-02"}
  Actuel : <div onClick={...}>Carte service</div>
  Correctif : Convertissez en <button> ou ajoutez role="button" + tabIndex="0"
  WCAG : 2.1.1 Clavier

SÉRIEUX (5 problèmes)
──────────────────
[A11Y] Élément : Lien "En savoir plus"
  Problème : Contour de focus supprimé sans alternative visible
  Emplacement : Section héros
  ID élément : {component: "hero-01", element: "cta-link"}
  Actuel : outline: none
  Correctif : Ajoutez un style de focus - border: 2px solid #0066cc ou box-shadow
  WCAG : 2.4.7 Focus Visible

[A11Y] Élément : Bouton "S'abonner"
  Problème : Cible tactile trop petite (30px × 36px)
  Emplacement : Formulaire newsletter en pied de page
  ID élément : {component: "footer-01", element: "submit-btn"}
  Actuel : Petit bouton
  Correctif : Augmentez le padding ou définissez min-height: 44px
  WCAG : 2.5.5 Taille de Cible

[continue avec 3 problèmes sérieux supplémentaires...]

MODÉRÉ (4 problèmes)
───────────────────
[A11Y] Élément : Titre "Nos Services"
  Problème : Hiérarchie de titre sautée (h1 → h3)
  Emplacement : Section services
  ID élément : {component: "services-01", element: "heading"}
  Actuel : <h3>Nos Services</h3> suit <h1>Titre</h1>
  Correctif : Remplacez par <h2> ou ajoutez un h2 intermédiaire
  WCAG : 1.3.1 Informations et Relations

[continue avec 3 problèmes modérés supplémentaires...]

═══════════════════════════════════════════════════
RÉSUMÉ
───────────────────────────────────────────────────
Nombre total de problèmes : 12
- Critique : 3 problèmes
- Sérieux : 5 problèmes
- Modéré : 4 problèmes

Score d'accessibilité : 55/100

Problèmes les plus courants :
1. Libellés manquants - 3 occurrences
2. Focus supprimé - 2 occurrences
3. Éléments non sémantiques - 2 occurrences
═══════════════════════════════════════════════════

Étape 6 : Suggestions de Correctifs

Souhaitez-vous que je corrige certains de ces problèmes ?

Voici les correctifs disponibles :

[1] ✓ Ajouter aria-label="Ouvrir le menu de navigation"
    Élément : Bouton de navigation
    Sûr : Oui

[2] ✓ Ajouter aria-label="Adresse e-mail pour la newsletter"
    Élément : Champ e-mail en pied de page
    Sûr : Oui

[3] ⚠️ Ajouter role="button" et tabIndex="0" à l'élément Div
    Élément : Carte de service cliquable
    Sûr : Possible - peut affecter l'interactivité

[4] ✓ Ajouter un style de focus visible
    Élément : Lien "En savoir plus"
    Sûr : Oui

Tapez les numéros à ignorer (ex. "3"), "all" pour tout, "none" pour annuler :

Réponse utilisateur : all

Étape 7 : Rapport Post-Correctif

✅ Correctifs appliqués avec succès !

Problèmes corrigés : 4 sur 12
Problèmes restants : 8
Nouveau score d'accessibilité : 75/100 (amélioré de 55/100)

Rapport exporté en Markdown : accessibility-audit-home-2024-01-01.md

Référence Rapide WCAG 2.1

Critère	Niveau	Description	Vérifié par cette compétence
1.3.1	A	Informations et Relations	✅ Oui
2.1.1	A	Clavier	✅ Oui
2.4.3	A	Ordre du Focus	✅ Oui
2.4.7	AA	Focus Visible	✅ Oui
2.5.5	AA	Taille de Cible	✅ Oui
4.1.2	A	Nom, Rôle, Valeur	✅ Oui

webflow/webflow-skills

Qu'est-ce que webflow-skills ?

Demander à votre IA préférée

Documentation

Audit d'Accessibilité

Note Importante

Instructions

Phase 1 : Sélection du Site et de la Page

Phase 2 : Extraction et Analyse des Éléments

Phase 3 : Vérifications d'Accessibilité

Problèmes Critiques (À Corriger Impérativement – WCAG Niveau A)

Problèmes Sérieux (Devraient Être Corrigés – WCAG Niveau AA)

Problèmes Modérés (À Envisager de Corriger)

Phase 4 : Catégorisation et Score des Problèmes

Phase 5 : Génération du Rapport

Phase 6 : Suggestions de Correctifs et Approbation (Optionnelle)

Phase 7 : Exportation et Ressources (Optionnelle)

Considérations Importantes

Ce Que Cette Compétence Vérifie

Ce Que Cette Compétence NE Vérifie PAS

Limitations

Exemples

Exemple 1 : Audit de Page Complet

Référence Rapide WCAG 2.1

Skills associés

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me