accessibility-hub 0.5.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +59 -621
- package/dist/server.js +284 -3
- package/dist/server.js.map +1 -1
- package/docs/getting-started.md +187 -0
- package/docs/guides/README.md +31 -0
- package/docs/guides/effective-prompts.md +214 -0
- package/docs/guides/interpreting-results.md +304 -0
- package/docs/guides/workflows.md +238 -0
- package/docs/prompts/README.md +61 -0
- package/docs/prompts/contrast-check.md +127 -0
- package/docs/prompts/explain-wcag-criterion.md +174 -0
- package/docs/prompts/full-accessibility-audit.md +101 -0
- package/docs/prompts/pre-deploy-check.md +130 -0
- package/docs/prompts/quick-accessibility-check.md +83 -0
- package/docs/prompts/quick-wins-report.md +158 -0
- package/docs/resources/README.md +81 -0
- package/docs/resources/contrast-thresholds.md +216 -0
- package/docs/resources/wcag-criteria.md +157 -0
- package/docs/tools/README.md +52 -0
- package/docs/tools/analyze-contrast.md +363 -0
- package/docs/tools/analyze-mixed.md +277 -0
- package/docs/tools/analyze-with-axe.md +239 -0
- package/docs/tools/analyze-with-pa11y.md +206 -0
- package/package.json +2 -3
- package/EXAMPLES.md +0 -741
- package/USAGE.md +0 -831
package/README.md
CHANGED
|
@@ -1,667 +1,105 @@
|
|
|
1
1
|
# AccesibilityHub
|
|
2
2
|
|
|
3
|
-
MCP Server for orchestrating web accessibility tools (axe-core, Pa11y).
|
|
3
|
+
MCP Server for orchestrating web accessibility tools (axe-core, Pa11y). Analyze web pages, check color contrast, and get detailed WCAG compliance reports with enriched human context.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/accessibilityhub)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
- [Available Tools](#available-tools)
|
|
9
|
-
- [analyze-with-axe](#analyze-with-axe)
|
|
10
|
-
- [analyze-with-pa11y](#analyze-with-pa11y)
|
|
11
|
-
- [analyze-contrast](#analyze-contrast)
|
|
12
|
-
- [analyze-mixed ⭐](#analyze-mixed-)
|
|
13
|
-
- [Available Prompts](#available-prompts)
|
|
14
|
-
- [full-accessibility-audit](#full-accessibility-audit)
|
|
15
|
-
- [quick-accessibility-check](#quick-accessibility-check)
|
|
16
|
-
- [contrast-check](#contrast-check)
|
|
17
|
-
- [pre-deploy-check](#pre-deploy-check)
|
|
18
|
-
- [quick-wins-report](#quick-wins-report)
|
|
19
|
-
- [explain-wcag-criterion](#explain-wcag-criterion)
|
|
20
|
-
- [Enriched Human Context ✨](#enriched-human-context-)
|
|
21
|
-
- [Project Structure](#project-structure)
|
|
22
|
-
- [Scripts](#scripts)
|
|
23
|
-
- [Installation](#installation)
|
|
24
|
-
- [MCP Client Configuration](#mcp-client-configuration)
|
|
25
|
-
- [Claude Desktop](#claude-desktop)
|
|
26
|
-
- [Cursor](#cursor)
|
|
27
|
-
- [Windsurf](#windsurf)
|
|
28
|
-
- [Claude Code](#claude-code)
|
|
29
|
-
- [Usage](#usage)
|
|
30
|
-
- [Local Development](#local-development)
|
|
31
|
-
- [Configuration](#configuration)
|
|
32
|
-
- [Requirements](#requirements)
|
|
33
|
-
- [Main Dependencies](#main-dependencies)
|
|
34
|
-
- [Support Me](#support-me)
|
|
8
|
+
## Quick Start
|
|
35
9
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
## 📚 Documentation
|
|
40
|
-
|
|
41
|
-
- **[USAGE.md](./USAGE.md)** - Complete usage guide, workflows and effective prompts
|
|
42
|
-
- **[EXAMPLES.md](./EXAMPLES.md)** - Concrete input/output examples for each tool
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
## Available Tools
|
|
47
|
-
|
|
48
|
-
### `analyze-with-axe`
|
|
49
|
-
|
|
50
|
-
Analyzes a web page or HTML content to detect accessibility issues using axe-core.
|
|
51
|
-
|
|
52
|
-
**Parameters:**
|
|
53
|
-
|
|
54
|
-
| Parameter | Type | Required | Description |
|
|
55
|
-
|-----------|------|----------|-------------|
|
|
56
|
-
| `url` | string | url or html | URL of the page to analyze |
|
|
57
|
-
| `html` | string | url or html | Raw HTML content to analyze |
|
|
58
|
-
| `options.wcagLevel` | "A" \| "AA" \| "AAA" | No | WCAG level to verify (default: AA) |
|
|
59
|
-
| `options.rules` | string[] | No | Specific axe rule IDs to run |
|
|
60
|
-
| `options.excludeRules` | string[] | No | Axe rule IDs to exclude |
|
|
61
|
-
| `options.includeIncomplete` | boolean | No | Include "needs-review" results (default: false) |
|
|
62
|
-
| `options.browser.waitForSelector` | string | No | CSS selector to wait for before analysis |
|
|
63
|
-
| `options.browser.viewport` | object | No | Viewport dimensions |
|
|
64
|
-
|
|
65
|
-
**Response example:**
|
|
66
|
-
|
|
67
|
-
```json
|
|
68
|
-
{
|
|
69
|
-
"success": true,
|
|
70
|
-
"target": "https://example.com",
|
|
71
|
-
"issueCount": 3,
|
|
72
|
-
"issues": [
|
|
73
|
-
{
|
|
74
|
-
"id": "axe-0",
|
|
75
|
-
"ruleId": "image-alt",
|
|
76
|
-
"tool": "axe-core",
|
|
77
|
-
"severity": "critical",
|
|
78
|
-
"wcag": {
|
|
79
|
-
"criterion": "1.1.1",
|
|
80
|
-
"level": "A",
|
|
81
|
-
"principle": "perceivable"
|
|
82
|
-
},
|
|
83
|
-
"location": {
|
|
84
|
-
"selector": "img",
|
|
85
|
-
"snippet": "<img src=\"logo.png\">"
|
|
86
|
-
},
|
|
87
|
-
"message": "Images must have alternate text",
|
|
88
|
-
"affectedUsers": ["screen-reader"]
|
|
89
|
-
}
|
|
90
|
-
],
|
|
91
|
-
"summary": {
|
|
92
|
-
"total": 3,
|
|
93
|
-
"bySeverity": { "critical": 1, "serious": 2, "moderate": 0, "minor": 0 }
|
|
94
|
-
},
|
|
95
|
-
"duration": 1234
|
|
96
|
-
}
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
### `analyze-with-pa11y`
|
|
100
|
-
|
|
101
|
-
Analyzes a web page or HTML content using Pa11y.
|
|
102
|
-
|
|
103
|
-
**Parameters similar to axe**, with `options.standard` to choose the WCAG standard (WCAG2AA, WCAG21AA, etc.).
|
|
104
|
-
|
|
105
|
-
### `analyze-contrast`
|
|
106
|
-
|
|
107
|
-
Analyzes a web page or HTML content to detect color contrast issues according to WCAG 2.1. Supports the standard WCAG 2.1 algorithm and the new APCA (WCAG 3.0 draft).
|
|
108
|
-
|
|
109
|
-
**Parameters:**
|
|
110
|
-
|
|
111
|
-
| Parameter | Type | Required | Description |
|
|
112
|
-
|-----------|------|----------|-------------|
|
|
113
|
-
| `url` | string | url or html | URL of the page to analyze |
|
|
114
|
-
| `html` | string | url or html | Raw HTML content to analyze |
|
|
115
|
-
| `options.contrastAlgorithm` | "WCAG21" \| "APCA" | No | Contrast algorithm: WCAG21 (standard) or APCA (WCAG 3.0 draft - experimental). Default: WCAG21 |
|
|
116
|
-
| `options.wcagLevel` | "AA" \| "AAA" | No | WCAG level: AA (4.5:1 normal, 3:1 large) or AAA (7:1 normal, 4.5:1 large). Default: AA |
|
|
117
|
-
| `options.suggestFixes` | boolean | No | Suggest color fixes (default: true) |
|
|
118
|
-
| `options.includePassingElements` | boolean | No | Include passing elements in results (default: false) |
|
|
119
|
-
| `options.selector` | string | No | CSS selector to limit analysis to a specific element |
|
|
120
|
-
| `options.browser.waitForSelector` | string | No | CSS selector to wait for before analysis |
|
|
121
|
-
| `options.browser.viewport` | object | No | Viewport dimensions |
|
|
122
|
-
| `options.browser.ignoreHTTPSErrors` | boolean | No | Ignore SSL certificate errors (default: false) |
|
|
123
|
-
|
|
124
|
-
**Contrast algorithms:**
|
|
125
|
-
|
|
126
|
-
| Algorithm | Description | Thresholds |
|
|
127
|
-
|-----------|-------------|----------|
|
|
128
|
-
| **WCAG21** | Current standard. Uses relative luminance ratios. | AA: 4.5:1 (normal), 3:1 (large). AAA: 7:1 (normal), 4.5:1 (large) |
|
|
129
|
-
| **APCA** | WCAG 3.0 draft. Uses perceptual lightness (Lc). More accurate for text. | Body text: 75Lc, large text: 60Lc, non-text elements: 45Lc |
|
|
130
|
-
|
|
131
|
-
**Response example (WCAG21):**
|
|
132
|
-
|
|
133
|
-
```json
|
|
134
|
-
{
|
|
135
|
-
"success": true,
|
|
136
|
-
"target": "https://example.com",
|
|
137
|
-
"wcagLevel": "AA",
|
|
138
|
-
"issueCount": 2,
|
|
139
|
-
"issues": [
|
|
140
|
-
{
|
|
141
|
-
"id": "contrast-0",
|
|
142
|
-
"ruleId": "color-contrast",
|
|
143
|
-
"tool": "contrast-analyzer",
|
|
144
|
-
"severity": "serious",
|
|
145
|
-
"wcag": {
|
|
146
|
-
"criterion": "1.4.3",
|
|
147
|
-
"level": "AA",
|
|
148
|
-
"principle": "perceivable"
|
|
149
|
-
},
|
|
150
|
-
"location": {
|
|
151
|
-
"selector": "p.subtitle",
|
|
152
|
-
"snippet": "<p class=\"subtitle\">Sample text</p>"
|
|
153
|
-
},
|
|
154
|
-
"message": "Contrast ratio 3.2:1 does not meet AA requirements (4.5:1 required for normal text)",
|
|
155
|
-
"contrastData": {
|
|
156
|
-
"foreground": "rgb(150, 150, 150)",
|
|
157
|
-
"background": "rgb(255, 255, 255)",
|
|
158
|
-
"currentRatio": 3.2,
|
|
159
|
-
"requiredRatio": 4.5,
|
|
160
|
-
"isLargeText": false,
|
|
161
|
-
"fontSize": 16,
|
|
162
|
-
"fontWeight": 400,
|
|
163
|
-
"suggestedFix": {
|
|
164
|
-
"foreground": "#767676",
|
|
165
|
-
"background": "#ffffff",
|
|
166
|
-
"newRatio": 4.54
|
|
167
|
-
}
|
|
168
|
-
},
|
|
169
|
-
"affectedUsers": ["low-vision", "color-blind"]
|
|
170
|
-
}
|
|
171
|
-
],
|
|
172
|
-
"summary": {
|
|
173
|
-
"total": 15,
|
|
174
|
-
"passing": 13,
|
|
175
|
-
"failing": 2,
|
|
176
|
-
"byTextSize": {
|
|
177
|
-
"normalText": { "passing": 10, "failing": 2 },
|
|
178
|
-
"largeText": { "passing": 3, "failing": 0 }
|
|
179
|
-
}
|
|
180
|
-
},
|
|
181
|
-
"duration": 1543
|
|
182
|
-
}
|
|
10
|
+
```bash
|
|
11
|
+
npm install -g AccesibilityHub
|
|
183
12
|
```
|
|
184
13
|
|
|
185
|
-
|
|
14
|
+
Add to your MCP client configuration:
|
|
186
15
|
|
|
187
16
|
```json
|
|
188
17
|
{
|
|
189
|
-
"
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
"issues": [
|
|
194
|
-
{
|
|
195
|
-
"id": "contrast-0",
|
|
196
|
-
"ruleId": "color-contrast",
|
|
197
|
-
"tool": "contrast-analyzer",
|
|
198
|
-
"severity": "serious",
|
|
199
|
-
"wcag": {
|
|
200
|
-
"criterion": "1.4.3",
|
|
201
|
-
"level": "AA",
|
|
202
|
-
"principle": "perceivable",
|
|
203
|
-
"title": "Contrast (APCA - WCAG 3.0 Draft)"
|
|
204
|
-
},
|
|
205
|
-
"location": {
|
|
206
|
-
"selector": "p.subtitle",
|
|
207
|
-
"snippet": "<p class=\"subtitle\">Sample text</p>"
|
|
208
|
-
},
|
|
209
|
-
"message": "APCA lightness 45.2Lc does not meet requirements (75Lc required for body text)",
|
|
210
|
-
"contrastData": {
|
|
211
|
-
"foreground": "rgb(150, 150, 150)",
|
|
212
|
-
"background": "rgb(255, 255, 255)",
|
|
213
|
-
"currentRatio": 45.2,
|
|
214
|
-
"requiredRatio": 75,
|
|
215
|
-
"isLargeText": false,
|
|
216
|
-
"fontSize": 16,
|
|
217
|
-
"fontWeight": 400,
|
|
218
|
-
"suggestedFix": {
|
|
219
|
-
"foreground": "#5a5a5a",
|
|
220
|
-
"background": "#ffffff",
|
|
221
|
-
"newRatio": 75.1
|
|
222
|
-
}
|
|
223
|
-
},
|
|
224
|
-
"affectedUsers": ["low-vision", "color-blind"]
|
|
18
|
+
"mcpServers": {
|
|
19
|
+
"AccesibilityHub": {
|
|
20
|
+
"command": "npx",
|
|
21
|
+
"args": ["-y", "AccesibilityHub"]
|
|
225
22
|
}
|
|
226
|
-
|
|
227
|
-
"summary": {
|
|
228
|
-
"total": 15,
|
|
229
|
-
"passing": 14,
|
|
230
|
-
"failing": 1
|
|
231
|
-
},
|
|
232
|
-
"duration": 1234
|
|
23
|
+
}
|
|
233
24
|
}
|
|
234
25
|
```
|
|
235
26
|
|
|
236
|
-
|
|
237
|
-
- 1.4.3 Contrast (Minimum) - Level AA
|
|
238
|
-
- 1.4.6 Contrast (Enhanced) - Level AAA
|
|
27
|
+
Then ask your AI assistant:
|
|
239
28
|
|
|
240
|
-
|
|
241
|
-
- More accurate perceptual algorithm, part of the WCAG 3.0 draft
|
|
242
|
-
- Measures "lightness contrast" (Lc) instead of ratios
|
|
243
|
-
- Considers contrast direction (light text on dark vs dark text on light)
|
|
244
|
-
- Experimental: not yet an official standard
|
|
29
|
+
> "Analyze the accessibility of https://example.com"
|
|
245
30
|
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
**Synthesis tool for web analysis** that runs axe-core and Pa11y in parallel and combines the results.
|
|
249
|
-
|
|
250
|
-
**Parameters:**
|
|
251
|
-
- `url` or `html`: Web target to analyze (required)
|
|
252
|
-
- `tools`: Array of tools to run (default: `['axe-core', 'pa11y']`)
|
|
253
|
-
- `options.deduplicateResults`: Remove duplicate issues (default: `true`)
|
|
254
|
-
- `options.wcagLevel`: WCAG level (default: `'AA'`)
|
|
31
|
+
## Available Tools
|
|
255
32
|
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
33
|
+
| Tool | Description | Docs |
|
|
34
|
+
|------|-------------|------|
|
|
35
|
+
| `analyze-with-axe` | Analyze accessibility using axe-core | [docs/tools/analyze-with-axe.md](docs/tools/analyze-with-axe.md) |
|
|
36
|
+
| `analyze-with-pa11y` | Analyze accessibility using Pa11y | [docs/tools/analyze-with-pa11y.md](docs/tools/analyze-with-pa11y.md) |
|
|
37
|
+
| `analyze-contrast` | Check color contrast (WCAG 2.1 / APCA) | [docs/tools/analyze-contrast.md](docs/tools/analyze-contrast.md) |
|
|
38
|
+
| `analyze-mixed` ⭐ | Run multiple tools in parallel and combine results | [docs/tools/analyze-mixed.md](docs/tools/analyze-mixed.md) |
|
|
262
39
|
|
|
263
40
|
## Available Prompts
|
|
264
41
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
42
|
+
| Prompt | Description | Docs |
|
|
43
|
+
|--------|-------------|------|
|
|
44
|
+
| `full-accessibility-audit` | Comprehensive audit with remediation guidance | [docs/prompts/full-accessibility-audit.md](docs/prompts/full-accessibility-audit.md) |
|
|
45
|
+
| `quick-accessibility-check` | Fast check with critical issues summary | [docs/prompts/quick-accessibility-check.md](docs/prompts/quick-accessibility-check.md) |
|
|
46
|
+
| `contrast-check` | Color contrast analysis with fix suggestions | [docs/prompts/contrast-check.md](docs/prompts/contrast-check.md) |
|
|
47
|
+
| `pre-deploy-check` | Verify compliance before deployment | [docs/prompts/pre-deploy-check.md](docs/prompts/pre-deploy-check.md) |
|
|
48
|
+
| `quick-wins-report` | High-impact, low-effort fixes | [docs/prompts/quick-wins-report.md](docs/prompts/quick-wins-report.md) |
|
|
49
|
+
| `explain-wcag-criterion` | Deep dive into any WCAG criterion | [docs/prompts/explain-wcag-criterion.md](docs/prompts/explain-wcag-criterion.md) |
|
|
270
50
|
|
|
271
|
-
|
|
51
|
+
## Available Resources
|
|
272
52
|
|
|
273
|
-
|
|
|
274
|
-
|
|
275
|
-
| `
|
|
276
|
-
| `
|
|
277
|
-
|
|
278
|
-
**What it provides:**
|
|
279
|
-
- Executive summary with issue breakdown by severity
|
|
280
|
-
- Issues grouped by WCAG principle (Perceivable, Operable, Understandable, Robust)
|
|
281
|
-
- Critical issues with real-world impact analysis
|
|
282
|
-
- Prioritized remediation plan with code examples
|
|
283
|
-
|
|
284
|
-
---
|
|
285
|
-
|
|
286
|
-
### `quick-accessibility-check`
|
|
287
|
-
|
|
288
|
-
Fast accessibility check using axe-core with summary of critical issues.
|
|
289
|
-
|
|
290
|
-
**Arguments:**
|
|
291
|
-
|
|
292
|
-
| Parameter | Type | Required | Description |
|
|
293
|
-
|-----------|------|----------|-------------|
|
|
294
|
-
| `url` | string | Yes | URL of the page to analyze |
|
|
295
|
-
|
|
296
|
-
**What it provides:**
|
|
297
|
-
- Quick summary of total issues by severity
|
|
298
|
-
- Critical and serious issues with quick fix suggestions
|
|
299
|
-
- Recommendations for next steps
|
|
300
|
-
|
|
301
|
-
---
|
|
302
|
-
|
|
303
|
-
### `contrast-check`
|
|
304
|
-
|
|
305
|
-
Analyze color contrast accessibility issues using WCAG 2.1 or APCA algorithms with fix suggestions.
|
|
306
|
-
|
|
307
|
-
**Arguments:**
|
|
308
|
-
|
|
309
|
-
| Parameter | Type | Required | Description |
|
|
310
|
-
|-----------|------|----------|-------------|
|
|
311
|
-
| `url` | string | Yes | URL of the page to analyze |
|
|
312
|
-
| `selector` | string | No | CSS selector to scope the analysis |
|
|
313
|
-
| `algorithm` | "WCAG21" \| "APCA" | No | Contrast algorithm (default: WCAG21) |
|
|
314
|
-
| `wcagLevel` | "AA" \| "AAA" | No | WCAG level for contrast requirements (default: AA) |
|
|
315
|
-
| `language` | string | No | Language for the output report |
|
|
316
|
-
|
|
317
|
-
**What it provides:**
|
|
318
|
-
- Contrast analysis summary with pass/fail statistics
|
|
319
|
-
- Detailed failing elements with current vs required ratios
|
|
320
|
-
- Suggested color fixes with CSS code snippets
|
|
321
|
-
- Implementation guide with best practices
|
|
322
|
-
|
|
323
|
-
---
|
|
324
|
-
|
|
325
|
-
### `pre-deploy-check`
|
|
326
|
-
|
|
327
|
-
Verify accessibility compliance before deploying to production.
|
|
328
|
-
|
|
329
|
-
**Arguments:**
|
|
330
|
-
|
|
331
|
-
| Parameter | Type | Required | Description |
|
|
332
|
-
|-----------|------|----------|-------------|
|
|
333
|
-
| `url` | string | Yes | URL of the page to verify |
|
|
334
|
-
|
|
335
|
-
**What it provides:**
|
|
336
|
-
- Clear GO/NO-GO deployment decision
|
|
337
|
-
- Blocking issues that must be fixed before deployment
|
|
338
|
-
- Non-blocking issues for post-deployment
|
|
339
|
-
- WCAG 2.1 Level AA compliance summary
|
|
340
|
-
- Risk assessment and recommended actions
|
|
341
|
-
|
|
342
|
-
---
|
|
343
|
-
|
|
344
|
-
### `quick-wins-report`
|
|
345
|
-
|
|
346
|
-
Identify high-impact accessibility issues that require minimal effort to fix.
|
|
347
|
-
|
|
348
|
-
**Arguments:**
|
|
349
|
-
|
|
350
|
-
| Parameter | Type | Required | Description |
|
|
351
|
-
|-----------|------|----------|-------------|
|
|
352
|
-
| `url` | string | Yes | URL of the page to analyze |
|
|
353
|
-
|
|
354
|
-
**What it provides:**
|
|
355
|
-
- Priority-ordered list of quick wins
|
|
356
|
-
- Impact and effort estimates for each issue
|
|
357
|
-
- Before/after code examples
|
|
358
|
-
- Copyable implementation checklist
|
|
359
|
-
- Estimated accessibility improvement after fixes
|
|
360
|
-
|
|
361
|
-
---
|
|
362
|
-
|
|
363
|
-
### `explain-wcag-criterion`
|
|
364
|
-
|
|
365
|
-
Get detailed explanation of a WCAG criterion with examples and remediation guidance.
|
|
366
|
-
|
|
367
|
-
**Arguments:**
|
|
368
|
-
|
|
369
|
-
| Parameter | Type | Required | Description |
|
|
370
|
-
|-----------|------|----------|-------------|
|
|
371
|
-
| `criterion` | string | Yes | WCAG criterion ID (e.g., 1.1.1, 2.4.4, 1.4.3) |
|
|
372
|
-
|
|
373
|
-
**What it provides:**
|
|
374
|
-
- Deep dive into the criterion meaning and importance
|
|
375
|
-
- Code examples (before/after)
|
|
376
|
-
- Testing strategies (manual and automated)
|
|
377
|
-
- Common mistakes and how to avoid them
|
|
378
|
-
- Links to official WCAG documentation
|
|
379
|
-
|
|
380
|
-
---
|
|
53
|
+
| Resource | Description | Docs |
|
|
54
|
+
|----------|-------------|------|
|
|
55
|
+
| `wcag://criteria` | WCAG 2.1 criteria reference data | [docs/resources/wcag-criteria.md](docs/resources/wcag-criteria.md) |
|
|
56
|
+
| `contrast://thresholds/*` | Contrast thresholds (WCAG 2.1 / APCA) | [docs/resources/contrast-thresholds.md](docs/resources/contrast-thresholds.md) |
|
|
381
57
|
|
|
382
58
|
## Enriched Human Context ✨
|
|
383
59
|
|
|
384
|
-
All issues
|
|
60
|
+
All accessibility issues include enriched context to help you understand and fix them:
|
|
385
61
|
|
|
386
|
-
- **
|
|
387
|
-
- **Impact on real users** with concrete examples
|
|
62
|
+
- **WCAG criterion explanation** with real-world impact
|
|
388
63
|
- **Affected users** (screen-reader, keyboard-only, low-vision, etc.)
|
|
389
|
-
- **Remediation priority**
|
|
390
|
-
- **
|
|
391
|
-
- **Suggested solutions** step by step
|
|
64
|
+
- **Remediation priority** and **fix effort** estimates
|
|
65
|
+
- **Step-by-step suggested solutions**
|
|
392
66
|
|
|
393
|
-
Enriched issue example:
|
|
394
67
|
```json
|
|
395
68
|
{
|
|
396
69
|
"ruleId": "image-alt",
|
|
397
70
|
"severity": "serious",
|
|
398
|
-
"humanContext": "
|
|
399
|
-
"suggestedActions": ["Add descriptive alt attribute to images", ...],
|
|
71
|
+
"humanContext": "Non-text content (WCAG 1.1.1 - Level A)...",
|
|
400
72
|
"affectedUsers": ["screen-reader", "low-vision"],
|
|
401
73
|
"priority": "critical",
|
|
402
74
|
"remediationEffort": "low"
|
|
403
75
|
}
|
|
404
76
|
```
|
|
405
77
|
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
## Project Structure
|
|
409
|
-
|
|
410
|
-
```
|
|
411
|
-
src/
|
|
412
|
-
├── server.ts # MCP entry point
|
|
413
|
-
├── prompts/ # MCP Prompts (user-controlled templates)
|
|
414
|
-
│ ├── index.ts # Re-exports of all prompts
|
|
415
|
-
│ ├── types/ # PromptDefinition, PromptResult
|
|
416
|
-
│ ├── audit/ # Audit prompts
|
|
417
|
-
│ │ ├── full-accessibility-audit.ts
|
|
418
|
-
│ │ └── quick-accessibility-check.ts
|
|
419
|
-
│ ├── contrast/ # Contrast prompts
|
|
420
|
-
│ │ └── contrast-check.ts
|
|
421
|
-
│ ├── workflows/ # Workflow prompts
|
|
422
|
-
│ │ ├── pre-deploy-check.ts
|
|
423
|
-
│ │ └── quick-wins-report.ts
|
|
424
|
-
│ └── educational/ # Educational prompts
|
|
425
|
-
│ └── explain-wcag-criterion.ts
|
|
426
|
-
├── shared/ # Shared resources between tools
|
|
427
|
-
│ ├── adapters/ # Base adapter class
|
|
428
|
-
│ ├── data/ # WCAG knowledge base
|
|
429
|
-
│ │ └── wcag-criteria.json
|
|
430
|
-
│ ├── types/ # Shared types (accessibility, analysis)
|
|
431
|
-
│ └── utils/ # Common utilities
|
|
432
|
-
│ ├── logger.ts # Structured logging
|
|
433
|
-
│ └── wcag-context.ts
|
|
434
|
-
└── tools/ # MCP Tools (modular structure)
|
|
435
|
-
├── index.ts # Re-exports of all tools
|
|
436
|
-
├── Base/ # Base utilities for tools
|
|
437
|
-
│ ├── types/ # ToolDefinition, ToolResponse
|
|
438
|
-
│ └── utils/ # createTextResponse, withToolContext
|
|
439
|
-
├── Axe/ # analyze-with-axe tool
|
|
440
|
-
│ ├── adapters/ # AxeAdapter (puppeteer + axe-core)
|
|
441
|
-
│ ├── types/ # Input/output schemas
|
|
442
|
-
│ ├── utils/ # Specific utilities
|
|
443
|
-
│ └── main.ts # Tool definition
|
|
444
|
-
├── Pa11y/ # analyze-with-pa11y tool
|
|
445
|
-
│ ├── adapters/ # Pa11yAdapter
|
|
446
|
-
│ ├── normalizers/ # Results transformation
|
|
447
|
-
│ ├── types/
|
|
448
|
-
│ └── main.ts
|
|
449
|
-
├── Contrast/ # analyze-contrast tool
|
|
450
|
-
│ ├── adapters/ # ContrastAdapter
|
|
451
|
-
│ ├── types/ # Color and contrast types
|
|
452
|
-
│ ├── utils/ # Contrast calculation, parsers, converters
|
|
453
|
-
│ └── main.ts
|
|
454
|
-
└── AnalyzeMixed/ # analyze-mixed tool (multi-tool)
|
|
455
|
-
├── types/
|
|
456
|
-
├── utils/ # Deduplication, WCAG grouping
|
|
457
|
-
└── main.ts
|
|
458
|
-
|
|
459
|
-
tests/
|
|
460
|
-
├── fixtures/ # HTML with known accessibility issues
|
|
461
|
-
├── helpers/ # Test utilities (mock server, etc.)
|
|
462
|
-
├── setup.ts # Global test configuration
|
|
463
|
-
└── tools/ # Tests organized by tool
|
|
464
|
-
├── Axe/
|
|
465
|
-
│ ├── adapters.test.ts
|
|
466
|
-
│ └── main.test.ts
|
|
467
|
-
└── Contrast/
|
|
468
|
-
├── adapters.test.ts
|
|
469
|
-
└── utils/ # Color utility tests
|
|
470
|
-
```
|
|
471
|
-
|
|
472
|
-
## Scripts
|
|
473
|
-
|
|
474
|
-
```bash
|
|
475
|
-
pnpm build # Compile to dist/
|
|
476
|
-
pnpm dev # Watch mode
|
|
477
|
-
pnpm typecheck # Type checking
|
|
478
|
-
pnpm start # Start server
|
|
479
|
-
pnpm format # Format code with Prettier
|
|
480
|
-
pnpm format:check # Check formatting
|
|
481
|
-
pnpm test # Run tests
|
|
482
|
-
pnpm test:watch # Tests in watch mode
|
|
483
|
-
pnpm test:coverage # Tests with coverage report
|
|
484
|
-
pnpm inspect # Launch MCP inspector for debugging MCP tools
|
|
485
|
-
```
|
|
486
|
-
|
|
487
|
-
## Installation
|
|
488
|
-
|
|
489
|
-
```bash
|
|
490
|
-
npm install -g AccesibilityHub
|
|
491
|
-
```
|
|
492
|
-
|
|
493
|
-
Or with pnpm:
|
|
494
|
-
|
|
495
|
-
```bash
|
|
496
|
-
pnpm add -g AccesibilityHub
|
|
497
|
-
```
|
|
498
|
-
|
|
499
|
-
## MCP Client Configuration
|
|
500
|
-
|
|
501
|
-
### Claude Desktop
|
|
502
|
-
|
|
503
|
-
1. Open the configuration file:
|
|
504
|
-
- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
|
|
505
|
-
- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
|
|
506
|
-
- **Linux**: `~/.config/Claude/claude_desktop_config.json`
|
|
507
|
-
|
|
508
|
-
2. Add the server configuration:
|
|
509
|
-
|
|
510
|
-
```json
|
|
511
|
-
{
|
|
512
|
-
"mcpServers": {
|
|
513
|
-
"AccesibilityHub": {
|
|
514
|
-
"command": "npx",
|
|
515
|
-
"args": ["-y", "AccesibilityHub"],
|
|
516
|
-
"env": {
|
|
517
|
-
"LOG_LEVEL": "info"
|
|
518
|
-
}
|
|
519
|
-
}
|
|
520
|
-
}
|
|
521
|
-
}
|
|
522
|
-
```
|
|
523
|
-
|
|
524
|
-
3. Restart Claude Desktop
|
|
525
|
-
|
|
526
|
-
### Cursor
|
|
527
|
-
|
|
528
|
-
#### One-click quick installation
|
|
529
|
-
|
|
530
|
-
[<img src="https://cursor.com/deeplink/mcp-install-dark.svg" alt="Install in Cursor">](https://cursor.com/en/install-mcp?name=accessibility-hub&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsImFjY2Vzc2liaWxpdHktaHViIl19)
|
|
531
|
-
|
|
532
|
-
#### Manual installation
|
|
533
|
-
|
|
534
|
-
1. Create or edit the `.cursor/mcp.json` file in your working directory
|
|
535
|
-
|
|
536
|
-
2. Add the configuration:
|
|
537
|
-
|
|
538
|
-
```json
|
|
539
|
-
{
|
|
540
|
-
"mcpServers": {
|
|
541
|
-
"AccesibilityHub": {
|
|
542
|
-
"command": "npx",
|
|
543
|
-
"args": ["-y", "AccesibilityHub"]
|
|
544
|
-
}
|
|
545
|
-
}
|
|
546
|
-
}
|
|
547
|
-
```
|
|
548
|
-
|
|
549
|
-
3. Restart Cursor
|
|
550
|
-
|
|
551
|
-
### Windsurf
|
|
552
|
-
|
|
553
|
-
1. Open the configuration file:
|
|
554
|
-
- **macOS**: `~/Library/Application Support/Windsurf/mcp_config.json`
|
|
555
|
-
- **Windows**: `%APPDATA%\Windsurf\mcp_config.json`
|
|
556
|
-
- **Linux**: `~/.config/Windsurf/mcp_config.json`
|
|
557
|
-
|
|
558
|
-
2. Add the server configuration:
|
|
559
|
-
|
|
560
|
-
```json
|
|
561
|
-
{
|
|
562
|
-
"mcpServers": {
|
|
563
|
-
"AccesibilityHub": {
|
|
564
|
-
"command": "npx",
|
|
565
|
-
"args": ["-y", "AccesibilityHub"],
|
|
566
|
-
"env": {
|
|
567
|
-
"LOG_LEVEL": "info"
|
|
568
|
-
}
|
|
569
|
-
}
|
|
570
|
-
}
|
|
571
|
-
}
|
|
572
|
-
```
|
|
573
|
-
|
|
574
|
-
3. Restart Windsurf
|
|
575
|
-
|
|
576
|
-
### Claude Code
|
|
577
|
-
|
|
578
|
-
1. Open the configuration file:
|
|
579
|
-
- **macOS**: `~/Library/Application Support/Code/User/globalStorage/anthropic.claude-code/settings/cline_mcp_settings.json`
|
|
580
|
-
- **Windows**: `%APPDATA%\Code\User\globalStorage\anthropic.claude-code\settings\cline_mcp_settings.json`
|
|
581
|
-
- **Linux**: `~/.config/Code/User/globalStorage/anthropic.claude-code/settings/cline_mcp_settings.json`
|
|
582
|
-
|
|
583
|
-
2. Add the server configuration:
|
|
584
|
-
|
|
585
|
-
```json
|
|
586
|
-
{
|
|
587
|
-
"mcpServers": {
|
|
588
|
-
"AccesibilityHub": {
|
|
589
|
-
"command": "npx",
|
|
590
|
-
"args": ["-y", "AccesibilityHub"],
|
|
591
|
-
"env": {
|
|
592
|
-
"LOG_LEVEL": "info"
|
|
593
|
-
}
|
|
594
|
-
}
|
|
595
|
-
}
|
|
596
|
-
}
|
|
597
|
-
```
|
|
598
|
-
|
|
599
|
-
3. Restart VS Code or reload the window (Cmd/Ctrl + Shift + P → "Developer: Reload Window")
|
|
600
|
-
|
|
601
|
-
## Usage
|
|
78
|
+
## Documentation
|
|
602
79
|
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
If you're developing or contributing to the project, you can use local paths instead of npx:
|
|
615
|
-
|
|
616
|
-
**Claude Desktop / Windsurf / Claude Code**:
|
|
617
|
-
```json
|
|
618
|
-
{
|
|
619
|
-
"mcpServers": {
|
|
620
|
-
"AccesibilityHub": {
|
|
621
|
-
"command": "node",
|
|
622
|
-
"args": ["<PROJECT_PATH>/dist/server.js"],
|
|
623
|
-
"env": {
|
|
624
|
-
"LOG_LEVEL": "debug"
|
|
625
|
-
}
|
|
626
|
-
}
|
|
627
|
-
}
|
|
628
|
-
}
|
|
629
|
-
```
|
|
630
|
-
|
|
631
|
-
**Cursor**:
|
|
632
|
-
```json
|
|
633
|
-
{
|
|
634
|
-
"mcpServers": {
|
|
635
|
-
"AccesibilityHub": {
|
|
636
|
-
"command": "node",
|
|
637
|
-
"args": ["dist/server.js"],
|
|
638
|
-
"cwd": "<PROJECT_PATH>"
|
|
639
|
-
}
|
|
640
|
-
}
|
|
641
|
-
}
|
|
642
|
-
```
|
|
643
|
-
|
|
644
|
-
> 💡 **Tip**: Remember to run `pnpm build` each time you make code changes for them to be reflected in the server.
|
|
645
|
-
|
|
646
|
-
## Configuration
|
|
647
|
-
|
|
648
|
-
| Variable | Default | Description |
|
|
649
|
-
|-------------|---------|----------------------------------|
|
|
650
|
-
| `LOG_LEVEL` | `info` | `debug`, `info`, `warn`, `error` |
|
|
80
|
+
| Document | Description |
|
|
81
|
+
|----------|-------------|
|
|
82
|
+
| [Getting Started](docs/getting-started.md) | Installation and MCP client configuration |
|
|
83
|
+
| [Tools Reference](docs/tools/README.md) | Detailed tool documentation |
|
|
84
|
+
| [Prompts Reference](docs/prompts/README.md) | Prompt templates and usage |
|
|
85
|
+
| [Resources Reference](docs/resources/README.md) | Available WCAG and contrast data |
|
|
86
|
+
| [Workflows Guide](docs/guides/workflows.md) | Recommended workflows |
|
|
87
|
+
| [Effective Prompts](docs/guides/effective-prompts.md) | Tips for better accessibility prompts |
|
|
88
|
+
| [Interpreting Results](docs/guides/interpreting-results.md) | How to prioritize and fix issues |
|
|
89
|
+
| [Contributing](CONTRIBUTING.md) | Project structure, development, and contributions |
|
|
651
90
|
|
|
652
91
|
## Requirements
|
|
653
92
|
|
|
654
93
|
- Node.js ≥ 20
|
|
655
|
-
- pnpm
|
|
656
94
|
- Chrome/Chromium (automatically downloaded by Puppeteer)
|
|
657
95
|
|
|
658
|
-
##
|
|
96
|
+
## Support Me
|
|
97
|
+
|
|
98
|
+
If this project helps you, consider supporting its development:
|
|
99
|
+
|
|
100
|
+
[](https://ko-fi.com/theraaskin)
|
|
101
|
+
[](https://buymeacoffee.com/raskreation)
|
|
102
|
+
|
|
103
|
+
## License
|
|
659
104
|
|
|
660
|
-
|
|
661
|
-
- `puppeteer` - Headless browser control
|
|
662
|
-
- `@axe-core/puppeteer` - axe-core integration with Puppeteer
|
|
663
|
-
- `axe-core` - Accessibility analysis engine
|
|
664
|
-
- `pa11y` - Accessibility testing tool
|
|
665
|
-
- `colorjs.io` - Color library with WCAG 2.1 and APCA support
|
|
666
|
-
- `zod` - Schema validation
|
|
667
|
-
- `pino` - Structured logging
|
|
105
|
+
[MIT](LICENSE)
|