How to Test Page Accessibility

Overview

warning

This recipe only works when using Chrome DevTools Protocol (CDP) or Chrome.

Read more details in the section “How to Use CDP in Testplane”

Accessibility tree is an accessibility tree that contains a hierarchical structure of accessible objects. Unlike the DOM tree, which is intended for browsers, the accessibility tree is intended for screen readers and other tools that help people with disabilities interact with websites.

To obtain such a tree, puppeteer has a special Accessibility class.

Example

Here's an example of how to use it:

it("should get accessibility tree of yandex.ru", async function () {
    // Get puppeteer instance
    const puppeteer = await this.browser.getPuppeteer();

    // Get the first open page (considering it to be currently active)
    const [page] = await puppeteer.pages();

    await this.browser.url("https://yandex.ru");

    // Get the current state of the accessibility tree
    const snapshot = await page.accessibility.snapshot();
    console.log("snapshot:", JSON.stringify(snapshot, null, 4));
});

Accessibility Tree

And here's how the obtained accessibility tree looks:

{
    "role": "WebArea",
    "name": "Yandex",
    "children": [
        {
            "role": "link",
            "name": "Login"
        },
        {
            "role": "link",
            "name": "Mail"
        },
        {
            "role": "link",
            "name": "Disk"
        },
        {
            "role": "link",
            "name": "Try Plus"
        },

        // omitted for brevity...

        {
            "role": "link",
            "name": "finance"
        },
        {
            "role": "link",
            "name": "politics"
        }
    ]
}

Using the obtained tree, we can check that all necessary nodes are contained in the tree and have the correct structure.