Streamlining Accessibility Testing with Playwright Automation

In our previous post, “Deep Dive into Manual Accessibility Testing Techniques”, we explored the crucial role of manual testing in ensuring digital products are inclusive and usable by everyone. We covered various manual testing techniques, from keyboard navigation and compatibility with screen reader to form accessibility. These techniques are essential for finding accessibility issues that might otherwise go unnoticed.

Today, we’re taking a step further by diving into the world of automation for accessibility testing, checking the power of Playwright – a versatile tool for browser automation. Automation improves the testing process and helps catch accessibility issues early in the development cycle, ultimately leading to a better user experience for all.

Why Automate Accessibility Testing?

While manual testing is crucial, it can be time-consuming and prone to human error. Automating accessibility tests offers several key advantages:

• Efficiency: Automated tests run quickly and repeatedly, saving valuable development time.
• Consistency: Automated tests follow a predefined script, ensuring consistent testing across different environments and browsers.
• Early Detection: By integrating automated tests into your development workflow, you can catch accessibility issues early on, making them easier and less costly to fix.
• Regression Testing: Automated tests can be easily rerun to ensure that new code changes haven’t introduced accessibility problems.

Playwright: Your Accessibility Testing Ally

Playwright simplifies automating accessibility testing by providing a high-level API for interacting with web pages across multiple browsers. Let’s explore how we can use Playwright to automate some of the common accessibility testing scenarios discussed in our previous post:

1. Keyboard Accessibility:

With Playwright, we can simulate keyboard interactions to ensure that all interactive elements on the website are accessible via keyboard inputs. By programmatically navigating through the website using keyboard commands, we can verify the focus order, focus indicators, and general keyboard functionality.

import { test, expect } from '@playwright/test'; 
test('keyboard navigation', async ({ page }) => { await page.goto('https://yourwebsite.com'); 
// Tab through interactive elements 
await page.keyboard.press('Tab'); 
// ... (Verify focus order and visibility) 
// Test specific interactions (e.g., dropdown menus) 
await page.keyboard.press('Enter'); 
// ... (Verify dropdown opens and is navigable with keyboard) });

Explanation:

• Use keyboard.press to simulate tabbing and enter key presses.
• Verify that focus is visible on interactive elements, e.g., that dropdowns are open and navigable using the keyboard.

2. Screen Reader Compatibility:

Playwright allows us to interact with the Accessibility Tree, enabling us to verify whether website content is interpreted correctly through screen readers. We can programmatically inspect the accessibility properties of elements and ensure proper labeling and alternative text for non-text elements.

test('screen reader checks', async ({ page }) => { 

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

 

  // Get the accessible name of an element 

  const headingText = await page.locator('h1').getAttribute('aria-label'); 

  expect(headingText).toBe('Welcome to Our Website'); 

 

  // Check for alternative text on images 

  const imageAltTexts = await page.$$eval('img', imgs => imgs.map(img => img.alt)); 

  for (const altText of imageAltTexts) { 

    expect(altText).toBeTruthy(); 

  } 

}); 

Explanation:

• Use locators to target elements like h1 and img.
• Get the aria-label attribute for the heading’s accessible name.
• Use page.$$eval to get alt attributes of all images and check if they are truthy (not empty).

3. Form Accessibility:

Playwright assists with form submission and validation, allowing us to automate testing scenarios related to form accessibility. We can programmatically fill out forms, submit them, and verify proper labeling, error handling, and validation messages.

test('form submission', async ({ page }) => { 

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

 

  // Fill out form fields 

  await page.fill('#name', 'John Doe'); 

  await page.fill('#email', '[email protected]'); 

  // ... 

 

  // Submit the form 

  await page.click('button[type="submit"]'); 

 

  // Verify success message 

  await expect(page.locator('.success-message')).toBeVisible(); 

}); 

Explanation:

• Fill form fields using their IDs.
• Click the submit button.
• Check for a visible success message (adjust the selector as needed).

Integrating Axe for Deeper Accessibility Insights

While Playwright provides a solid foundation for accessibility testing, consider integrating the Axe accessibility engine for more comprehensive checks. Axe can uncover a broader range of issues related to ARIA attributes, semantic HTML, and more.

import { injectAxe, checkA11y } from 'axe-playwright'; 

 

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

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

  await injectAxe(page); 

  await checkA11y(page); 

}); 

Code Commentary: An Exploration of Accessible Search

Let’s take a moment to see how accessibility testing can be applied to everyday activities like Google search. After all, everyone needs to find daily answers, regardless of their abilities.

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

import { injectAxe, checkA11y } from 'axe-playwright'; 

import { getComputedStyle } from '@playwright/test'; 

 

test('Google Search Accessibility Test - Funny Cats', async ({ page }) => { 

  // 1. Navigate to Google Search 

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

 

  // 2. Fill the Search Box and Submit 

  await page.fill('input[name="q"]', 'funny cats'); 

  await page.press('input[name="q"]', 'Enter'); 

 

  // 3. Inject Axe for Deeper Analysis 

  await injectAxe(page); 

 

  // 4. Keyboard Navigation Test (Example) 

  await page.keyboard.press('Tab'); // Focus on first result 

  const firstResultHasFocus = await page.locator('.g a').first().evaluate(el => el === document.activeElement); 

  expect(firstResultHasFocus).toBeTruthy(); 

 

  // 5. Screen Reader Test (Example) 

  const firstImageAltText = await page.locator('.islrc img').first().getAttribute('alt'); 

  expect(firstImageAltText).toBeTruthy(); 

 

  // 6. Color Contrast Test (Example) 

  const searchResultLinkColor = await getComputedStyle(page, '.g a', 'color'); 

  const bodyBackgroundColor = await getComputedStyle(page, 'body', 'backgroundColor'); 

  // Calculate contrast ratio (using an external library) and verify 

  // ... 

 

  // 7. Run Axe Accessibility Audit 

  await checkA11y(page, { 

    detailedReport: true, // Optionally get a detailed report 

    rules: { // Disable specific rules if needed (see Axe docs) 

      'color-contrast': { enabled: false } 

    } 

  }, { 

    includedImpacts: ['critical', 'serious'] // Focus on critical/serious issues 

  }); 

 

  // Additional Assertions (Example) 

  const resultsCountText = await page.locator('#result-stats').textContent(); 

  expect(resultsCountText).toContain('About'); // Verify results were found 

 

  // 8. Optionally Generate a Report (See Axe-Playwright docs) 

  // ... 

}); 

1. The Google search page is loaded, initiating a search for searched content.
2. The search phrase is entered with the expectation of finding specific results.
3. Axe, a powerful accessibility tool, efficiently analyzes the code for potential barriers.
4. Keyboard navigation is tested to ensure users can easily navigate the search results.
5. Images are checked for descriptive alt text, ensuring screen reader users can access visual content.
6. The color contrast between text and background is checked for optimal readability.
7. Axe thoroughly scans the codebase, verifying compliance with established accessibility standards.
8. Search results are confirmed to contain relevant, searched content.
9. An optional detailed report outlines the accessibility aspects of the Google search results page.

This exploration example demonstrates that accessibility testing can be applied to any website or application, even when we’re simply searching for a bit of lighthearted fun. Remember, creating a web that’s accessible for all isn’t just a good practice—it’s a necessity.

In Conclusion: Your Accessibility Journey Starts Now

Accessibility isn’t just a trend; it’s an ongoing commitment to building a web or app that welcomes everyone. By integrating Playwright automation and powerful tools like Axe into your testing toolkit, you’re not just checking boxes – you’re developing a more inclusive digital world.

While this marks the end of our deep dive into accessibility testing, it’s just the beginning of your journey. Armed with the knowledge and tools we’ve explored together, you have the power to create websites and applications that are not only functional but also welcoming to users of all abilities.

So, go forth and automate those tests and build a brighter, more inclusive digital future for everyone.

Links

• https://playwright.dev/docs/accessibility-testing
• https://harshasuraweera.medium.com/axe-accessibility-testing-with-playwright-html-reports-the-complete-guide-1664636cdad1