Accessibility testing is not scary

Test on the same page with your users!

A talk on the importance of HTML roles for accessibility and website navigation from a tester's perspective and a practical showcase of the Testing Library for accessibility testing with Cypress.

This talk was given at Merge 2022 in Innopolis, Russia.

Key points

• A significant obstacle in automated testing is how to use the website programmatically
• There are two common approaches to locating elements on the page:
  • Using CSS selectors
  • Using test IDs
• The aforementioned approaches don't represent the way real users use the website
• HTML roles are a way of communicating important regions and interactive elements to the browser
• Testing Library helps to use roles to build resilient tests, checking accessibility along the way

Example app

The app is a Next.js frontend for the Real World App project. The following modifications have been made (compare):

• The article list has been turned into a feed (ccda521)
• Each article has been turned into an article and given an accessible name (e197baf)
• The sidebar with tags has been turned into a complementary and given an accessible name (4b808c6)
• The tab bar has been turned into a tablist (d825145)
• Integration tests have been written in Cypress (6dfe4bc)
• Accessbile labels have been given to the form fields in the sign-up form (3d2dea2)

Present locally

The slides are powered by Slidev. Start them with the dev script inside the slides/ directory:

cd slides
pnpm i
pnpm dev

License

The Merge conference logo is copyrighted, it is distributed with permission from copyright holders.

The emojis are a part of EmojiOne, licensed under CC-BY 4.0.

The slides and the example app are licensed under ISC. Click here to learn more about the license.