Automated Accessibility Testing

Automated tools mendeteksi ~30-40% masalah aksesibilitas. Sisanya butuh manual testing. Tapi 30-40% itu menangkap low-hanging fruit yang paling sering terjadi.

Tools

axe DevTools (Browser Extension)

Scan halaman di DevTools → tab "axe" → "Scan ALL of my page". Gratis.

Lighthouse (Chrome DevTools)

DevTools → Lighthouse → centang "Accessibility" → Generate report. Score 0-100.

axe-core (Programmatic)

// Dalam test suite (Vitest/Jest + Testing Library)
import { axe, toHaveNoViolations } from "jest-axe";
expect.extend(toHaveNoViolations);

test("halaman login accessible", async () => {
  const { container } = render(<LoginPage />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

Playwright + axe

import AxeBuilder from "@axe-core/playwright";

test("homepage a11y", async ({ page }) => {
  await page.goto("/");
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

CI Integration

# GitHub Actions
- name: Run a11y tests
  run: npx playwright test --project=a11y

# Fail build jika ada critical violation
# Warning untuk minor issues

What Automated Tools CAN Detect

• Missing alt text
• Color contrast insufficient
• Missing form labels
• Duplicate IDs
• Missing document language

What They CANNOT Detect

• Alt text yang ada tapi tidak deskriptif
• Keyboard navigation flow yang tidak logis
• Context yang hilang untuk screen reader
• Apakah focus management benar di modal/dialog