You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> **📝 Note on Audit Plugins:** The `ai-accessibility`, `ai-security`, and `ai-performance` plugins are developer-focused analysis tools designed to identify issues during development. They perform static code analysis, with `ai-accessibility` and `ai-security` also offering URL scanning capabilities (`/accessibility-audit` with Playwright MCP and `/security-scan-dependencies` respectively). These plugins are meant to **complement** (not replace) runtime testing tools, professional services, and manual testing. Use these plugins to catch issues early in the development phase, then validate with specialized testing tools and services appropriate to your domain.
Copy file name to clipboardExpand all lines: plugins/ai-accessibility/agents/accessibility-auditor.md
+3-40Lines changed: 3 additions & 40 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,46 +5,9 @@ model: inherit
5
5
color: red
6
6
---
7
7
8
-
Load the accessibility-auditing skill and follow its methodology and provide a structured report using the accessibility-auditing skill's defined template.
8
+
Load the accessibility-auditing skill and follow its methodology to produce a structured accessibility audit report.
9
9
10
-
## Audit Configuration
11
-
12
-
The user will provide:
10
+
The invoker will provide:
13
11
-**WCAG version** (2.1 or 2.2) and **conformance level** (A, AA, or AAA)
14
12
-**Scope type**: Entire solution, specific directory, or URL
15
-
-**For URL audits**: Target URL and whether Playwright MCP tools are available
16
-
17
-
## Analysis Approach
18
-
19
-
**For Codebase Analysis** (entire solution or specific directory):
20
-
Focus on identifying accessibility issues through static code analysis:
21
-
- Semantic HTML structure and heading hierarchy
22
-
- ARIA implementation and landmark regions
23
-
- Keyboard navigation patterns and focus management (code patterns)
- Alternative text for images, icons, and multimedia
28
-
- Screen reader compatibility and accessible names
29
-
- Touch target sizes and mobile accessibility (code patterns)
30
-
31
-
**For URL Analysis with Playwright MCP**:
32
-
When Playwright MCP tools are available (check for `mcp__playwright__*` functions), perform visual accessibility testing:
33
-
34
-
1.**Navigate to URL**: Use `mcp__playwright__browser_navigate` to load the page
35
-
2.**Capture Accessibility Snapshot**: Use `mcp__playwright__browser_snapshot` to get the accessibility tree
36
-
3.**Take Screenshots**: Use `mcp__playwright__browser_take_screenshot` for visual analysis
37
-
4.**Test Keyboard Navigation**: Use `mcp__playwright__browser_press_key` to test tab order and focus
38
-
5.**Measure Visual Contrast**: Analyze screenshots for actual rendered color contrast
39
-
6.**Verify Focus Indicators**: Test focus states visually using keyboard navigation
40
-
7.**Check Touch Targets**: Measure actual pixel dimensions of interactive elements
41
-
8.**Test Interactive Elements**: Use `mcp__playwright__browser_click` and `mcp__playwright__browser_type` to verify functionality
42
-
43
-
Include Playwright-based findings in the report with screenshots where relevant. Save screenshots to `/docs/accessibility/screenshots/{timestamp}-{description}.png`
44
-
45
-
## Report Requirements
46
-
47
-
Follow the accessibility-auditing skill's report template exactly, adapting for the audit type:
48
-
- For codebase audits: Include file paths and line numbers
49
-
- For URL audits: Include element selectors, visual evidence, and screenshots
50
-
- For both: Use the standardized severity levels and WCAG compliance matrix
13
+
-**For URL audits**: Target URL and whether Playwright MCP tools should be used
Copy file name to clipboardExpand all lines: plugins/ai-accessibility/commands/accessibility-audit.md
+26-21Lines changed: 26 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -45,23 +45,35 @@ If the user selects "a URL":
45
45
46
46
If the user chooses to use Playwright MCP tools:
47
47
48
-
1.**Check for Playwright MCP availability** by attempting to open a browser window using the `mcp__playwright__browser_navigate` tool. Navigate to a simple URL (e.g., "https://www.google.com/") to verify that Playwright MCP is properly installed and working. This is the ONLY method you should use to test availability - do not check for function existence or use any other testing method.
48
+
1.**Test Playwright availability** by calling `mcp__playwright__browser_navigate` with the user's target URL:
- Proceed with the audit using Playwright tools for visual testing
56
+
- Pass this information to the ai-accessibility:accessibility-auditor subagent
57
+
58
+
3.**If the navigation fails** (tool not found, error, etc.):
59
+
- Ask the user using AskUserQuestion: "Playwright MCP tools are not available. How would you like to proceed?"
60
+
- Header: "Playwright Setup"
61
+
- Options:
62
+
-**"Create .mcp.json config"**: Create a configuration file to enable Playwright MCP
63
+
-**"Skip visual testing"**: Proceed with code-based analysis only
64
+
- multiSelect: false
49
65
50
-
2.**If Playwright MCP tools are NOT available** (the browser_navigate attempt fails):
51
-
- Ask the user: "Playwright MCP tools are not installed. Would you like to create a .mcp.json configuration file to enable them?"
52
-
- If the user says yes:
66
+
If user selects "Create .mcp.json config":
53
67
a. Detect the operating system (Windows vs Linux/Mac)
54
-
b. Create `.mcp.json` in the current working directory with the appropriate configuration:
68
+
b. Create `.mcp.json` in the current working directory:
55
69
56
70
**For Linux/Mac:**
57
71
```json
58
72
{
59
73
"mcpServers": {
60
74
"playwright": {
61
75
"command": "npx",
62
-
"args": [
63
-
"@playwright/mcp@latest"
64
-
]
76
+
"args": ["@playwright/mcp@latest"]
65
77
}
66
78
}
67
79
}
@@ -73,25 +85,18 @@ If the user chooses to use Playwright MCP tools:
73
85
"mcpServers": {
74
86
"playwright": {
75
87
"command": "cmd",
76
-
"args": [
77
-
"/c",
78
-
"npx",
79
-
"@playwright/mcp@latest"
80
-
]
88
+
"args": ["/c", "npx", "@playwright/mcp@latest"]
81
89
}
82
90
}
83
91
}
84
92
```
85
93
86
-
c. After creating the file, inform the user:
87
-
- "The .mcp.json file has been created successfully."
88
-
- "You must restart Claude Code for the Playwright MCP tools to become available."
89
-
- "After restarting, run the /accessibility-audit command again."
90
-
d. **END THE COMMAND SESSION** - do not proceed with the audit
94
+
c. Inform the user they must restart Claude Code and run the command again
95
+
d. End the command session
91
96
92
-
3. **If Playwright MCP tools ARE available:**
93
-
- Proceed with the audit and include visual accessibility testing using Playwright tools
94
-
- Pass the Playwright availability information to the ai-accessibility:accessibility-auditor subagent
97
+
If user selects "Skip visual testing":
98
+
- Proceed with code-based analysis only
99
+
- Inform the subagent that Playwright is not available
95
100
96
101
Once the requirements are confirmed, use the Task tool with subagent_type "ai-accessibility:accessibility-auditor" to perform a thorough accessibility analysis and identify accessibility barriers, WCAG compliance issues, and opportunities for inclusive design improvement in the specified scope.
0 commit comments