webflow-mcp:accessibility-audit

Accessibility Audit

Comprehensive WCAG 2.1 accessibility audit for Webflow pages with detailed issue detection and actionable fixes.

Important Note

ALWAYS use Webflow MCP tools for all operations:

• Use Webflow MCP's webflow_guide_tool to get best practices before starting
• Use Webflow MCP's data_sites_tool with action list_sites to identify available sites
• Use Webflow MCP's data_sites_tool with action get_site to retrieve site details
• Use Webflow MCP's data_pages_tool with action list_pages to get all pages and their page IDs
• Use Webflow MCP's data_element_tool with action get_all_elements (passing the page ID directly) to get detailed element information
• Use Webflow MCP's data_element_tool with action set_attributes to fix accessibility issues
• Use Webflow MCP's element_snapshot_tool to get visual previews of elements — this is a Designer tool and requires a Designer connection if used
• DO NOT use any other tools or methods for Webflow operations
• All tool calls must include the required context parameter (15-25 words, third-person perspective)
• No Designer connection is required for the audit or fixes. data_element_tool operates headlessly on any page ID from list_pages. Designer is only needed if you choose to use element_snapshot_tool for optional visual previews.

Instructions

Phase 1: Site & Page Selection

1. Get site information: Use Webflow MCP's data_sites_tool with action list_sites to identify target site
2. Ask for page selection:
   • If user provides page ID, use it directly
   • Otherwise, use data_pages_tool with action list_pages to show available pages
   • Let user select which page(s) to audit
3. Confirm audit scope: Ask user what to check:
   • Full audit (all accessibility checks)
   • Critical issues only (WCAG Level A)
   • Specific categories (forms, buttons, navigation, etc.)

Phase 2: Element Extraction & Analysis

1. Extract all elements: Use data_element_tool with action get_all_elements, passing the target page's ID from Phase 1, for detailed analysis — no Designer connection needed
   • Set include_style_properties: true to check focus styles
   • Set include_all_breakpoint_styles: false to minimize data
2. Parse element data: Identify interactive and content elements:
   • Buttons (Button, LinkBlock with button role)
   • Links (TextLink, Link, LinkBlock)
   • Form inputs (Input, Select, Textarea)
   • Headings (Heading elements with levels)
   • Interactive divs/spans (check for onClick or interactive roles)
   • Images (Image elements) - SKIP for this audit
3. Extract attributes for each element:
   • ARIA attributes (aria-label, aria-describedby, role, tabIndex)
   • DOM attributes (id, domId, href, type, placeholder)
   • Text content
   • Style properties (outline, border for focus states)
   • Element metadata (canHaveAttributes, tag name)