Introduction

In my .

The axe-core package

The , but it can be run programmatically in a variety of environments.

We're going to use it with Playwright, but axe-core packages exist for a number of automated testing frameworks, including Cypress, Selenium, WebdriverIO, and more.

Our first Playwright accessibility test

Including accessibility tests in your Playwright suite is as simple as adding a few lines of code. We've got a is specifically designed to have lots of accessibility issues, we're expecting this test to fail, and it does!

This is just the first page of the report, and there are lots of details in following pages. You'll notice that there are 50 total violations, which matches what we saw when we used on the axe DevTools extension in my for more information. Since these accessibility tests are just Playwright tests, you can run them in the same way you run your other Playwright tests.

Conclusion

In this post I showed you a basic example of how to include accessibility tests in your Playwright suite. Don't forget that axe-core is not limited to Playwright, and can be used with a variety of automated testing frameworks, such as Cypress and Selenium.

Some additional things to note:

• Although I was just testing in Chrome, axe-core supports all major browsers. You should consider testing in multiple browsers and viewports to ensure that your website is accessible to all users with all devices.




• The scan can be configured to include or exclude certain rules, for example color-contrast rules.




• You can limit the scan to a subset of the page by using the include and exclude options.




• You can limit the scan to a subset of the WCAG guidelines by using the rules option.

Finally, it's probably appropriate to mention that a clean accessibility scan is a great first step in making your website accessible, but it's not a silver bullet. For example, take the test to verify the existence of alt-text for images. The tool can tell you if an image is missing alt-text, but it can't tell you if the alt-text is meaningful.

Manual validation via a screen reader is an additional step you can do to ensure that your website is accessible. Automation tooling exists that can allow you to automate the manual screen reader testing process, but that's a topic for another post. Stay tuned!