Accessibility Auditor Agent

The Accessibility Auditor Agent automatically scans your frontend code for accessibility issues, ensuring WCAG 2.1/2.2 compliance.

What It Does

• Runs axe-core scans - Automated accessibility testing on your components
• Checks ARIA usage - Validates proper ARIA attributes and roles
• Validates color contrast - Ensures text meets contrast requirements
• Checks keyboard navigation - Verifies focus management and tab order
• Annotates PRs - Adds inline comments with specific WCAG violations

Supported Frameworks

| Framework | Support | |-----------|---------| | React/Next.js | Full | | Vue/Nuxt | Full | | Angular | Full | | Svelte | Full | | Plain HTML | Full |

Configuration

agents:
  - name: accessibility-auditor
    template: accessibility-auditor
    triggers:
      pull_request:
        - opened
        - synchronize
    config:
      # WCAG conformance level: A, AA, AAA
      wcag_level: AA

      # Include/exclude patterns
      include_patterns:
        - "src/components/**/*.tsx"
        - "src/pages/**/*.tsx"

      # Severity threshold: critical, serious, moderate, minor
      min_severity: serious

      # Run full page scans vs component-only
      full_page_scan: true

WCAG Checks Performed

• 1.1.1 Non-text Content (images, icons)
• 1.3.1 Info and Relationships (headings, lists)
• 1.4.3 Contrast (Minimum)
• 2.1.1 Keyboard accessibility
• 2.4.4 Link Purpose
• 4.1.2 Name, Role, Value

Example Output

The agent posts comments like:

⚠️ WCAG 2.1 Level AA Violation

**Issue:** Image missing alt text
**Location:** src/components/Hero.tsx:24
**WCAG:** 1.1.1 Non-text Content

Add an alt attribute describing the image content:
<img src={hero} alt="Welcome banner showing product features" />