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 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
- ## 📑 Table of Contents
5
+ [![npm version](https://img.shields.io/npm/v/accessibilityhub)](https://www.npmjs.com/package/accessibilityhub)
6
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
6
7
 
7
- - [📚 Documentation](#-documentation)
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
- [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/theraaskin)
37
- [![Buy Me A Coffee](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://buymeacoffee.com/raskreation)
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
- **Response example (APCA):**
14
+ Add to your MCP client configuration:
186
15
 
187
16
  ```json
188
17
  {
189
- "success": true,
190
- "target": "https://example.com",
191
- "wcagLevel": "AA",
192
- "issueCount": 1,
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
- **WCAG Criteria:**
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
- **APCA (Accessible Perceptual Contrast Algorithm):**
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
- ### `analyze-mixed`
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
- **Response includes:**
257
- - `issues`: Combined and deduplicated issues
258
- - `issuesByWCAG`: Issues grouped by WCAG criterion
259
- - `summary.byTool`: Issue count by tool
260
- - `individualResults`: Complete results from each tool
261
- - `deduplicatedCount`: Number of duplicates removed
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
- MCP Prompts are user-controlled templates that generate structured messages for accessibility workflows. Unlike tools (which the LLM executes), prompts are invoked directly by users from clients like Claude Desktop or Cursor.
266
-
267
- ### `full-accessibility-audit`
268
-
269
- Comprehensive accessibility audit using axe-core and Pa11y with detailed remediation guidance.
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
- **Arguments:**
51
+ ## Available Resources
272
52
 
273
- | Parameter | Type | Required | Description |
274
- |-----------|------|----------|-------------|
275
- | `url` | string | Yes | URL of the page to analyze |
276
- | `wcagLevel` | "A" \| "AA" \| "AAA" | No | WCAG conformance level (default: AA) |
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 automatically include:
60
+ All accessibility issues include enriched context to help you understand and fix them:
385
61
 
386
- - **Expanded description** of the violated WCAG criterion
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** (critical, high, medium, low)
390
- - **Fix effort** (low, medium, high)
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": "**Non-text content (WCAG 1.1.1 - Level A)**\n\nScreen reader users...",
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
- WCAG data is maintained in `src/shared/data/wcag-criteria.json` and is easily updatable.
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
- Once configured, you can use prompts like:
604
-
605
- - "Analyze the accessibility of https://example.com with axe-core and Pa11y"
606
- - "Check this HTML for accessibility issues: `<img src='photo.jpg'>`"
607
- - "Compare the results of axe-core and Pa11y on my landing page" (uses analyze-mixed)
608
- - "Check the color contrast of my web page" (uses analyze-contrast)
609
- - "Analyze if text colors comply with WCAG AAA" (uses analyze-contrast with wcagLevel: AAA)
610
- - "Analyze contrast using the APCA algorithm" (uses analyze-contrast with contrastAlgorithm: APCA)
611
-
612
- ### Local Development
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
- ## Main Dependencies
96
+ ## Support Me
97
+
98
+ If this project helps you, consider supporting its development:
99
+
100
+ [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/theraaskin)
101
+ [![Buy Me A Coffee](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://buymeacoffee.com/raskreation)
102
+
103
+ ## License
659
104
 
660
- - `@modelcontextprotocol/sdk` - SDK for MCP servers
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)