Accessibility Test Scanner

Overview

Validate web applications against WCAG 2.1/2.2 accessibility standards covering perceivability, operability, understandability, and robustness. Combines automated scanning with axe-core, Pa11y, and Lighthouse accessibility audits alongside manual validation checklists for keyboard navigation, screen reader compatibility, and color contrast.

Prerequisites

• Accessibility testing library installed (axe-core, @axe-core/playwright, Pa11y, or Lighthouse CI)
• Browser automation tool (Playwright or Puppeteer) for rendering pages
• Application running and accessible at a test URL
• Target WCAG conformance level defined (A, AA, or AAA -- AA is standard)
• Color contrast analyzer (built into axe-core or standalone tool)

Instructions

1. Configure the accessibility scanner with the target WCAG level:

• Set axe-core rules to WCAG 2.1 AA (or 2.2 AA for latest standard).
• Include rules for ARIA attributes, color contrast, form labels, and heading structure.
• Define pages and components to scan (homepage, forms, modals, navigation).

1. Run automated accessibility scans on each page:

• Use @axe-core/playwright to scan after page load.
• Run Pa11y for HTML-level validation.
• Execute Lighthouse accessibility audit for a score and detailed findings.
• Scan each major interactive state (modal open, dropdown expanded, error state).

1. Validate keyboard navigation:

• Verify all interactive elements are reachable via Tab key in logical order.
• Confirm focus indicators are visible on every focusable element.
• Test Escape key closes modals and dropdowns.
• Verify skip-to-content link is present and functional.
• Check that focus is trapped within open modals (no focus escape).

1. Validate ARIA implementation:

• Check all ARIA roles match the element's purpose (role="button" on clickable divs).
• Verify aria-label or aria-labelledby on elements without visible text.
• Confirm aria-live regions announce dynamic content changes.
• Validate aria-expanded, aria-selected, and aria-checked states toggle correctly.

1. Check color and visual accessibility:

• Verify text contrast ratio meets WCAG AA (4.5:1 for normal text, 3:1 for large text).
• Ensure information is not conveyed by color alone (use icons, patterns, or text labels).
• Test with simulated color blindness filters (protanopia, deuteranopia, tritanopia).

1. Validate form accessibility:

• Every input has an associated with matching for/id.
• Err