accessibility-testing-expert

Accessibility Testing Expert (2026 Edition)

English | Bahasa Indonesia

---

English

Orchestration & Integration

• modern-web-guidance: Evaluates platform accessibility guidelines, ARIA specifications, and :user-valid patterns.
• visual-ui-auditor: Multimodal vision verification for color contrast, visible focus rings, and spatial layout integrity.
• global-a11y-i18n-expert: Core WCAG rules, ARIA patterns, and internationalization standards.
• e2e-testing-expert: Integrating automated accessibility assertions into Playwright/Vitest CI suites.
• design-system-architect, senior-frontend: Accessible component primitives (Radix UI, Base UI, ARIA patterns).
• browser-automation-expert: Visual QA audits for focus rings, contrast ratios, and layout flow using Vision LLM agents.
• anti-slop: Enforces strict accessibility rules (preventing stripped focus outlines, div-soup buttons, and color contrast violations).

Description

Production guide for automated, semi-automated, and manual web accessibility (a11y) testing. Covers WCAG 2.2 Level AA/AAA compliance validation using @axe-core/playwright, Pa11y, Google Lighthouse CI, screen reader verification (NVDA, VoiceOver), keyboard navigation audits, focus management, and color contrast compliance.

Trigger Conditions

• Running automated accessibility test suites in CI/CD pipelines.
• Auditing web apps for WCAG 2.1 / 2.2 Level AA compliance and legal accessibility requirements (ADA, EAA).
• Debugging keyboard traps, missing ARIA labels, or broken screen reader navigation.
• Writing test cases for focus trapping in modals and custom dialogs.

---

Core Testing Workflows

1. Automated A11y Testing with Playwright & Axe-Core

import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test.describe('Accessibility Automated Audits', () => {
  test('homepage should have zero critical or serious a11y violations', async ({ page }) => {
    await page.goto('/');

    const accessibilityScanResults = await new AxeBuilder({ page })
      .withTags(['wcag2a', 'wcag2aa', 'wcag22aa'])
      .disableRules(['color-contrast']) // If tested separately
      .analyze();

    expect(accessibilityScanResults.violations).toEqual([]);
  });

  test('modal dialog should trap focus and pass a11y audit', async ({ page }) => {
    await page.goto('/dashboard');
    await page.click('button#open-modal');

    // Verify modal is open and focused
    const modal = page.locator('[role="dialog"]');
    await expect(modal).toBeVisible();

    const modalAudit = await new AxeBuilder({ page })
      .include('[role="dialog"]')
      .analyze();

    expect(modalAudit.violations).toEqual([]);

    // Verify keyboard escape closes modal
    await page.keyboard.press('Escape');
    await expect(modal).toBeHidden();
  });
});