Skip to content

feat(skills): Update accessibility audit to remove designer connection requirement #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jonsaxton-webflow wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(skills): Update accessibility audit to remove designer connection requirement #38

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 26 additions & 30 deletions plugins/webflow-skills/skills/accessibility-audit/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
name: webflow-mcp:accessibility-audit
description: 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. Requires Webflow Designer connection. Excludes image alt text (covered by asset-audit skill).
description: 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. Excludes image alt text (covered by asset-audit skill).
---

# Accessibility Audit
Expand All @@ -19,7 +19,6 @@ Comprehensive WCAG 2.1 accessibility audit for Webflow pages with detailed issue
- Use Webflow MCP's `element_snapshot_tool` to get visual previews of elements
- 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)
- **Designer connection required** - This skill needs Designer to access element attributes and styles

## Instructions

Expand All @@ -35,21 +34,18 @@ Comprehensive WCAG 2.1 accessibility audit for Webflow pages with detailed issue
- Specific categories (forms, buttons, navigation, etc.)

### Phase 2: Element Extraction & Analysis
4. **Ensure Designer is connected**: Before proceeding, verify Webflow Designer is open and connected
- If not connected, instruct user to open Designer and connect
- This is required to access element attributes and styles
5. **Switch to target page**: Use `de_page_tool` with action `switch_page` to navigate to the page being audited
6. **Extract all elements**: Use `element_tool` with action `get_all_elements` for detailed analysis
4. **Switch to target page**: Use `de_page_tool` with action `switch_page` to navigate to the page being audited
5. **Extract all elements**: Use `element_tool` with action `get_all_elements` for detailed analysis
- Set `include_style_properties: true` to check focus styles
- Set `include_all_breakpoint_styles: false` to minimize data
7. **Parse element data**: Identify interactive and content elements:
6. **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**
8. **Extract attributes for each element**:
7. **Extract attributes for each element**:
- ARIA attributes (aria-label, aria-describedby, role, tabIndex)
- DOM attributes (id, domId, href, type, placeholder)
- Text content
Expand All @@ -59,89 +55,89 @@ Comprehensive WCAG 2.1 accessibility audit for Webflow pages with detailed issue
### Phase 3: Accessibility Checks

#### Critical Issues (Must Fix - WCAG Level A)
9. **Icon-only buttons without labels** (WCAG 4.1.2)
8. **Icon-only buttons without labels** (WCAG 4.1.2)
- Find: Button elements with no text content
- Check: Missing `aria-label` or `aria-labelledby`
- Impact: Screen readers cannot identify button purpose
- Fix: Add `aria-label` attribute with descriptive text

10. **Form inputs without labels** (WCAG 1.3.1)
9. **Form inputs without labels** (WCAG 1.3.1)
- Find: Input, Select, Textarea elements
- Check: Missing associated label or `aria-label`
- Impact: Users don't know what input is for
- Fix: Add `aria-label` or associate with `<label>` using `id`

11. **Non-semantic click handlers** (WCAG 2.1.1)
10. **Non-semantic click handlers** (WCAG 2.1.1)
- Find: Div or Span elements (identified by element type)
- Check: Interactive behavior without proper role/keyboard support
- Impact: Not keyboard accessible, screen readers miss interactivity
- Fix: Add `role="button"`, `tabIndex="0"`, suggest using real `<button>`

12. **Links without destination** (WCAG 2.1.1)
11. **Links without destination** (WCAG 2.1.1)
- Find: Link elements with no `href` attribute
- Check: Links that only use onClick without href
- Impact: Not keyboard accessible, breaks browser features
- Fix: Add proper `href` or convert to button

#### Serious Issues (Should Fix - WCAG Level AA)
13. **Focus outline removed without replacement** (WCAG 2.4.7)
12. **Focus outline removed without replacement** (WCAG 2.4.7)
- Find: Elements with `outline: none` style
- Check: No visible alternative focus indicator
- Impact: Keyboard users can't see focus
- Fix: Add visible focus style (border, box-shadow, background change)

14. **Missing keyboard handlers** (WCAG 2.1.1)
13. **Missing keyboard handlers** (WCAG 2.1.1)
- Find: Elements with onClick handlers
- Check: Missing onKeyDown for Enter/Space keys
- Impact: Not usable with keyboard alone
- Fix: Add keyboard event handlers

15. **Touch target too small** (WCAG 2.5.5)
14. **Touch target too small** (WCAG 2.5.5)
- Find: Clickable elements (buttons, links)
- Check: Width or height < 44px
- Impact: Hard to tap on mobile devices
- Fix: Increase padding or min-width/min-height to 44px

#### Moderate Issues (Consider Fixing)
16. **Heading hierarchy problems** (WCAG 1.3.1)
15. **Heading hierarchy problems** (WCAG 1.3.1)
- Find: Heading elements (h1-h6)
- Check: Skipped levels (h1 → h3, skipping h2)
- Impact: Confusing document structure
- Fix: Use proper sequential heading levels

17. **Positive tabIndex** (WCAG 2.4.3)
16. **Positive tabIndex** (WCAG 2.4.3)
- Find: Elements with tabIndex > 0
- Check: Disrupts natural tab order
- Impact: Confusing keyboard navigation
- Fix: Use tabIndex="0" or "-1" only, let natural DOM order work

18. **Role without required attributes** (WCAG 4.1.2)
17. **Role without required attributes** (WCAG 4.1.2)
- Find: Elements with ARIA roles
- Check: Missing required ARIA attributes (e.g., role="button" without tabIndex)
- Impact: Incomplete accessibility semantics
- Fix: Add required attributes for role

### Phase 4: Issue Categorization & Scoring
19. **Categorize all findings**:
18. **Categorize all findings**:
- Critical: Must fix (blocks access)
- Serious: Should fix (significantly impacts usability)
- Moderate: Consider fixing (improves experience)

20. **Calculate accessibility score** (0-100):
19. **Calculate accessibility score** (0-100):
- Start at 100
- Critical issue: -10 points each
- Serious issue: -5 points each
- Moderate issue: -2 points each
- Minimum score: 0

21. **Generate severity summary**:
20. **Generate severity summary**:
- Total issues found
- Breakdown by severity
- Most common issue types
- Pages/sections most affected

### Phase 5: Report Generation
22. **Create detailed report** with specific format:
21. **Create detailed report** with specific format:
```
═══════════════════════════════════════════════════
ACCESSIBILITY AUDIT: [Page Name]
Expand Down Expand Up @@ -198,15 +194,15 @@ Comprehensive WCAG 2.1 accessibility audit for Webflow pages with detailed issue
═══════════════════════════════════════════════════
```

23. **Provide actionable insights**:
22. **Provide actionable insights**:
- Prioritized fix list (critical first)
- Quick wins (easy fixes with big impact)
- Design pattern recommendations
- Resources for learning more

### Phase 6: Fix Suggestions & Approval (Optional)
24. **Offer to fix issues automatically**: Designer is already connected, so offer auto-fixes
25. **Show preview of fixes**:
23. **Offer to fix issues automatically**: Offer auto-fixes
24. **Show preview of fixes**:
```
Which issues would you like to fix?

Expand All @@ -228,23 +224,23 @@ Comprehensive WCAG 2.1 accessibility audit for Webflow pages with detailed issue
Type numbers to skip (e.g., "3"), "all" for all, "none" to cancel
```

26. **Apply approved fixes**: Use `element_tool` with action `add_or_update_attribute`
25. **Apply approved fixes**: Use `element_tool` with action `add_or_update_attribute`
- Process in batches
- Show progress for large fix sets
- Report success/failure for each

27. **Generate post-fix report**:
26. **Generate post-fix report**:
- Issues fixed: X
- Issues remaining: Y
- New accessibility score: XX/100 (improved from YY/100)

### Phase 7: Export & Resources (Optional)
28. **Offer export formats**:
27. **Offer export formats**:
- Markdown (readable documentation)
- JSON (machine-readable for tracking)
- CSV (spreadsheet for team review)

29. **Provide resources**:
28. **Provide resources**:
- WCAG 2.1 quick reference links
- Webflow accessibility best practices
- Recommended testing tools (browser extensions, screen readers)
Expand Down
Loading