diff --git a/plugins/webflow-skills/skills/accessibility-audit/SKILL.md b/plugins/webflow-skills/skills/accessibility-audit/SKILL.md index 78b61f9..8dca787 100644 --- a/plugins/webflow-skills/skills/accessibility-audit/SKILL.md +++ b/plugins/webflow-skills/skills/accessibility-audit/SKILL.md @@ -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 @@ -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 @@ -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 @@ -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 `