← Back to all products
$29
Accessibility Audit Toolkit
WCAG 2.1 compliance checklist, axe-core configs, screen reader testing scripts, and ARIA pattern library.
JSONMarkdownJavaScriptAWSGitHub ActionsCI/CD
📄 Product Preview
Try the interactive reader and demo tools below, or get the full product with all content unlocked.
📖 Interactive Reader (Free Preview) ⚙ Try Demo Tools 📦 Download Free Sample📁 File Structure 18 files
accessibility-audit-toolkit/
├── LICENSE
├── README.md
├── checklists/
│ └── wcag-2.1-checklist.md
├── configs/
│ └── axe-config.json
├── free-sample.zip
├── guide/
│ ├── keyboard-nav-matrix.md
│ ├── remediation-guide.md
│ └── screen-reader-testing.md
├── guides/
│ ├── keyboard-nav-matrix.md
│ ├── remediation-guide.md
│ └── screen-reader-testing.md
├── index.html
├── patterns/
│ ├── combobox.html
│ ├── dialog.html
│ ├── disclosure.html
│ ├── menu.html
│ └── tabs.html
└── scripts/
└── axe-audit.js
📖 Documentation Preview README excerpt
Accessibility Audit Toolkit
A complete toolkit for auditing web applications against WCAG 2.1 Level A and AA. Includes a criterion-by-criterion checklist, automated testing scripts, accessible component patterns, and remediation guidance.
What's Included
Checklists
| File | Description |
|---|---|
checklists/wcag-2.1-checklist.md | Every WCAG 2.1 Level A and AA criterion with specific checks, testing instructions, and pass/fail columns |
Scripts
| File | Description |
|---|---|
scripts/axe-audit.js | Automated accessibility audit using Playwright and axe-core — crawls pages, runs checks, generates JSON and markdown reports |
Configurations
| File | Description |
|---|---|
configs/axe-config.json | axe-core configuration with URL lists, rule settings, severity thresholds, and CI/CD integration options |
Accessible ARIA Patterns
Five production-ready HTML/CSS/JS implementations of common ARIA patterns. Each file is self-contained (no build step), includes extensive comments explaining every ARIA attribute, and follows the WAI-ARIA Authoring Practices Guide.
| File | Pattern | Key Features |
|---|---|---|
patterns/tabs.html | Tab interface | Arrow key navigation, automatic activation, role="tablist" / role="tab" / role="tabpanel" |
patterns/dialog.html | Modal dialog | Focus trapping, Escape to close, focus return to trigger, aria-modal, backdrop click |
patterns/combobox.html | Autocomplete input | Type-to-filter, arrow key navigation, aria-activedescendant, live region for result count |
patterns/disclosure.html | Expand/collapse (3 variants) | Native <details>, custom ARIA disclosure, accordion (single-open) |
patterns/menu.html | Menu button dropdown | Text and icon triggers, character search, disabled items, role="menu" / role="menuitem" |
Guides
| File | Description |
|---|---|
guides/screen-reader-testing.md | Step-by-step testing procedures for NVDA, VoiceOver (macOS/iOS), and JAWS — commands, settings, what to listen for |
guides/keyboard-nav-matrix.md | Expected keyboard behavior for 15+ component types — test each interaction and mark pass/fail |
guides/remediation-guide.md | How to fix the 10 most common accessibility issues, with before/after code examples |
Quick Start
1. Run the Automated Audit
The fastest way to find low-hanging fruit:
# Install dependencies
npm install playwright @axe-core/playwright
npx playwright install chromium
# Edit configs/axe-config.json to add your URLs
*... continues with setup instructions, usage examples, and more.*
📄 Code Sample .js preview
scripts/axe-audit.js
/**
* axe-audit.js — Automated accessibility audit script using Playwright and axe-core
*
* Crawls a list of URLs, runs axe-core accessibility checks on each page, and
* generates a structured JSON report plus a human-readable summary.
*
* WHY this approach:
* - axe-core catches ~57% of WCAG issues automatically (the rest need manual testing)
* - Playwright handles SPAs, dynamic content, and JavaScript rendering
* - JSON output can be fed into CI/CD pipelines for automated gating
* - The summary report helps developers prioritize fixes without reading raw JSON
*
* PREREQUISITES:
* npm install playwright @axe-core/playwright
* npx playwright install chromium
*
* USAGE:
* node axe-audit.js # Audit URLs from axe-config.json
* node axe-audit.js --url https://example.com # Audit a single URL
* node axe-audit.js --config custom-config.json # Use custom config
*
* OUTPUT:
* reports/axe-report-YYYY-MM-DD.json — Full axe-core results
* reports/axe-summary-YYYY-MM-DD.md — Human-readable summary
*/
const { chromium } = require('playwright');
const { AxeBuilder } = require('@axe-core/playwright');
const fs = require('fs');
const path = require('path');
// ---------------------------------------------------------------------------
// Configuration
// ---------------------------------------------------------------------------
/**
* Load configuration from file or use defaults.
* The config file (axe-config.json) controls which URLs to test,
* which rules to include/exclude, and reporting thresholds.
*/
function loadConfig(configPath) {
const defaultConfig = {
urls: ['https://example.com'],
axe: {
runOnly: {
type: 'tag',
// Focus on WCAG 2.1 Level A and AA — these are the legal requirements
// in most jurisdictions (ADA, EAA, Section 508)
values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'best-practice']
},
# ... 413 more lines ...