\r \r

AccessLint — Web Accessibility & WCAG Compliance Scanner\r

\r AccessLint scans codebases for WCAG 2.1 violations, missing ARIA attributes, color contrast issues, keyboard navigation problems, form accessibility failures, and semantic HTML anti-patterns. It uses regex-based pattern matching against 95+ accessibility patterns across HTML, JSX, Vue, and Svelte templates. Lefthook integration for git hooks, markdown accessibility reports with WCAG success criterion mapping.\r \r

Commands\r

\r

Free Tier (No license required)\r

\r

accesslint scan [file|directory]\r

One-shot accessibility scan of files or directories.\r \r How to execute:\r

bash "\x3CSKILL_DIR>/scripts/accesslint.sh" scan [target]\r
```\r
\r
**What it does:**\r
1. Accepts a file path or directory (defaults to current directory)\r
2. Auto-detects file type from extensions (HTML, JSX, TSX, Vue, Svelte)\r
3. Finds all template/component files that contain markup\r
4. Runs 95+ accessibility patterns against each file\r
5. Calculates an accessibility score (0-100) per file and overall\r
6. Outputs findings with: file, line number, check ID, severity, WCAG criterion, description, recommendation\r
7. Exit code 0 if passing (score >= 70), exit code 1 if issues found\r
8. Free tier limited to 5 files per scan\r
\r
**Example usage scenarios:**\r
- "Scan my code for accessibility issues" -> runs `accesslint scan .`\r
- "Check this component for WCAG violations" -> runs `accesslint scan src/components/Button.tsx`\r
- "Audit my templates for missing ARIA attributes" -> runs `accesslint scan src/`\r
- "Are there any accessibility problems in my frontend?" -> runs `accesslint scan .`\r
\r
### Pro Tier ($19/user/month -- requires ACCESSLINT_LICENSE_KEY)\r
\r
#### `accesslint hooks install`\r
Install git pre-commit hooks that scan staged files for accessibility issues before every commit.\r
\r
**How to execute:**\r
```bash\r
bash "\x3CSKILL_DIR>/scripts/accesslint.sh" hooks install\r
```\r
\r
**What it does:**\r
1. Validates Pro+ license\r
2. Copies lefthook config to project root\r
3. Installs lefthook pre-commit hook\r
4. On every commit: scans all staged template files for accessibility violations, blocks commit if critical/high findings, shows remediation advice\r
\r
#### `accesslint hooks uninstall`\r
Remove AccessLint git hooks.\r
\r
```bash\r
bash "\x3CSKILL_DIR>/scripts/accesslint.sh" hooks uninstall\r
```\r
\r
#### `accesslint report [directory]`\r
Generate a markdown accessibility report with findings, severity breakdown, and WCAG criterion mapping.\r
\r
```bash\r
bash "\x3CSKILL_DIR>/scripts/accesslint.sh" report [directory]\r
```\r
\r
**What it does:**\r
1. Validates Pro+ license\r
2. Runs full scan of the directory\r
3. Generates a formatted markdown report from template\r
4. Includes per-file breakdowns, accessibility scores, WCAG 2.1 success criterion references\r
5. Output suitable for accessibility reviews and compliance audits\r
\r
#### `accesslint audit [directory]`\r
Deep accessibility audit with component analysis and ARIA coverage checks.\r
\r
```bash\r
bash "\x3CSKILL_DIR>/scripts/accesslint.sh" audit [directory]\r
```\r
\r
**What it does:**\r
1. Validates Pro+ license\r
2. Runs all 95+ patterns including framework-specific and dynamic content patterns\r
3. Analyzes component-level accessibility coverage\r
4. Reports ARIA attribute completeness across the codebase\r
5. Provides heading hierarchy and landmark region analysis\r
\r
### Team Tier ($39/user/month -- requires ACCESSLINT_LICENSE_KEY with team tier)\r
\r
#### `accesslint policy [directory]`\r
Enforce organization-specific accessibility policies on codebases.\r
\r
```bash\r
bash "\x3CSKILL_DIR>/scripts/accesslint.sh" policy [directory]\r
```\r
\r
**What it does:**\r
1. Validates Team+ license\r
2. Loads custom policies from ~/.openclaw/openclaw.json (accesslint.config.customPolicies)\r
3. Enforces organization-specific rules (e.g., required ARIA patterns, banned inaccessible patterns, mandatory alt text)\r
4. Combines custom policies with built-in patterns for comprehensive scanning\r
5. Outputs SARIF-compatible results\r
\r
#### `accesslint sarif [directory]`\r
Generate SARIF JSON output for CI/CD integration.\r
\r
```bash\r
bash "\x3CSKILL_DIR>/scripts/accesslint.sh" sarif [directory]\r
```\r
\r
**What it does:**\r
1. Validates Team+ license\r
2. Runs full scan of the directory\r
3. Outputs findings in SARIF 2.1.0 JSON format\r
4. Compatible with GitHub Code Scanning, Azure DevOps, and other SARIF consumers\r
\r
#### `accesslint wcag [directory]`\r
Generate WCAG 2.1 AA/AAA compliance report.\r
\r
```bash\r
bash "\x3CSKILL_DIR>/scripts/accesslint.sh" wcag [directory]\r
```\r
\r
**What it does:**\r
1. Validates Team+ license\r
2. Runs full scan with all patterns\r
3. Maps findings to WCAG 2.1 success criteria (Level A, AA, AAA)\r
4. Generates comprehensive compliance report with pass/fail per criterion\r
5. Includes executive summary, detailed findings, and remediation roadmap\r
\r
#### `accesslint status`\r
Show license and configuration information.\r
\r
```bash\r
bash "\x3CSKILL_DIR>/scripts/accesslint.sh" status\r
```\r
\r
## Detected Violations\r
\r
AccessLint detects 95+ accessibility patterns across 6 categories:\r
\r
| Category | Examples | Severity |\r
|----------|----------|----------|\r
| **Missing ARIA & Roles** | Images without alt, buttons without accessible names, inputs without labels, icon-only buttons without aria-label, SVG without title/role, links with no text content | Critical/High |\r
| **Semantic HTML Issues** | div/span used as button/link, nested interactive elements, heading hierarchy violations, multiple h1 tags, missing lang attribute, missing document title | Critical/High |\r
| **Keyboard Navigation** | Click handlers without keyboard equivalent, mouseOnly events, missing focus styles, tabindex misuse, focus traps without escape | High/Medium |\r
| **Form Accessibility** | Inputs without associated labels, missing fieldset/legend, placeholder-only labels, required fields without aria-required, error messages not linked | Critical/High |\r
| **Color & Visual** | Color-only information, potential low contrast patterns, missing prefers-reduced-motion, animations without motion preference | High/Medium |\r
| **Dynamic Content** | Live regions without aria-live, loading states without announcements, modals without focus management, toast/notification without role=alert | High/Medium |\r
\r
## Configuration\r
\r
Users can configure AccessLint in `~/.openclaw/openclaw.json`:\r
\r
```json\r
{\r
  "skills": {\r
    "entries": {\r
      "accesslint": {\r
        "enabled": true,\r
        "apiKey": "YOUR_LICENSE_KEY_HERE",\r
        "config": {\r
          "severityThreshold": "high",\r
          "customPolicies": [],\r
          "excludePatterns": ["**/test/**", "**/examples/**", "**/storybook/**"],\r
          "wcagLevel": "AA",\r
          "reportFormat": "markdown"\r
        }\r
      }\r
    }\r
  }\r
}\r
```\r
\r
## Important Notes\r
\r
- **Free tier** works immediately with no configuration\r
- **All scanning happens locally** -- no code is sent to external servers\r
- **License validation is offline** -- no phone-home or network calls\r
- Pattern matching only -- no AST parsing, no external dependencies\r
- Supports scanning multiple template formats in a single pass\r
- Git hooks use **lefthook** which must be installed (see install metadata above)\r
- Exit codes: 0 = passing (score >= 70), 1 = issues found (for CI/CD integration)\r
- Addresses WCAG 2.1 Level A, AA, and AAA success criteria\r
\r
## Error Handling\r
\r
- If lefthook is not installed and user tries `hooks install`, prompt to install it\r
- If license key is invalid or expired, show clear message with link to https://accesslint.pages.dev/renew\r
- If a file is binary, skip it automatically with no warning\r
- If no scannable files found in target, report clean scan with info message\r
- If file type cannot be determined from extension, skip the file gracefully\r
\r
## When to Use AccessLint\r
\r
The user might say things like:\r
- "Scan my code for accessibility issues"\r
- "Check for WCAG violations in my frontend"\r
- "Are there any missing ARIA attributes in my components?"\r
- "Audit my templates for accessibility problems"\r
- "Check if my forms have proper labels"\r
- "Scan for keyboard navigation issues"\r
- "Check my React components for a11y issues"\r
- "Generate an accessibility report"\r
- "Set up pre-commit hooks for accessibility"\r
- "Check for missing alt text on images"\r
- "Are there any heading hierarchy problems?"\r
- "Scan for color contrast issues"\r
- "Run WCAG compliance checks on my templates"\r