frontend-accessibility-validator

name	Frontend Accessibility Validator
slug	frontend-accessibility-validator
description	Validate WCAG 2.2 compliance (A/AA/AAA) with ARIA, color contrast, keyboard navigation, screen readers, and automated testing via axe-core/Pa11y.
capabilities	["WCAG 2.2 compliance validation (Level A, AA, AAA with 9 new success criteria)","ARIA attributes and roles verification (landmarks, widgets, live regions)","Color contrast analysis (4.5:1 for AA, 7:1 for AAA)","Keyboard navigation testing (focus management, skip links, tab order)","Screen reader compatibility (NVDA, JAWS, VoiceOver, ORCA)","Semantic HTML validation (proper heading hierarchy, form labels)","Focus indicator visibility and contrast (WCAG 2.4.11, 2.4.13)","Automated testing integration (axe-core, Pa11y, Lighthouse)","Alternative text and image accessibility","Form accessibility (labels, fieldsets, error messages, autocomplete)",{"Touch target sizing (WCAG 2.5.8":"24×24 CSS pixels minimum)"},"Accessible authentication (WCAG 3.3.7, 3.3.8)"]
inputs	{"web_pages":{"type":"array","description":"URLs or HTML files to validate","required":true},"wcag_level":{"type":"string","description":"Target WCAG level (A, AA, AAA)","required":false},"automated_tools":{"type":"array","description":"Tools to use (axe-core, Pa11y, Lighthouse)","required":false},"manual_checks":{"type":"boolean","description":"Include manual testing checklist","required":false},"screen_readers":{"type":"array","description":"Screen readers to test (NVDA, JAWS, VoiceOver)","required":false}}
outputs	{"wcag_compliance_report":{"type":"object","description":"WCAG 2.2 compliance status by success criterion"},"violations":{"type":"array","description":"List of accessibility violations with severity and remediation"},"automated_test_results":{"type":"object","description":"Results from axe-core, Pa11y, Lighthouse (% of issues detected)"},"manual_test_checklist":{"type":"array","description":"Manual testing items (keyboard nav, screen reader, contrast)"},"aria_issues":{"type":"array","description":"ARIA attribute and role violations"},"color_contrast_report":{"type":"object","description":"Contrast ratios for text, focus indicators, UI components"}}
keywords	["accessibility","a11y","wcag","wcag-2.2","aria","screen-reader","keyboard-navigation","color-contrast","semantic-html","axe-core","pa11y","lighthouse","ada-compliance","section-508"]
version	1.0.0
owner	cognitive-toolworks
license	Apache-2.0
security	{"secrets":"N/A","compliance":"WCAG 2.2 (Oct 2023), ADA, Section 508, ARIA 1.3, EN 301 549"}
links	[{"title":"WCAG 2.2 - What's New","url":"https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/","accessed":"2025-10-26"},{"title":"ARIA 1.3 Specification","url":"https://w3c.github.io/aria/","accessed":"2025-10-26"},{"title":"axe-core GitHub","url":"https://github.com/dequelabs/axe-core","accessed":"2025-10-26"},{"title":"Pa11y Documentation","url":"https://pa11y.org/","accessed":"2025-10-26"},{"title":"WebAIM: Contrast and Color Accessibility","url":"https://webaim.org/articles/contrast/","accessed":"2025-10-26"}]

Purpose & When-To-Use

Purpose: Validate web application accessibility against WCAG 2.2 standards (released October 2023) using automated testing (axe-core, Pa11y, Lighthouse) and manual verification for keyboard navigation, screen reader compatibility, color contrast (4.5:1 for AA, 7:1 for AAA), ARIA attributes, semantic HTML, and the 9 new WCAG 2.2 success criteria (focus visibility, target sizing, accessible authentication, redundant entry).

When to Use:

• You need to validate WCAG 2.2 compliance for legal requirements (ADA, Section 508, EN 301 549).
• You're implementing accessible components (forms, modals, carousels, data tables) and need validation.
• You require automated accessibility testing in CI/CD pipelines (axe-core, Pa11y-ci).
• You're auditing existing sites for accessibility violations before remediation.
• You need color contrast analysis to meet 4.5:1 (AA) or 7:1 (AAA) ratios.
• You're validating keyboard navigation (tab order, focus indicators, skip links).
• You're ensuring screen reader compatibility (NVDA, JAWS, VoiceOver, ORCA).
• You're implementing WCAG 2.2 new criteria (Focus Not Obscured, Target Size, Accessible Authentication).

Complements:

• frontend-designsystem-validator: Validates design tokens, component consistency; this validates runtime accessibility.
• testing-accessibility-automation: Integrates axe-core/Pa11y into CI/CD; this provides audit reports and recommendations.
• frontend-performance-optimizer: Validates Core Web Vitals; this validates a11y (both are Lighthouse metrics).

Pre-Checks

Mandatory Inputs:

• web_pages: At least one URL or HTML file to validate.

Validation Steps:

1. Compute NOW_ET using NIST time.gov semantics (America/New_York, ISO-8601) for timestamp anchoring.
2. Check web_pages accessibility: Verify URLs return 200 OK or HTML files exist.
3. Validate wcag_level: If specified, must be "A", "AA", or "AAA". Default: AA (most common legal requirement).
4. Check automated_tools availability: If specified, verify axe-core, Pa11y, or Lighthouse are installed.
5. Abort if:
   • Zero web pages provided.
   • URLs return 404 or HTML files don't exist.
   • wcag_level is invalid (not A, AA, or AAA).

Procedure

T1: Quick Automated Accessibility Scan (≤2k tokens, 80% use case)

Goal: Run automated accessibility testing on a single page using axe-core to detect ~57% of issues with zero false positives.

Steps:

1. Select primary page: Choose the most critical page (e.g., homepage, checkout form).
2. Run axe-core scan:

   npx axe-core <URL>
   # Or use browser extension: Axe DevTools in Chrome/Firefox
   

3. Analyze results:
   • Violations: Issues that fail WCAG (e.g., missing alt text, insufficient contrast).
   • Incomplete: Items needing manual review (e.g., "Ensure this link text is descriptive").
   • Passes: Successfully validated checks.
4. Categorize by WCAG level:
   • Level A (critical): Missing form labels, keyboard traps, non-text contrast.
   • Level AA (standard): Color contrast <4.5:1, missing focus indicators.
   • Level AAA (enhanced): Color contrast <7:1, enhanced focus appearance.
5. Generate summary:
   • Total violations: X
   • Critical (Level A): Y
   • Needs Review (Incomplete): Z
   • Automated detection rate: ~57% (axe-core detects 57% of all WCAG issues)
6. Output: Violation list with WCAG references, severity (critical/serious/moderate/minor), and remediation steps.

Token Budget: ≤2k tokens (single page, automated scan only).

T2: Comprehensive WCAG 2.2 Compliance Audit (≤6k tokens)

Goal: Validate multiple pages against WCAG 2.2 Level AA with automated testing (axe-core + Pa11y) and manual checks for keyboard navigation, screen reader, and new WCAG 2.2 criteria.

Steps:

1. Run multi-tool automated scan:
   • axe-core: npx @axe-core/cli <URL> (57% detection, zero false positives).
   • Pa11y: npx pa11y <URL> (uses axe-core or HTML_CodeSniffer engine).
   • Lighthouse: lighthouse <URL> --only-categories=accessibility (uses axe-core, provides 0-100 score).
   • Combined detection: axe + Pa11y catch ~35% of issues together (not 57% + 57% due to overlap).
2. Validate WCAG 2.2 new success criteria (9 new):
   • 2.4.11 Focus Not Obscured (Minimum) - AA: When element receives focus, at least part is visible (not hidden by sticky headers, modals).
   • 2.4.12 Focus Not Obscured (Enhanced) - AAA: Focus is never fully hidden.
   • 2.4.13 Focus Appearance - AAA: Focus indicator ≥3:1 contrast against adjacent colors, size ≥ perimeter of focused element.
   • 2.5.7 Dragging Movements - AA: Provide alternatives to drag-and-drop (double-tap, buttons).
   • 2.5.8 Target Size (Minimum) - AA: Touch targets ≥24×24 CSS pixels (except inline text links, controlled by user agent).
   • 3.2.6 Consistent Help - A: Help mechanisms (contact, chat) in consistent order across pages.
   • 3.3.7 Redundant Entry - A: Auto-populate previously entered data (e.g., shipping = billing).
   • 3.3.8 Accessible Authentication (Minimum) - AA: Don't require cognitive function tests (CAPTCHA alternatives, SMS code paste, password managers).
   • 3.3.9 Accessible Authentication (Enhanced) - AAA: No cognitive tests at all (biometric, token-based).
3. Manual keyboard navigation testing:
   • Tab order: Logical, follows visual flow, no keyboard traps.
   • Focus indicators: Visible (not outline: 0), ≥3:1 contrast, size adequate.
   • Skip links: "Skip to main content" link present, functional.
   • Modal dialogs: Focus trapped, Esc closes, focus returns to trigger on close.
   • Dropdown menus: Arrow keys navigate, Enter/Space selects, Esc closes.
4. Color contrast validation:
   • Normal text: ≥4.5:1 (AA), ≥7:1 (AAA).
   • Large text (18pt or 14pt bold): ≥3:1 (AA), ≥4.5:1 (AAA).
   • UI components (buttons, form borders): ≥3:1 (AA).
   • Focus indicators: ≥3:1 against adjacent colors (WCAG 2.4.13).
   • Tools: WebAIM Contrast Checker, Chrome DevTools Contrast Ratio.
5. ARIA validation:
   • Landmarks: <main>, <nav>, <aside>, <header>, <footer> or role="main", role="navigation".
   • Widget roles: role="button", role="tab", role="dialog" with required states (aria-expanded, aria-selected).
   • Live regions: aria-live="polite" for status messages, aria-live="assertive" for errors.
   • Labels: aria-label or aria-labelledby for all interactive elements without visible labels.
   • First rule of ARIA: Use semantic HTML first (<button> instead of <div role="button">).
6. Semantic HTML validation:
   • Heading hierarchy: No skipped levels (h1 → h2 → h3, not h1 → h3).
   • Form labels: Every <input>, <textarea>, <select> has <label for="id"> or aria-label.
   • Alt text: All <img> have alt attribute (empty alt="" for decorative images).
   • Tables: <th scope="col|row"> for data tables, <caption> for table description.
7. Screen reader testing (sample):
   • NVDA (Windows): Test 1 critical page (e.g., checkout form).
   • VoiceOver (macOS): Test landmark navigation (Cmd+Opt+U for rotor).
   • Mobile screen readers: TalkBack (Android), VoiceOver (iOS) for touch target sizing.
8. Generate comprehensive report:
   • WCAG 2.2 compliance: X% (by level A, AA, AAA).
   • Violations by severity: Critical (A), Serious (AA), Moderate (AAA).
   • Automated findings: axe (57%), Pa11y (35% combined), Lighthouse score (0-100).
   • Manual findings: Keyboard nav issues, screen reader issues, contrast failures.
   • Remediation plan: Priority 1 (Level A), Priority 2 (AA), Priority 3 (AAA).
9. Output:
   • WCAG 2.2 compliance report (by success criterion: pass/fail/needs review).
   • Violation list with WCAG reference, severity, impact, remediation.
   • Color contrast report (all text/component pairs with ratios).
   • ARIA issues (missing labels, incorrect roles, invalid states).
   • Manual test checklist (keyboard, screen reader, touch targets).

Token Budget: ≤6k tokens (multi-page, multi-tool, manual checks, WCAG 2.2 new criteria).

T3: Enterprise Accessibility Audit with Remediation Plan (≤12k tokens)

Goal: Perform a full enterprise accessibility audit across multiple pages/templates with automated testing in CI/CD, manual testing across screen readers/browsers, and a prioritized remediation roadmap.

Steps:

1. Inventory pages and templates:
   • Identify page types: Homepage, product listing, product detail, checkout, account, search results.
   • Map WCAG success criteria to pages (e.g., 3.3.7 Redundant Entry applies to multi-step forms).
2. Set up automated CI/CD testing:
   • axe-core in Jest/Cypress:

     import { axe, toHaveNoViolations } from 'jest-axe';
     expect.extend(toHaveNoViolations);
     it('should have no accessibility violations', async () => {
       const { container } = render(<MyComponent />);
       const results = await axe(container);
       expect(results).toHaveNoViolations();
     });
     

   • Pa11y-ci in CI pipeline:

     {
       "urls": ["http://localhost:3000", "http://localhost:3000/products"],
       "defaults": {"timeout": 5000, "wait": 500, "runners": ["axe"]},
       "threshold": 0
     }
     

   • Lighthouse CI:

     lhci autorun --collect.url=http://localhost:3000 --assert.assertions.accessibility=0.95
     

3. Comprehensive manual testing:
   • Keyboard navigation: Test all interactive elements on all page types.
   • Screen readers: NVDA (Windows), JAWS (Windows enterprise), VoiceOver (macOS/iOS), ORCA (Linux), TalkBack (Android).
   • Browser matrix: Chrome, Firefox, Safari, Edge (all with latest screen readers).
   • Zoom testing: 200% zoom (WCAG 1.4.4 Resize Text), 400% zoom (WCAG 1.4.10 Reflow).
   • Mobile: Touch target sizing (≥24×24 CSS pixels), orientation (portrait/landscape).
4. WCAG 2.2 full compliance matrix:
   • Create spreadsheet with all success criteria (78 total: 30 Level A, 24 Level AA, 24 Level AAA).
   • Mark status for each: Pass, Fail, Not Applicable, Needs Review.
   • Include evidence: Automated test pass, manual test pass, screenshot, code snippet.
5. Advanced ARIA patterns:
   • Disclosure widgets (accordions): aria-expanded toggles, focus management.
   • Tab panels: role="tablist", aria-selected, arrow key navigation.
   • Carousels: aria-live for auto-advance, pause button, keyboard nav.
   • Data tables: aria-sort, aria-rowcount, aria-colcount for virtualized tables.
   • Toast notifications: aria-live="polite", auto-dismiss with manual dismiss option.
6. Color and visual design validation:
   • Contrast analysis: Scan all color combinations (text/background, button/background, link/background).
   • Non-color information: Ensure error states not indicated by color alone (use icons, text).
   • Focus indicators: Test on all backgrounds (light, dark, images) for 3:1 contrast.
7. Form accessibility deep dive:
   • Labels: Explicit <label for> or aria-labelledby, not placeholder-only.
   • Fieldsets: <fieldset> + <legend> for radio/checkbox groups.
   • Error messages: aria-invalid="true", aria-describedby linking to error, inline + summary.
   • Required fields: required attribute + aria-required="true" + visual indicator (not color only).
   • Autocomplete: autocomplete attributes for user data (name, email, address).
8. Document accessibility (if applicable):
   • PDFs: Tagged PDFs, logical reading order, alt text for images.
   • Office docs: Proper heading structure, alt text, accessible tables.
   • ARIA in PDFs: Use PDF/UA (ISO 14289) standard.
9. Assistive technology compatibility matrix:
   • Test combinations: NVDA + Chrome, JAWS + Edge, VoiceOver + Safari, ORCA + Firefox.
   • Document known issues (e.g., "JAWS 2024 doesn't announce aria-describedby on Safari").
10. Generate remediation roadmap:
    • Phase 1 (0-30 days): Level A violations (blocking, highest priority).
    • Phase 2 (30-60 days): Level AA violations (legal requirement for most jurisdictions).
    • Phase 3 (60-90 days): Level AAA violations (enhanced accessibility, competitive advantage).
    • Quick wins: Low-effort, high-impact fixes (missing alt text, form labels, heading order).
    • Complex fixes: High-effort items (keyboard trap refactor, custom widget ARIA).
11. Ongoing monitoring:
    • Automated tests run on every PR (axe-core, Pa11y-ci).
    • Monthly accessibility audits (sample of key pages).
    • Annual comprehensive audit (all pages, all screen readers).
12. Output:
    • WCAG 2.2 full compliance matrix (78 success criteria × pages).
    • Violation inventory by severity, page, and WCAG criterion.
    • Automated test integration guide (CI/CD setup, failure thresholds).
    • Manual testing guide (keyboard, screen reader, browser matrix).
    • Remediation roadmap (3 phases, effort estimates, owner assignments).
    • Accessibility statement (public-facing compliance documentation).

Token Budget: ≤12k tokens (enterprise audit, CI/CD setup, full manual testing, remediation roadmap).

Decision Rules

Ambiguity Resolution:

1. If wcag_level not specified:
   • Default to Level AA (industry standard, legal requirement in US/EU).
   • Emit note: "Validating against WCAG 2.2 Level AA. Use Level AAA for enhanced accessibility."
2. If automated_tools not specified:
   • Default to axe-core (highest detection rate 57%, zero false positives).
   • Emit note: "Using axe-core. Consider Pa11y for alternative engine or Lighthouse for scoring."
3. If manual_checks not specified:
   • Default to true for T2/T3 (automated tools only catch 35-57% of issues).
   • Emit note: "Manual testing required. Automated tools detect ~57% of WCAG issues."
4. If color contrast is borderline (e.g., 4.49:1):
   • Mark as fail (be conservative; 4.5:1 is minimum, not target).
   • Suggest: "Increase to 4.6:1 or higher for safety margin."
5. If aria-label conflicts with visible text:
   • Prefer visible text + aria-labelledby over aria-label (WCAG 2.5.3 Label in Name).
   • Emit warning: "aria-label 'Submit Form' conflicts with visible 'Send'. Use 'Send' in aria-label."

Stop Conditions:

• Zero pages accessible: All URLs return 404 or HTML files don't exist → abort with error.
• WCAG level invalid: User specifies "Level B" → abort with error: "WCAG levels are A, AA, or AAA."
• Critical Level A failures: If >10 Level A violations → emit warning: "Site is not minimally accessible. Prioritize Level A fixes immediately."

Thresholds:

• Color contrast:
  • AA normal text: ≥4.5:1
  • AA large text: ≥3:1
  • AAA normal text: ≥7:1
  • AAA large text: ≥4.5:1
  • UI components/focus: ≥3:1
• Touch targets: ≥24×24 CSS pixels (WCAG 2.5.8), ≥44×44 pixels recommended (iOS HIG, Material Design).
• Focus indicator: ≥3:1 contrast, ≥2px outline or equivalent area (WCAG 2.4.13 AAA).
• Lighthouse score: <90 = needs improvement, 90-94 = good, 95-100 = excellent.

Output Contract

Required Fields:

{
  wcag_compliance_report: {
    level: "A" | "AA" | "AAA";
    overall_status: "pass" | "fail" | "needs_review";
    success_criteria: Array<{
      id: string;              // 1.1.1, 2.4.11, 3.3.7, etc.
      name: string;            // Non-text Content, Focus Not Obscured, Redundant Entry
      level: "A" | "AA" | "AAA";
      status: "pass" | "fail" | "not_applicable" | "needs_review";
      automated: boolean;      // True if automated tools can detect
      evidence: string;        // "axe-core passed", "Manual test: keyboard nav OK"
      new_in_22: boolean;      // True for 9 new WCAG 2.2 criteria
    }>;
    compliance_percentage: {
      level_a: number;         // % of Level A criteria passing
      level_aa: number;
      level_aaa: number;
    };
  };
  violations: Array<{
    id: string;                // axe-rule-id or wcag-criterion
    wcag_criterion: string;    // 1.4.3 Contrast (Minimum)
    level: "A" | "AA" | "AAA";
    severity: "critical" | "serious" | "moderate" | "minor";
    impact: string;            // "Users with low vision cannot read text"
    element: string;           // CSS selector or HTML snippet
    remediation: string;       // "Increase contrast to 4.6:1 by darkening text"
    page_url: string;
  }>;
  automated_test_results: {
    axe_core: {
      violations: number;
      incomplete: number;      // Needs manual review
      passes: number;
      detection_rate: "~57%";  // axe detects 57% of WCAG issues
    };
    pa11y?: {
      errors: number;
      warnings: number;
      engine: "axe" | "htmlcs";
    };
    lighthouse?: {
      score: number;           // 0-100
      audits_passed: number;
      audits_failed: number;
    };
  };
  manual_test_checklist: Array<{
    category: "keyboard" | "screen_reader" | "color_contrast" | "aria" | "semantic_html" | "touch_targets";
    item: string;              // "Tab order is logical"
    status: "pass" | "fail" | "not_tested";
    notes?: string;
  }>;
  aria_issues: Array<{
    element: string;
    issue: string;             // "Missing aria-label on button"
    recommendation: string;    // "Add aria-label='Close dialog'"
  }>;
  color_contrast_report: {
    failures: Array<{
      foreground: string;      // #333333
      background: string;      // #CCCCCC
      ratio: number;           // 2.8
      required: number;        // 4.5 (for AA normal text)
      element: string;
      location: string;        // "Homepage, product title"
    }>;
    summary: {
      total_checks: number;
      failures: number;
      aa_compliant: boolean;
      aaa_compliant: boolean;
    };
  };
}

Optional Fields:

• screen_reader_results: Object with findings from NVDA, JAWS, VoiceOver testing.
• remediation_roadmap: Array of phases (Phase 1/2/3) with effort estimates and priorities.
• ci_cd_integration: Object with axe-core, Pa11y-ci, Lighthouse CI setup examples.
• accessibility_statement: Markdown template for public compliance statement.

Format: JSON for structured data, Markdown for remediation plan and manual checklist.

Examples

Example 1: E-commerce Checkout Accessibility Audit (T2)

Input:

web_pages:
  - "https://example.com/checkout"
wcag_level: "AA"
automated_tools: ["axe-core", "Pa11y"]
manual_checks: true

Output (T2 Summary):

WCAG 2.2 Level AA Compliance: 78% (45/58 success criteria passing)
Automated Tests:
  axe-core: 12 violations, 3 incomplete, 87 passes (57% detection rate)
  Pa11y: 15 errors, 8 warnings (using axe engine)
Manual Tests:
  Keyboard: ✅ Tab order logical, ⚠️ Focus indicator low contrast (2.2:1, need 3:1)
  Screen Reader (NVDA): ⚠️ Error messages not announced (missing aria-live)
Top Violations:
  1. Color Contrast (1.4.3, AA): 8 failures (text 3.1:1, need 4.5:1) - CRITICAL
  2. Form Labels (3.3.2, A): 3 inputs missing labels - CRITICAL
  3. Focus Visible (2.4.7, AA): Focus indicator contrast 2.2:1 (need 3:1) - SERIOUS
  4. Accessible Auth (3.3.8, AA): CAPTCHA has no alternative - SERIOUS (NEW in 2.2)
  5. Target Size (2.5.8, AA): "Edit" button 20×20px (need 24×24px) - MODERATE (NEW in 2.2)
Remediation Priority:
  Phase 1 (7 days): Fix Level A violations (form labels, keyboard traps)
  Phase 2 (14 days): Fix AA violations (contrast, focus indicators, CAPTCHA alternative)

Link to Full Example: See skills/frontend-accessibility-validator/examples/ecommerce-checkout-audit.txt

Example 2: WCAG 2.2 New Criteria Validation (T2 Snippet)

WCAG 2.2 New Success Criteria Status:

2.4.11 Focus Not Obscured (Minimum) - AA: ⚠️ FAIL
  Issue: Sticky header hides focused button when tabbing
  Fix: Adjust scroll position or reduce header height
2.5.8 Target Size (Minimum) - AA: ⚠️ FAIL
  Issue: Mobile menu icons 18×18px (need 24×24px)
  Fix: Increase touch targets to 24×24px minimum
3.3.7 Redundant Entry - A: ✅ PASS
  Evidence: Shipping address auto-fills to billing address
3.3.8 Accessible Authentication (Minimum) - AA: ⚠️ FAIL
  Issue: CAPTCHA with no alternative (audio, SMS, email)
  Fix: Add audio CAPTCHA or SMS verification option

Quality Gates

Token Budget Compliance:

• T1 output ≤2k tokens (single page, axe-core only).
• T2 output ≤6k tokens (multi-page, multi-tool, manual checks).
• T3 output ≤12k tokens (enterprise audit, CI/CD, remediation roadmap).

Validation Checklist:

• All WCAG 2.2 Level AA success criteria evaluated (58 total: 30 A + 24 AA + 4 AA removed from prior).
• Automated tests run (axe-core minimum, Pa11y/Lighthouse optional).
• Manual keyboard testing performed (tab order, focus indicators, skip links).
• Color contrast checked for all text/component pairs (4.5:1 AA, 7:1 AAA).
• ARIA attributes validated (landmarks, labels, live regions, widget roles).
• Semantic HTML verified (headings, labels, alt text, tables).
• WCAG 2.2 new criteria assessed (9 new success criteria).
• Violations categorized by severity (critical/serious/moderate/minor).
• Remediation plan provided with effort estimates.

Safety & Auditability:

• No PII in reports: Redact user data if testing production sites with real accounts.
• Evidence preservation: Screenshot violations, save axe/Pa11y JSON reports for audit trail.
• Version tracking: Document WCAG version (2.2), tool versions (axe-core 4.x, Pa11y 8.x), test date.

Determinism:

• Consistent thresholds: 4.5:1 for AA text, 7:1 for AAA, 3:1 for components (no "approximately").
• Reproducible tests: Automated tests produce same results on same HTML (no flakiness).

Resources

Official Standards:

• WCAG 2.2 - What's New (accessed 2025-10-26)
  • 9 new success criteria, 1 removed (4.1.1 Parsing).
• ARIA 1.3 Specification (accessed 2025-10-26)
  • Roles, states, properties for accessible widgets.
• WCAG 2.2 Quick Reference
  • All 78 success criteria with techniques and failures.

Automated Testing Tools:

• axe-core GitHub (accessed 2025-10-26)
  • 57% detection rate, zero false positives, integrates with Jest, Cypress, Playwright.
• Pa11y Documentation (accessed 2025-10-26)
  • CLI and CI-friendly, uses axe or HTML_CodeSniffer.
• Lighthouse
  • Accessibility score (0-100), uses axe-core, Chrome DevTools integration.

Color Contrast:

• WebAIM Contrast Checker
  • Check foreground/background pairs for AA/AAA compliance.
• WebAIM: Contrast and Color Accessibility (accessed 2025-10-26)
  • 4.5:1 AA normal, 3:1 AA large, 7:1 AAA normal, 4.5:1 AAA large.

Screen Readers:

• NVDA (Windows) - Free, most popular.
• JAWS (Windows) - Enterprise standard.
• VoiceOver (macOS/iOS) - Built-in.
• ORCA (Linux) - GNOME default.

Complementary Skills:

• frontend-designsystem-validator: Validates design tokens, component library consistency.
• testing-accessibility-automation: Integrates axe-core/Pa11y into CI/CD pipelines.
• frontend-performance-optimizer: Validates Core Web Vitals (LCP, FID, CLS) alongside accessibility.