Accessibility Testing with Playwright

 🎯 Why Do Accessibility Testing?

Accessibility testing helps you:

Comply with WCAG 2.1, ADA, Section 508, etc.

Improve usability for screen readers, keyboard navigation, and more.

Avoid legal risks and reach a wider audience.

✅ 1. Built-in Accessibility Tree with Playwright

Playwright provides access to the accessibility tree, similar to what screen readers see.

📌 Example: Dump the accessibility tree

ts

Copy

Edit

import { test, expect } from '@playwright/test';

test('accessibility snapshot', async ({ page }) => {

  await page.goto('https://example.com');

  // Focus on an element before snapshot (optional)

  await page.focus('h1');

  const snapshot = await page.accessibility.snapshot();

  console.log(snapshot);

});

🔍 Output (Partial Example):

json

Copy

Edit

{

  "role": "heading",

  "name": "Example Domain",

  "level": 1

}

This gives you visibility into roles, names, states, and more.

✅ 2. Using axe-core with Playwright

axe-core is the industry-standard accessibility engine. You can inject it into your Playwright tests to automate a11y checks.

📦 Install axe-core

bash

Copy

Edit

npm install axe-core

⚙️ Playwright + axe-core integration

ts

Copy

Edit

import { test, expect } from '@playwright/test';

import fs from 'fs';

import path from 'path';

test('accessibility check with axe-core', async ({ page }) => {

  await page.goto('https://example.com');

  // Inject axe-core into the page

  const axePath = require.resolve('axe-core/axe.min.js');

  const axeScript = fs.readFileSync(axePath, 'utf8');

  await page.addScriptTag({ content: axeScript });

  // Run axe-core accessibility scan

  const results = await page.evaluate(async () => {

    return await (window as any).axe.run();

  });

  // Log violations

  console.log(`Accessibility violations: ${results.violations.length}`);

  console.log(JSON.stringify(results.violations, null, 2));

});

📘 What You Can Test With Playwright Accessibility

Feature Supported

Role validation ✅ Yes

Keyboard focus ✅ Yes

Screen reader tree ✅ Snapshot

Color contrast ⚠️ Only via axe-core

aria-* attributes ✅ Yes

Keyboard-only navigation ✅ Yes (manual or scripted)

🧠 Best Practices

Run a11y checks as part of your CI/CD pipeline.

Combine automated tests with manual testing using screen readers (NVDA, VoiceOver).

Fix high-impact violations first (e.g., missing labels, color contrast, keyboard traps).

Use semantic HTML and correct ARIA roles.

🧰 Bonus: Accessibility Testing Tools with Playwright

Tool Purpose

axe-core Automated WCAG checks

pa11y CLI-based testing (can be used with Playwright)

playwright-accessibility Community wrapper for a11y tests

lighthouse (with Playwright) Accessibility score in audits

🔚 Summary

Tool Role

page.accessibility.snapshot() Inspect accessibility tree

axe-core Automate WCAG 2.1 compliance checks

Playwright test runner Script interactions and simulate real users

Learn Playwright Training Course in Hyderabad

Read More

Multi-Tab Testing in Playwright

Testing Shadow DOM Elements with Playwright

Writing Custom Reporters in Playwright

Using Playwright for Mobile Web Testing

Visit Our IHUB Talent Training Institute in Hyderabad

Get Directions