What is an accessibility test in puppeteer?

Accessibility is an essential aspect of a website. To make a website accessible, you need to properly design and code it so that people with disabilities can use it conveniently. Accessibility also means ensuring that the website can load fast enough to be usable by the broadest range of people.

Puppeteer is a Node library commonly used in browser automation testing. In this shot, we will see how to use Puppeteer to perform some standard accessibility tests.

Keyboard functionality testing

An accessible website should not rely on the mouse alone – all functionality must be available from a keyboard as well.

The basics of keyboard testing are simple: The tab key must navigate through interactive elements (links, buttons, fields for inputting text, etc.), and enter and spacebar must select or toggle elements.

Keyboard focus and navigation

To test keyboard focus and navigation order, we can run a test to ensure that pressing on the tab or arrow-down keys will move the keyboard focus to the next interactive element in the view.

In the example code below, we first fetch all row elements, and then we check that each row has tabIndex=0, role=button, and that the row is focused. We achieve this using Puppeteer’s page.evaluate and getAttribute methods.

After validating those properties, we move to the next element by “pressing” the tab key or arrow-down key with page.keyboard.press(<keyName>).

// get all rows
const rows = await page.$$(`.rows`);
for (let row of rows) {
  // validate role, tab index and focus.
  expect(await page.evaluate(elem => elem.getAttribute(`role`), row)).toEqual(`button`);
  expect(await page.evaluate(elem => elem.getAttribute(`tabindex`), row)).toEqual(`0`);
  expect(await page.evaluate(elem => window.document.activeElement === elem, row)).toEqual(true);
  // move to the next element (click on tab or arrow down button)
  await page.keyboard.press(i % 2 == 0 ? `Tab` : `ArrowDown`);
}

View toggle using a keyboard

Similar to the tab and spacebar keys navigation test, we can test if the spacebar key toggles the view state.

We do this by navigating to a category. Then, we test the accessibility properties (e.g., tabIndex, role, aria-expanded). Finally, we press the spacebar key; it should toggle the property aria-expanded from true to false, and vice versa.

const category = await page.$(`.category`);
// verify tabIndex, role and focus
expect(await page.evaluate(elem => elem.getAttribute(`role`), category)).toEqual(`button`);
expect(await page.evaluate(elem => elem.getAttribute(`tabindex`), category)).toEqual(`0`);
expect(await page.evaluate(elem => window.document.activeElement === elem, category)).toEqual(true);
// verify aria-expanded = false
expect(await page.evaluate(elem => elem.getAttribute(`aria-expanded`), category)).toEqual(`false`);
// toggle category by press space
await page.keyboard.press('Space');
// verify aria-expanded = true
expect(await page.evaluate(elem => elem.getAttribute(`aria-expanded`), category)).toEqual(`true`);

Puppeteer is a browser automation tool and may not be suitable for extensive accessibility testing. As an alternative, a widely recommended accessibility testing tool is axe. You can check it out here.

Unlock your potential: Puppeteer fundamentals series, all in one place!

If you've missed any part of the series, you can always go back and check out the previous Answers:

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved