Bookmarklets for improved accessibility testing with Shadow DOM/Web components support.
To use a bookmarklet, save it as a bookmark by dragging the link to your bookmarks bar or by manually creating a new bookmark and pasting the JavaScript code into the URL field. Once saved, navigate to the webpage you want to use it on and click the bookmarklet from your bookmarks bar to execute the code.
VA11y is a unified accessibility testing tool that combines the features of aName, aImage, aHeading, and aStructure into a single, comprehensive bookmarklet. It provides checks for accessible names, image text alternatives, heading structure, and semantic page structure, all within a convenient tabbed interface.
aName reports an approximation of the accessible name of the focused element. It returns the text label, where that's defined, the focused element type, any attached descriptions, and the current state if applicable. For elements within the shadow DOM, aName inspects both the focused element and its host to determine attribute states. It also attempts to resolve names from slot references and distributed text content.
Notes:
aImage reports the text alternative, the image type, and the source of the text alternative for all images, including identifying decorative images and images within the Shadow DOM. Hover over an image for more information.
aStructure highlights the semantic structural elements of a page, including role elements and elements in the Shadow DOM.
aHeading detects and outlines all headings on a page, including those within the Shadow DOM. It highlights headings, provides a visual outline, and warns about missing H1s, skipped levels, or empty headings.