webflow/webflow-mcp:accessibility-audit
Run comprehensive accessibility audit (WCAG 2.1) on Webflow pages - checks buttons, forms, links, focus states, headings, keyboard navigation, and generates detailed reports with fixes. Runs entirely headlessly against a page ID — no Designer connection required. Excludes image alt text (covered by asset-audit skill).
npx skills add https://github.com/webflow/webflow-skills --skill webflow-mcp:accessibility-auditComprehensive WCAG 2.1 accessibility audit for Webflow pages with detailed issue detection and actionable fixes.
ALWAYS use Webflow MCP tools for all operations:
webflow_guide_tool to get best practices before startingdata_sites_tool with action list_sites to identify available sitesdata_sites_tool with action get_site to retrieve site detailsdata_pages_tool with action list_pages to get all pages and their page IDsdata_element_tool with action get_all_elements (passing the page ID directly) to get detailed element informationdata_element_tool with action set_attributes to fix accessibility issueselement_snapshot_tool to get visual previews of elements — this is a Designer tool and requires a Designer connection if usedcontext parameter (15-25 words, third-person perspective)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.data_sites_tool with action list_sites to identify target sitedata_pages_tool with action list_pages to show available pagesdata_element_tool with action get_all_elements, passing the target page's ID from Phase 1, for detailed analysis — no Designer connection neededinclude_style_properties: true to check focus stylesinclude_all_breakpoint_styles: false to minimize dataaria-label or aria-labelledbyaria-label attribute with descriptive textaria-labelaria-label or associate with <label> using idrole="button", tabIndex="0", suggest using real <button>10. Links without destination (WCAG 2.1.1)
href attributehref or convert to button11. Focus outline removed without replacement (WCAG 2.4.7)
outline: none style12. Missing keyboard handlers (WCAG 2.1.1)
13. Touch target too small (WCAG 2.5.5)
14. Heading hierarchy problems (WCAG 1.3.1)
15. Positive tabIndex (WCAG 2.4.3)
16. Role without required attributes (WCAG 4.1.2)
17. Categorize all findings:
18. Calculate accessibility score (0-100):
19. Generate severity summary:
20. Create detailed report with specific format:
═══════════════════════════════════════════════════
ACCESSIBILITY AUDIT: [Page Name]
═══════════════════════════════════════════════════
CRITICAL (X issues)
───────────────────
[A11Y] Element: Button "Submit"
Issue: Button missing accessible name
Location: Form section, element ID: {component: "abc", element: "xyz"}
Current: <button><CloseIcon /></button>
Fix: Add aria-label="Close"
WCAG: 4.1.2 Name, Role, Value
[A11Y] Element: Input field
Issue: Form input without label
Location: Contact form, element ID: {component: "def", element: "uvw"}
Current: <input type="email" />
Fix: Add aria-label="Email address" or associate with <label>
WCAG: 1.3.1 Info and Relationships
SERIOUS (X issues)
──────────────────
[A11Y] Element: Link "Read more"
Issue: Focus outline removed without visible alternative
Location: Blog section
Current: outline: none
Fix: Add visible focus style (e.g., border: 2px solid blue)
WCAG: 2.4.7 Focus Visible
MODERATE (X issues)
───────────────────
[A11Y] Element: Heading
Issue: Heading hierarchy skipped (h1 → h3)
Location: Article section
Current: <h3>Subsection</h3> after <h1>Title</h1>
Fix: Change to <h2> or add intermediate h2
WCAG: 1.3.1 Info and Relationships
═══════════════════════════════════════════════════
SUMMARY
───────────────────────────────────────────────────
Total Issues: X
- Critical: X issues
- Serious: X issues
- Moderate: X issues
Accessibility Score: XX/100
Most Common Issues:
1. [Issue type] - X occurrences
2. [Issue type] - X occurrences
3. [Issue type] - X occurrences
═══════════════════════════════════════════════════
21. Provide actionable insights:
22. Offer to fix issues automatically: Fixes don't require Designer, so offer auto-fixes directly
23. Show preview of fixes:
Which issues would you like to fix?
[1] ✓ Add aria-label to Submit button
Element: Button in contact form
Fix: Add aria-label="Submit contact form"
Safe: Yes (adding attribute only)
[2] ✓ Add aria-label to email input
Element: Input in contact form
Fix: Add aria-label="Email address"
Safe: Yes
[3] ⚠️ Fix heading hierarchy
Element: h3 in article section
Fix: Change heading level from h3 to h2
Safe: May affect visual styling
Type numbers to skip (e.g., "3"), "all" for all, "none" to cancel
24. Apply approved fixes: Use data_element_tool with action set_attributes
25. Generate post-fix report:
26. Offer export formats:
27. Provide resources:
✅ Button accessibility (labels, roles)
✅ Form input labels and associations
✅ Link semantics and keyboard access
✅ Focus visibility and keyboard navigation
✅ Heading hierarchy and structure
✅ ARIA roles and attributes
✅ Touch target sizes
✅ Interactive element semantics
❌ Image alt text (use asset-audit skill instead)
❌ Color contrast ratios (requires visual analysis)
❌ Animation/motion preferences
❌ Screen reader testing (needs manual verification)
❌ Content readability (language level, clarity)
User prompt:
Run an accessibility audit on my homepage
Step 1: Site & Page Selection
🔍 Accessibility Audit: Page Selection
I'll help you audit your homepage for accessibility issues.
First, let me get your site information...
Available sites:
1. Company Website
2. Portfolio Site
Which site? (1/2)
User response: 1
Step 2: Page Selection
Available pages in Company Website:
1. Home (/)
2. About (/about)
3. Contact (/contact)
4. Blog (/blog)
Which page would you like to audit? (1 for Home)
User response: 1
Step 3: Audit Scope
What level of audit would you like?
1. Full audit (all WCAG checks) - Recommended
2. Critical issues only (Level A compliance)
3. Specific categories (buttons, forms, navigation)
Your choice: (1/2/3)
User response: 1
Step 4: Audit Progress
🔄 Running Accessibility Audit...
Progress:
✅ Extracted page content (45 elements)
✅ Analyzing buttons and interactive elements
✅ Checking form inputs and labels
✅ Validating heading hierarchy
✅ Checking keyboard navigation
🔄 Analyzing focus states...
Analysis complete!
Step 5: Report
═══════════════════════════════════════════════════
ACCESSIBILITY AUDIT: Home
═══════════════════════════════════════════════════
CRITICAL (3 issues)
───────────────────
[A11Y] Element: Button (navigation toggle)
Issue: Icon-only button missing accessible name
Location: Header navigation
Element ID: {component: "nav-01", element: "btn-menu"}
Current: <button><MenuIcon /></button>
Fix: Add aria-label="Open navigation menu"
WCAG: 4.1.2 Name, Role, Value
[A11Y] Element: Input (email subscription)
Issue: Form input without label
Location: Footer, newsletter signup
Element ID: {component: "footer-01", element: "email-input"}
Current: <input type="email" placeholder="Enter email" />
Fix: Add aria-label="Email address for newsletter"
WCAG: 1.3.1 Info and Relationships
[A11Y] Element: Div (clickable card)
Issue: Non-semantic interactive element
Location: Services section, card 2
Element ID: {component: "services-01", element: "card-02"}
Current: <div onClick={...}>Service card</div>
Fix: Convert to <button> or add role="button" + tabIndex="0"
WCAG: 2.1.1 Keyboard
SERIOUS (5 issues)
──────────────────
[A11Y] Element: Link "Learn more"
Issue: Focus outline removed without visible alternative
Location: Hero section
Element ID: {component: "hero-01", element: "cta-link"}
Current: outline: none
Fix: Add focus style - border: 2px solid #0066cc or box-shadow
WCAG: 2.4.7 Focus Visible
[A11Y] Element: Button "Subscribe"
Issue: Touch target too small (30px × 36px)
Location: Footer newsletter form
Element ID: {component: "footer-01", element: "submit-btn"}
Current: Small button
Fix: Increase padding or set min-height: 44px
WCAG: 2.5.5 Target Size
[continues with 3 more serious issues...]
MODERATE (4 issues)
───────────────────
[A11Y] Element: Heading "Our Services"
Issue: Heading hierarchy skipped (h1 → h3)
Location: Services section
Element ID: {component: "services-01", element: "heading"}
Current: <h3>Our Services</h3> follows <h1>Welcome</h1>
Fix: Change to <h2> to maintain proper hierarchy
WCAG: 1.3.1 Info and Relationships
[continues with 3 more moderate issues...]
═══════════════════════════════════════════════════
SUMMARY
───────────────────────────────────────────────────
Total Issues: 12
- Critical: 3 issues (must fix)
- Serious: 5 issues (should fix)
- Moderate: 4 issues (consider fixing)
Accessibility Score: 64/100
Most Common Issues:
1. Missing button labels - 2 occurrences
2. Focus styles removed - 3 occurrences
3. Heading hierarchy problems - 2 occurrences
Quick Wins (Easy + High Impact):
✨ Add aria-label to icon buttons (2 min, +20 score points)
✨ Add input labels (5 min, +10 score points)
✨ Add focus styles (10 min, +15 score points)
═══════════════════════════════════════════════════
💡 Next Steps:
1. Fix critical issues first (blocks access for some users)
2. Add visible focus styles for keyboard users
3. Test with keyboard navigation (Tab, Enter, Space keys)
4. Consider testing with screen reader (NVDA/JAWS/VoiceOver)
Would you like me to help fix these issues?
User prompt:
Audit accessibility across my entire site
Agent response:
🔍 Multi-Page Accessibility Audit
I'll audit all pages on your site for accessibility issues.
Found 8 pages:
1. Home
2. About
3. Services
4. Team
5. Blog
6. Blog Post Template (CMS)
7. Contact
8. Privacy Policy
This will take approximately 2-3 minutes.
Proceed with full site audit? (yes/no)
User: yes
Progress:
🔄 Auditing Site Accessibility...
Progress: ████████████░░░░░░░░ 60% (5/8 pages)
✅ Home - Score: 64/100 (12 issues)
✅ About - Score: 78/100 (6 issues)
✅ Services - Score: 71/100 (9 issues)
✅ Team - Score: 85/100 (4 issues)
✅ Blog - Score: 82/100 (5 issues)
🔄 Analyzing Blog Post Template...
Final Report:
═══════════════════════════════════════════════════
SITE-WIDE ACCESSIBILITY AUDIT
═══════════════════════════════════════════════════
OVERALL SCORE: 73/100
Pages Audited: 8
Total Issues: 48
- Critical: 11 issues
- Serious: 21 issues
- Moderate: 16 issues
═══════════════════════════════════════════════════
ISSUES BY PAGE
═══════════════════════════════════════════════════
🔴 Lowest Scores (Need Attention):
1. Home - 64/100 (12 issues: 3 critical, 5 serious, 4 moderate)
2. Services - 71/100 (9 issues: 2 critical, 5 serious, 2 moderate)
3. About - 78/100 (6 issues: 1 critical, 3 serious, 2 moderate)
🟢 Highest Scores:
1. Team - 85/100 (4 issues: 0 critical, 2 serious, 2 moderate)
2. Blog - 82/100 (5 issues: 1 critical, 2 serious, 2 moderate)
═══════════════════════════════════════════════════
SITE-WIDE PATTERNS
═══════════════════════════════════════════════════
Most Common Issues Across Site:
1. Missing button labels (icon buttons) - 8 occurrences
Pages affected: Home, Services, Blog, Contact
2. Focus outline removed - 12 occurrences
Pages affected: All pages (site-wide CSS issue)
3. Form inputs without labels - 5 occurrences
Pages affected: Home, Contact
4. Small touch targets (<44px) - 9 occurrences
Pages affected: Home, About, Services, Contact
═══════════════════════════════════════════════════
RECOMMENDATIONS
═══════════════════════════════════════════════════
🎯 Site-Wide Fixes (Fix Once, Helps Everywhere):
1. Add focus styles to global CSS (affects 12 issues across all pages)
2. Update button component to require aria-label (affects 8 issues)
3. Increase minimum touch target size in design system (affects 9 issues)
📋 Page-Specific Priorities:
1. Home page: Fix navigation menu button and newsletter form
2. Services page: Add labels to service card interactions
3. Contact page: Add proper labels to all form inputs
💡 Design System Improvements:
- Create accessible button component with required aria-label
- Add focus state variants to all interactive components
- Set minimum touch target size standard (44px)
Would you like:
1. Detailed report for specific page
2. Export findings to file (Markdown/JSON/CSV)
3. Help fixing site-wide issues
User prompt:
Check my contact page for critical accessibility issues only
Agent response:
🔍 Critical Issues Audit: Contact Page
Running quick scan for blocking accessibility issues...
✅ Page analyzed
═══════════════════════════════════════════════════
CRITICAL ISSUES: Contact Page
═══════════════════════════════════════════════════
Found: 4 critical issues
[1] Form Input Missing Label
Element: Email input field
Location: Contact form, top
Issue: No accessible name for screen readers
Fix: Add aria-label="Your email address"
WCAG: 1.3.1 (Level A)
[2] Form Input Missing Label
Element: Message textarea
Location: Contact form, bottom
Issue: No accessible name for screen readers
Fix: Add aria-label="Your message"
WCAG: 1.3.1 (Level A)
[3] Button Missing Label
Element: Submit button
Location: Contact form, bottom
Issue: Icon-only button with no text
Fix: Add aria-label="Submit contact form"
WCAG: 4.1.2 (Level A)
[4] Non-Semantic Interactive Element
Element: Social media link (Instagram)
Location: Footer
Issue: Div with onClick instead of proper link
Fix: Convert to <a href="..."> with aria-label="Instagram"
WCAG: 2.1.1 (Level A)
═══════════════════════════════════════════════════
⚠️ Impact: These issues prevent screen reader users from using your contact form.
🔧 Estimated fix time: 5 minutes
Would you like me to:
1. Run full audit (includes serious and moderate issues)
2. Fix these 4 critical issues now
3. Export this report (Markdown/JSON/CSV)
Take webflow/webflow-mcp:accessibility-audit from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.