- 1 year ago
How to query simple CSS selectors on the Chrome Accessibility Tree of a webpage?
To query simple CSS selectors on the Chrome Accessibility Tree of a webpage, you can use the Accessibility Object Model (AOM) which provides a way to access the accessibility properties of elements on a web page, including their role, state, and properties.
Here is an example of how to use the AOM to query for elements that match a simple CSS selector:
javascript// Get the root element of the accessibility tree
const root = document.documentElement;
// Query for elements that match a CSS selector
const elements = root.querySelectorAll("button");
// Loop through the matching elements and log their accessibility properties
for (const element of elements) {
console.log(`Role: ${element.getAttribute("role")}`);
console.log(`Name: ${element.getAttribute("name")}`);
console.log(`State: ${element.getAttribute("aria-checked")}`);
}
In this example, the querySelectorAll()
method is used to query for all elements that match the CSS selector "button". The resulting NodeList is then looped through using a for...of loop, and the accessibility properties of each element are logged to the console.
Note that the AOM is currently only supported in Chrome and some other Chromium-based browsers, and is not yet widely supported across all browsers.