accessibility-audit

Name: accessibility-audit
Author: webflow

106stars16forks

How to install accessibility-audit?

webflow/webflow-skills/accessibility-audit

$npx -y skills add webflow/webflow-skills --skill accessibility-audit

Installs into the current project.

Summary

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 a

Files · 1

View on GitHub

SKILL.md

1	# Accessibility Audit
2
3	Comprehensive WCAG 2.1 accessibility audit for Webflow pages with detailed issue detection and actionable fixes.
4
5	## Important Note
6
7	ALWAYS use Webflow MCP tools for all operations:
8	- Use Webflow MCP's `webflow_guide_tool` to get best practices before starting
9	- Use Webflow MCP's `data_sites_tool` with action `list_sites` to identify available sites
10	- Use Webflow MCP's `data_sites_tool` with action `get_site` to retrieve site details
11	- Use Webflow MCP's `data_pages_tool` with action `list_pages` to get all pages and their page IDs
12	- Use Webflow MCP's `data_element_tool` with action `get_all_elements` (passing the page ID directly) to get detailed element information
13	- Use Webflow MCP's `data_element_tool` with action `set_attributes` to fix accessibility issues
14	- 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
15	- DO NOT use any other tools or methods for Webflow operations
16	- All tool calls must include the required `context` parameter (15-25 words, third-person perspective)
17	- 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.
18
19	## Instructions
20
21	### Phase 1: Site & Page Selection
22	1. Get site information: Use Webflow MCP's `data_sites_tool` with action `list_sites` to identify target site
23	2. Ask for page selection:
24	- If user provides page ID, use it directly
25	- Otherwise, use `data_pages_tool` with action `list_pages` to show available pages
26	- Let user select which page(s) to audit
27	3. Confirm audit scope: Ask user what to check:
28	- Full audit (all accessibility checks)
29	- Critical issues only (WCAG Level A)
30	- Specific categories (forms, buttons, navigation, etc.)
31
32	### Phase 2: Element Extraction & Analysis
33	4. 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
34	- Set `include_style_properties: true` to check focus styles
35	- Set `include_all_breakpoint_styles: false` to minimize data
36	5. Parse element data: Identify interactive and content elements:
37	- Buttons (Button, LinkBlock with button role)
38	- Links (TextLink, Link, LinkBlock)
39	- Form inputs (Input, Select, Textarea)
40	- Headings (Heading elements with levels)
41	- Interactive divs/spans (check for onClick or interactive roles)
42	- Images (Image elements) - SKIP for this audit
43	6. Extract attributes for each element:
44	- ARIA attributes (aria-label, aria-describedby, role, tabIndex)
45	- DOM attributes (id, domId, href, type, placeholder)
46	- Text content
47	- Style properties (outline, border for focus states)
48	- Element metadata (canHaveAttributes, tag name)
49
50	### Phase 3: Accessibility Checks
51
52	#### Critical Issues (Must Fix - WCAG Level A)
53	7. Icon-only buttons without labels (WCAG 4.1.2)
54	- Find: Button elements with no text content
55	- Check: Missing `aria-label` or `aria-labelledby`
56	- Impact: Screen readers cannot identify button purpose
57	- Fix: Add `aria-label` attribute with descriptive text
58
59	8. Form inputs without labels (WCAG 1.3.1)
60	- Find: Input, Select, Textarea elements
61	- Check: Missing associated label or `aria-label`
62	- Impact: Users don't know what input is for
63	- Fix: Add `aria-label` or associate with `<label>` using `id`
64
65	9. Non-semantic click handlers (WCAG 2.1.1)
66	- Find: Div or Span elements (identified by element type)
67	- Check: Interactive behavior without proper role/keyboard support
68	- Impact: Not keyboard accessible, screen readers miss interactivity
69	- Fix: Add `role="button"`, `tabIndex="0"`, suggest using real `<button>`
70
71	10. Links without destination (WCAG 2.1.1)
72	- Find: Link elements with no `href` attribute
73	- Check: Links that only use onClick without href
74	- Impact: Not keyboard accessible, breaks browser features
75	- Fix: Add proper `href` or convert to button
76
77	#### Serious Issues (Should Fix - WCAG Level AA)
78	11. Focus outline removed without replacement (WCAG 2.4.7)
79	- Find: Elements with `outline: none` style
80	- Check: No visible alternative focus indicator
81	- Impact: Keyboard users can't see focus
82	- Fix: Add visible focus style (border, box-shadow, background change)
83
84	12. Missing keyboard handlers (WCAG 2.1.1)
85	- Find: Elements with onClick handlers
86	- Check: M

People who liked this also viewed

6 picks

Type

accessibility-audit

106stars16forks

View on GitHub

How to install accessibility-audit?

webflow/webflow-skills/accessibility-audit

$npx -y skills add webflow/webflow-skills --skill accessibility-audit

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Accessibility Audit
2
3	Comprehensive WCAG 2.1 accessibility audit for Webflow pages with detailed issue detection and actionable fixes.
4
5	## Important Note
6
7	ALWAYS use Webflow MCP tools for all operations:
8	- Use Webflow MCP's `webflow_guide_tool` to get best practices before starting
9	- Use Webflow MCP's `data_sites_tool` with action `list_sites` to identify available sites
10	- Use Webflow MCP's `data_sites_tool` with action `get_site` to retrieve site details
11	- Use Webflow MCP's `data_pages_tool` with action `list_pages` to get all pages and their page IDs
12	- Use Webflow MCP's `data_element_tool` with action `get_all_elements` (passing the page ID directly) to get detailed element information
13	- Use Webflow MCP's `data_element_tool` with action `set_attributes` to fix accessibility issues
14	- 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
15	- DO NOT use any other tools or methods for Webflow operations
16	- All tool calls must include the required `context` parameter (15-25 words, third-person perspective)
17	- 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.
18
19	## Instructions
20
21	### Phase 1: Site & Page Selection
22	1. Get site information: Use Webflow MCP's `data_sites_tool` with action `list_sites` to identify target site
23	2. Ask for page selection:
24	- If user provides page ID, use it directly
25	- Otherwise, use `data_pages_tool` with action `list_pages` to show available pages
26	- Let user select which page(s) to audit
27	3. Confirm audit scope: Ask user what to check:
28	- Full audit (all accessibility checks)
29	- Critical issues only (WCAG Level A)
30	- Specific categories (forms, buttons, navigation, etc.)
31
32	### Phase 2: Element Extraction & Analysis
33	4. 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
34	- Set `include_style_properties: true` to check focus styles
35	- Set `include_all_breakpoint_styles: false` to minimize data
36	5. Parse element data: Identify interactive and content elements:
37	- Buttons (Button, LinkBlock with button role)
38	- Links (TextLink, Link, LinkBlock)
39	- Form inputs (Input, Select, Textarea)
40	- Headings (Heading elements with levels)
41	- Interactive divs/spans (check for onClick or interactive roles)
42	- Images (Image elements) - SKIP for this audit
43	6. Extract attributes for each element:
44	- ARIA attributes (aria-label, aria-describedby, role, tabIndex)
45	- DOM attributes (id, domId, href, type, placeholder)
46	- Text content
47	- Style properties (outline, border for focus states)
48	- Element metadata (canHaveAttributes, tag name)
49
50	### Phase 3: Accessibility Checks
51
52	#### Critical Issues (Must Fix - WCAG Level A)
53	7. Icon-only buttons without labels (WCAG 4.1.2)
54	- Find: Button elements with no text content
55	- Check: Missing `aria-label` or `aria-labelledby`
56	- Impact: Screen readers cannot identify button purpose
57	- Fix: Add `aria-label` attribute with descriptive text
58
59	8. Form inputs without labels (WCAG 1.3.1)
60	- Find: Input, Select, Textarea elements
61	- Check: Missing associated label or `aria-label`
62	- Impact: Users don't know what input is for
63	- Fix: Add `aria-label` or associate with `<label>` using `id`
64
65	9. Non-semantic click handlers (WCAG 2.1.1)
66	- Find: Div or Span elements (identified by element type)
67	- Check: Interactive behavior without proper role/keyboard support
68	- Impact: Not keyboard accessible, screen readers miss interactivity
69	- Fix: Add `role="button"`, `tabIndex="0"`, suggest using real `<button>`
70
71	10. Links without destination (WCAG 2.1.1)
72	- Find: Link elements with no `href` attribute
73	- Check: Links that only use onClick without href
74	- Impact: Not keyboard accessible, breaks browser features
75	- Fix: Add proper `href` or convert to button
76
77	#### Serious Issues (Should Fix - WCAG Level AA)
78	11. Focus outline removed without replacement (WCAG 2.4.7)
79	- Find: Elements with `outline: none` style
80	- Check: No visible alternative focus indicator
81	- Impact: Keyboard users can't see focus
82	- Fix: Add visible focus style (border, box-shadow, background change)
83
84	12. Missing keyboard handlers (WCAG 2.1.1)
85	- Find: Elements with onClick handlers
86	- Check: M

People who liked this also viewed

6 picks

Type