webflow-mcp:accessibility-audit

Par webflow · webflow-skills

Skill officiel du repo webflow/webflow-skills : audit d'accessibilité WCAG 2.1 complet pour les pages Webflow, avec détection d'anomalies et corrections assistées via le Webflow MCP.

npx skills add https://github.com/webflow/webflow-skills --skill webflow-mcp:accessibility-audit

webflow-mcp:accessibility-audit

Ce skill fait partie de la collection officielle webflow/webflow-skills, qui regroupe des Agent Skills prêts à l'emploi pour travailler avec des sites Webflow via le serveur MCP de Webflow. Il s'agit d'un skill pleinement fonctionnel et documenté, non d'un squelette ou d'un template.

Ce que fait ce skill

accessibility-audit réalise un audit WCAG 2.1 structuré sur une ou plusieurs pages Webflow. Il inspecte les éléments interactifs et de contenu — boutons, liens, formulaires, titres, éléments avec rôles ARIA — et détecte les problèmes classés en trois niveaux de sévérité : Critical (bloquant), Serious (significatif) et Moderate (amélioration). Il calcule un score d'accessibilité de 0 à 100 et génère un rapport détaillé indiquant pour chaque anomalie l'élément concerné, la règle WCAG violée, l'état actuel et la correction recommandée. La vérification de l'alt text des images est volontairement exclue : elle relève du skill asset-audit.

Le skill s'appuie exclusivement sur les outils du Webflow MCP (element_tool, data_pages_tool, data_sites_tool, etc.) et requiert que le Webflow Designer soit ouvert et connecté pour accéder aux attributs et styles des éléments. Une fois les anomalies identifiées, il peut proposer d'appliquer des correctifs directement (ajout d'attributs ARIA, mise à jour de rôles) après validation explicite de l'utilisateur.

Périmètre d'analyse

Parmi les vérifications couvertes : labels manquants sur les boutons icône-seul et les champs de formulaire, éléments non sémantiques utilisés comme boutons, liens sans destination, focus outline supprimé sans remplacement visible, hiérarchie de titres incorrecte, tabIndex positif, tailles de cible tactile inférieures à 44 px, et rôles ARIA incomplets. Les problèmes visuels purs (contraste de couleurs, taille de texte) et le comportement réel des lecteurs d'écran ne peuvent pas être détectés automatiquement et nécessitent un test manuel complémentaire.

Installation et utilisation

Le skill s'installe via le plugin webflow-skills (disponible sur Claude Code, Cursor, ou via npx skills). Il nécessite le serveur Webflow MCP configuré et authentifié. Une fois installé, il suffit d'invoquer le skill et d'indiquer la page ou le site à auditer ; le skill guide l'utilisateur étape par étape, de la sélection des pages jusqu'à l'export optionnel du rapport (Markdown, JSON ou CSV).

Skills similaires