Accessibility Auditor

Accessibility Auditor & WCAG 2.2 Compliance Engine

An enterprise-grade, dual-engine Web Accessibility (WCAG 2.1 & 2.2 Levels A/AA/AAA), European Accessibility Act (EAA), US ADA Title II/III, and Section 508 Compliance Auditor with XML Sitemap auto-expansion for BrowserMesh.

Audits web pages for automated accessibility barriers, evaluates live computed color contrast ratios (4.5:1 / 3:1), validates WCAG 2.2 pointer target dimensions (24×24px) with official W3C spacing exceptions, detects sticky header focus obstruction (SC 2.4.11 / Failure F110), flags anti-paste cognitive authentication blocks (SC 3.3.8 / Failure F109), inspects semantic landmarks (including HTML5 <search>), diagnoses heading structures, audits form labels and personal data autocomplete attributes, verifies keyboard tab order, and unpacks XML Sitemaps to audit entire web estates in parallel.

The modern cloud-native alternative to Deque axe DevTools Pro ($400/yr), Siteimprove, Level Access, Google Lighthouse CLI, and manual WAVE audits.

🤝 Perfect Companion Pairing with Image SEO Auditor

Accessibility Auditor is designed to pair seamlessly with Image SEO Auditor (image-seo-auditor):

• image-seo-auditor: Specializes in visual media optimization — alt text quality and stubs, modern formats (AVIF/WebP), responsive <picture> markup, Largest Contentful Paint (LCP) hero lazy-loading anti-patterns, Cumulative Layout Shift (CLS) dimensions, and Google Image Sitemaps.
• accessibility-auditor: Covers the entire DOM accessibility surface — computed text and UI color contrast, form controls and anti-paste barriers, keyboard navigation and skip links, target sizing, sticky focus obstruction, semantic landmarks, heading trees, ARIA 1.2/1.3 validation, and EAA legal compliance flags.

Together, these companion plugins provide 100% automated coverage of modern web accessibility and visual search optimization.

🎯 Target Audience & Industry Solutions

• Compliance Officers & General Counsel: Ensure digital storefronts, portals, and booking systems comply with the European Accessibility Act (Directive 2019/882 / EN 301 549, enforceable June 28, 2025/2026) and US ADA Title II & Title III. Protect organizations against civil fines up to €100,000+ and federal digital accessibility lawsuits (>4,000 filed annually).
• Technical SEO Directors & Webmasters: Enhance Google Core Web Vitals, organic crawlability, and search user experience. Google rewards accessible, semantically structured websites with higher user engagement, reduced bounce rates, and cleaner landmark indexing.
• Front-End & UI/UX Engineers (Next.js, React, Vue, Svelte, Shopify, WordPress): Catch accessibility bugs before they reach production. Automatically detect positive tabindex traps, missing form labels, sticky headers obscuring focus, broken ARIA ID references, and clickable div elements lacking keyboard support.
• Accessibility Specialists & QA Leads: Eliminate manual regression testing across large web applications. Crawl complete XML Sitemaps to benchmark hundreds of landing pages in minutes with calibrated 0–100 health scores.

🚀 Key Features

1. 2026 Legal Compliance Engine (EAA & ADA Title II/III)

• European Accessibility Act (EAA) Benchmark: Mapped to EN 301 549 and WCAG 2.1 / 2.2 Level AA. Yields an explicit eaaReady compliance flag indicating whether the page satisfies mandatory EU digital storefront requirements.
• US ADA Title II & Title III Readiness: Aligned with the DOJ Title II Final Rule codifying WCAG 2.1 Level AA for state/local public entities and prevailing federal court precedents for commercial accommodations.

2. WCAG 2.2 New Success Criteria & Edge Case Detection

• Target Size (Minimum) (SC 2.5.8 — Level AA): Verifies interactive elements meet the minimum 24×24 CSS pixel footprint. Evaluates the 4 official W3C exceptions before flagging:
  1. Spacing Exception: Passes if a 24px diameter circle centered on the target does not intersect another target or its circle.
  2. Inline Exception: Hyperlinks constrained within a sentence or paragraph are exempt.
  3. User Agent Exception: Unstyled native browser form controls.
  4. Essential Exception: Presentation legally or technically required.
• Focus Not Obscured (Minimum) (SC 2.4.11 / Failure F110 — Level AA): Audits whether sticky/fixed headers, footers, or cookie consent banners completely cover focused elements during keyboard navigation. Checks for CSS scroll-padding-top mitigation (Technique C43) and warns about reverse-tabbing (Shift+Tab) focus traps.
• Accessible Authentication (SC 3.3.8 / Failure F109 — Level AA): Prohibits cognitive function tests without assistive mechanisms. Automatically detects and flags inputs blocking clipboard pasting (onpaste="return false;" or e.preventDefault()) and segmented OTP single-character input chains that break password managers.
• Consistent Help (SC 3.2.6 — Level A): Audits help mechanisms across pages to ensure consistent relative placement.

3. Mathematical Color Contrast Engine (W3C Relative Luminance)

• Computed Contrast Ratios: Evaluates computed text and background colors across the live rendered DOM using W3C sRGB gamma linearization ($C \le 0.04045 \rightarrow C/12.92$; else $((C+0.055)/1.055)^{2.4}$).
• Alpha Compositing: Walks parent DOM ancestor trees to resolve transparent alpha layers (rgba(), hsla(), oklch()) over solid background surfaces.
• Normal vs. Large Text Classification: Accurately differentiates normal text (requires 4.5:1 AA / 7.0:1 AAA) from large text ($\ge 24\text{px}$ or $\ge 18.66\text{px}$ bold, requiring 3.0:1 AA / 4.5:1 AAA).
• Non-Text UI Contrast (SC 1.4.11): Audits interactive control boundaries and focus rings against the 3.0:1 minimum threshold.

4. Semantic Landmarks & HTML5 <search> Outliner

• Modern Landmark Validation: Audits <main>, <header> (role="banner"), <nav> (role="navigation"), and <footer> (role="contentinfo"). Flags pages lacking <main> or containing multiple unlabelled <main> elements.
• HTML5 <search> Landmark: Native recognition of modern <search> elements. Flags pages with multiple search landmarks that lack unique accessible names (aria-label or aria-labelledby).

5. Headings Hierarchy Tree & Outline Linter

• Logical Structure: Constructs the complete H1–H6 heading outline. Flags missing <h1>, multiple conflicting <h1> tags outside distinct sectioning elements, empty headings (<h1></h1>), and skipped levels (e.g. <h2> directly to <h4>).

6. Forms, Labels & Autocomplete Purpose

• Programmatic Association: Verifies form controls (input, select, textarea) have explicit <label for="...">, wrapping <label>, aria-label, aria-labelledby, or title.
• Orphan Label Detection: Catches <label for="..."> tags pointing to nonexistent DOM IDs.
• Identify Input Purpose (SC 1.3.5): Verifies personal data fields (name, email, address, phone) declare valid autocomplete attributes to support automated assistive inputs.

7. Links, Buttons & Keyboard Navigation

• Discernible Names: Flags empty links (<a href="..."></a>) and icon-only buttons lacking accessible names.
• Vague Anchor Text: Warns against ambiguous link text ("click here", "read more", "learn more", "more", "here").
• Interactive Role Assignment: Flags div[onclick] or span[onclick] lacking role="button" or keyboard tabindex="0".
• Keyboard Traps & Tabindex: Flags positive tabindex (tabindex > 0) that breaks natural focus flow.
• Bypass Blocks (Skip Links): Verifies presence of skip navigation links to bypass repetitive header menus.

8. WAI-ARIA 1.2 & 1.3 Validation

• Role Verification: Validates all role declarations against permitted WAI-ARIA 1.2 and emerging 1.3 roles (comment, suggestion, mark).
• Required Attribute Check: Ensures required ARIA states exist (e.g. role="checkbox" requires aria-checked).
• Broken Reference Linter: Catches aria-labelledby, aria-describedby, and aria-controls pointing to missing DOM IDs.
• Duplicate ID Detection: Flags duplicate element IDs that break assistive tech document models.
• Focusable Element Protection: Flags aria-hidden="true" placed on active buttons, links, or inputs.

9. Calibrated 0–100 Health Scoring Engine & Severity Caps

• Weighted Deductions: Deducts points based on violation severity: Critical (-15), Serious (-8), Moderate (-4), Minor (-2) with safety caps per category.
• Hard Severity Ceiling Caps:
  • $\ge 3$ Critical Violations: Score capped at $\le 49$ (Grade F).
  • Any Critical Violation (missing lang, missing form label, anti-paste block): Score capped at $\le 69$ (Grade D).
  • Any Serious Violation (failing contrast, target size < 24px, focus obscured): Score capped at $\le 79$ (Grade C).
  • Any Moderate Violation (skipped heading, duplicate ID, vague link): Score capped at $\le 89$ (Grade B).
  • Grade A+ (95–100): Strictly reserved for sites meeting all WCAG 2.2 AA criteria and ready for AAA.

📊 Feature Comparison Matrix

⚙️ How to Configure Your Job

Example Input

{
  "urls": "https://example.com/sitemap.xml",
  "wcagLevel": "AA",
  "computeContrast": true,
  "checkTargetSize": true,
  "maxSitemapPages": 50,
  "concurrency": 5,
  "timeout": 30
}

📋 Standardized 15-Field Output Contract

Every yielded record strictly adheres to this 15-field contract:

📦 Production Sample JSON Output

{
  "url": "https://example.com",
  "pageUrl": "https://example.com/",
  "domain": "example.com",
  "statusCode": 200,
  "status": "completed",
  "title": "Example Domain",
  "score": 92,
  "grade": "A",
  "wcagCompliance": {
    "levelA": true,
    "levelAA": true,
    "levelAAA": false,
    "status": "compliant",
    "eaaReady": true
  },
  "violationsCount": 1,
  "principles": {
    "perceivable": { "score": 92, "violationsCount": 1, "status": "pass" },
    "operable": { "score": 100, "violationsCount": 0, "status": "pass" },
    "understandable": { "score": 100, "violationsCount": 0, "status": "pass" },
    "robust": { "score": 100, "violationsCount": 0, "status": "pass" }
  },
  "categories": {
    "contrast": { "score": 100, "violationsCount": 0, "status": "pass" },
    "forms": { "score": 100, "violationsCount": 0, "status": "pass" },
    "navigation": { "score": 100, "violationsCount": 0, "status": "pass" },
    "landmarks": { "score": 92, "violationsCount": 1, "status": "pass" },
    "headings": { "score": 100, "violationsCount": 0, "status": "pass" },
    "linksAndButtons": { "score": 100, "violationsCount": 0, "status": "pass" },
    "media": { "score": 100, "violationsCount": 0, "status": "pass" },
    "aria": { "score": 100, "violationsCount": 0, "status": "pass" }
  },
  "issues": [
    {
      "id": "landmark-contentinfo-1",
      "rule": "landmark-contentinfo",
      "wcagSc": "1.3.1 Info and Relationships",
      "level": "A",
      "severity": "minor",
      "message": "Page has no <footer> or role=\"contentinfo\" landmark.",
      "selector": "body",
      "htmlSnippet": "<body>...",
      "impact": "minor",
      "helpUrl": "https://www.w3.org/WAI/WCAG22/quickref/#info-and-relationships"
    }
  ],
  "passedChecks": [
    "html-has-lang",
    "html-lang-valid",
    "document-title",
    "meta-viewport-zoom",
    "landmark-main-missing",
    "heading-h1-missing",
    "heading-empty",
    "heading-order-skipped"
  ],
  "recommendations": {
    "highPriority": [
      "No critical accessibility barriers detected. Maintain existing standards."
    ],
    "mediumPriority": [
      "All moderate usability checks passed cleanly."
    ],
    "lowPriority": [
      "Page has no <footer> or role=\"contentinfo\" landmark. (Rule: landmark-contentinfo, WCAG: 1.3.1 Info and Relationships)"
    ]
  }
}

🛠️ Actionable Remediation Guide for Developers

1. Fix Missing Form Labels (WCAG 3.3.2 — Critical): Ensure every form control has an explicit <label for="id"> or wrapping <label>. For search boxes and icon buttons, supply an aria-label="Search".
2. Allow Pasting on Password Fields (WCAG 2.2 SC 3.3.8 / Failure F109 — Critical): Remove onpaste="return false;" and e.preventDefault() handlers on password, login, and OTP fields. Pasting is essential for password managers and assistive tech users.
3. Resolve Low Color Contrast (WCAG 1.4.3 / 1.4.11 — Serious): Increase text contrast to at least 4.5:1 for body copy and 3.0:1 for text $\ge 24\text{px}$ or interactive button borders.
4. Enlarge Pointer Targets (WCAG 2.2 SC 2.5.8 — Serious): Ensure buttons and links have a minimum footprint of 24×24 CSS pixels. For icon buttons, use padding: 6px or min-width: 24px; min-height: 24px.
5. Prevent Sticky Header Focus Obstruction (WCAG 2.2 SC 2.4.11 / Failure F110 — Serious): When fixed or sticky navigation headers exist, configure CSS scroll-padding-top: 80px on html so tabbing into elements does not scroll them beneath the sticky header.
6. Provide Skip Navigation Links (WCAG 2.4.1 — Moderate): Add <a href="#main" class="skip-link">Skip to main content</a> as the first focusable element inside <body>.
7. Ensure Logical Heading Outlines (WCAG 1.3.1 — Moderate): Never skip heading levels (e.g. going from <h2> directly to <h4>). Nest headings hierarchically.

❓ Frequently Asked Questions (FAQ)

1. What is the European Accessibility Act (EAA), and when does it take effect?

The European Accessibility Act (Directive 2019/882) is legally enforceable across all 27 EU member states starting June 28, 2025/2026. It mandates that e-commerce, banking, booking, and consumer digital services adhere to EN 301 549 (WCAG 2.1 / 2.2 Level AA). Non-compliance can trigger civil penalties exceeding €100,000+ or business suspension.

2. What are the key new rules in WCAG 2.2?

WCAG 2.2 introduced 9 new Success Criteria, notably:

• SC 2.5.8 Target Size (Minimum): 24×24px pointer targets with spacing exceptions.
• SC 2.4.11 Focus Not Obscured (Minimum): Focused controls must not be hidden behind sticky headers.
• SC 3.3.8 Accessible Authentication: Blocking copy-paste on password or verification fields is prohibited.
• 4.1.1 Parsing was removed because modern browsers parse HTML deterministically.

3. How does the 24×24px Target Size spacing exception work?

Under WCAG 2.2 SC 2.5.8, if a button measures less than 24×24px (e.g. 16×16px), it passes if a 24px diameter circle centered on the target does not intersect another target or its circle. This ensures users do not accidentally trigger adjacent controls.

4. Why does the auditor flag onpaste="return false;"?

Blocking paste violates WCAG 2.2 SC 3.3.8 (Failure F109). Users with cognitive impairments or motor limitations rely on password managers and clipboard pasting to enter complex passwords and verification codes.

5. How does this plugin pair with Image SEO Auditor?

image-seo-auditor handles visual media (image alt text quality, WebP/AVIF adoption, LCP hero lazy-loading, CLS dimensions, and Google Image Sitemaps). accessibility-auditor evaluates the full DOM accessibility spectrum (contrast, forms, target sizes, focus obscured, keyboard, landmarks, ARIA, and EAA legal readiness).

6. Can I audit an entire website using an XML Sitemap?

Yes! Enter your XML sitemap URL (e.g. https://example.com/sitemap.xml or .xml.gz). The plugin automatically decompresses gzipped sitemaps, follows sitemap indexes, and audits up to maxSitemapPages concurrently.

7. How does the 0–100 scoring engine prevent score inflation?

The scoring engine applies Hard Severity Ceiling Caps. Even if a site passes 40 rules, if it has a single critical barrier (e.g. missing form labels or anti-paste blocking), its score is capped at $\le 69$ (Grade D). Multiple critical barriers cap the score at $\le 49$ (Grade F).

8. Does this plugin run headless browser rendering or fast HTTP?

It uses a Dual-Engine Architecture. It parses static HTML via Cheerio in 0.2 seconds and automatically escalates to a live Playwright Chromium browser to evaluate computed color contrast, target bounding boxes (24×24px), and sticky header focus obstruction.