How can landmarks improve accessibility testing in Puppeteer?

Overview

Landmarks such as header, nav, main, aside, and footer provide semantic regions that assist screen readers and keyboard navigation. The feature adds consideration of these landmarks in Puppeteer accessibility checks, making it easier to verify that landmark regions are present and navigable.

What changed

• Landmark regions are now surfaced in accessibility related checks and can be targeted in tests.

How to use

// 1) Check that landmark regions exist on the page
const landmarkCount = await page.$$eval('header, nav, main, aside, footer', els => els.length);
console.log('landmarks', landmarkCount);

// 2) List landmark elements by tag name
const landmarks = await page.$$eval('header, nav, main, aside, footer', els => els.map(el => el.tagName.toLowerCase()));
console.log(landmarks);

// 3) Inspect the accessibility tree to verify landmark roles
const snapshot = await page.accessibility.snapshot();
console.log(JSON.stringify(snapshot, null, 2));

Why it matters

Using landmarks allows tests to more robustly model how real users navigate content, improving test reliability for keyboard only and screen reader users.