Design & UI Validation

Accessibility Audit

Automated WCAG 2.1 AA compliance scanning of your live DOM. Identify and triage accessibility violations before they become legal liabilities.

Overview

WCAG 2.1 AA Compliance Scanning

Accessibility is not optional. Web Content Accessibility Guidelines (WCAG) 2.1 AA compliance is a legal requirement in many jurisdictions and a core quality metric for any professional web application. The Accessibility Audit panel scans your live DOM by sending commands to the Vispane proxy bridge, which runs the audit on the live rendered page and returns structured, actionable results.

  • Live DOM Scanning: Audits the rendered DOM as it actually appears to users, not just the static HTML source — catching dynamically injected accessibility issues.
  • Severity Triage: Issues are sorted into three severity levels: Error (must fix, legal risk), Warning (should fix, best practice), and Info (nice to have).
  • Specific Violation Types Detected:
    • Images missing alt text attributes.
    • Form inputs missing associated <label> elements.
    • Interactive elements (buttons, links) missing accessible names.
    • Missing lang attribute on the root <html> element.
    • Insufficient color contrast ratios (pairs with the Contrast Checker tool).
    • Missing ARIA roles and landmark structure (main, nav, footer).
  • Issue Count Summary: A summary badge shows total Error, Warning, and Info counts at a glance, giving you an instant overall accessibility health score.
Prioritization Guide

What to Fix First

🚨
Fix all Errors before launch Error-level violations (missing alt text, unlabeled form fields, empty button names) are the violations most likely to be cited in an ADA lawsuit or WCAG audit. They also have the largest negative impact on screen reader users.
💡
Pair with CSS Injector for focus ring testing Enable the "Show focus rings" preset in the CSS Injector, then tab through your UI. Any interactive element where focus is not clearly visible will be immediately obvious — this addresses WCAG 2.4.7 (Focus Visible).
💡
Re-scan after every dynamic state change Accessibility issues often hide in modals, dropdowns, and conditional UI that only appears after interactions. Open each modal and dynamic component, then re-run the audit to catch violations that only exist in those states.