A11y Sprout leverages Puppeteer to scrape the accessability tree of a designated website and returns the current state of Links, Headers, Landmarks and Tabindex. Which can give us a glimpse into a websites usability in regards to assistive technology such as screen readers and VoiceOver
As stated in the Puppeteer Docs the method...
"Captures the current state of the accessibility tree. The returned object represents the root accessible node of the page."
const snapshot = await page.accessibility.snapshot();Links
- Checks for a skip link that allows a user to skip to the main content instead of having to tab through the header and navigation of a page.
- Meaningful links that provide context to the links content or purpose.
Headers
- Header ranking, making sure that only one h1 is on a page and that the h1-h6 element hierarchy is semantic and not stylistically driven.
Landmarks
- Expose landmark structure based on the default and set ARIA roles of a pages elements.
Tabindex
- Proper use of the tabindex HTML attribute, meaning that all important elements on a web page are focusable and accessible in a meaningful order when navigating a page using the tab key on the keyboard.