🕵️‍♂️ AI Web Accessibility Auditor (WCAG 2.2)

Automate manual accessibility testing with Vision AI. While traditional scanners only read code, this Agent looks at your website to find visual contrast issues, keyboard focus barriers, and layout shifts that code-only tools miss.

🚀 Why Use This Auditor?

• Beyond the Code: Detects issues like missing focus indicators and poor color contrast by "seeing" the page.
• WCAG 2.2 Compliance: Audits against the latest standards, including Target Size (2.5.5) and Focus Visible (2.4.7).
• Multi-Modal Analysis: Combines the HTML DOM, ARIA Snapshot, and Visual Screenshots for a high-precision audit.
• Developer Ready: Outputs structured JSON designed to be plugged directly into Jira, GitHub, or custom dashboards.

🛠 How It Works

The Auditor performs a Triple-Check on every URL:

1. Semantic Check: Analyzes the HTML for proper heading hierarchies and landmarks.
2. ARIA Inspection: Evaluates the accessibility tree to ensure screen reader compatibility.
3. Visual Verification: Uses AI Vision to verify that what the user sees matches the accessibility intent in the code.

📥 Input

The Agent is easy to configure via the Apify Console:

📤 Output Example

Every run generates a detailed dataset. Each issue includes a visual_confirmation which explains exactly what the AI saw in the screenshot.

{
  "url": "https://example.com/",
  "title": "Example Page",
  "auditReport": [
    {
      "severity": "Critical",
      "issue": "Keyboard focus indicator is not visible.",
      "element": "<button>Try Again</button>",
      "wcag_rule": "2.4.7 Focus Visible",
      "recommendation": "Ensure a visible focus style is applied on interactive elements when focused.",
      "visual_confirmation": "In the screenshot, the button lacks a visible outline during the tab-sequence."
    },
    {
      "severity": "Moderate",
      "issue": "Text contrast does not meet standards.",
      "element": "Main layout text",
      "wcag_rule": "1.4.3 Contrast (Minimum)",
      "recommendation": "Ensure text color contrasts at least 4.5:1 against the background.",
      "visual_confirmation": "Text appears low contrast against the cyan background in the image."
    }
  ],
  "scrapedAt": "2026-01-01T12:00:00.000Z"
}

💡 Usage Tips

• Start Small: Use basic vision mode for broad crawls and enhanced for deep-dives into critical conversion pages (Checkout, Sign-up).
• Token Efficiency: The Agent automatically strips unnecessary tags (scripts, styles) to keep your AI costs low while maintaining full context for the audit.
• Local Testing: Running this on your local machine? Ensure your local image server is running to allow the AI to fetch screenshots for analysis.