A webpage’s accessibility tree indicates which parts of the page are compatible with assistive technologies such as braille displays, screen readers, and voice commands.
Assistive technologies work best when websites are designed to communicate with them. The accessibility tree, a pared-down version of the DOM tree, indicates which page elements are available for assistive technologies and whether they’re correctly configured (e.g., an element includes the correct ARIA attributes, the element’s computed properties are correct, etc.).
You can open the accessibility tree of any website using the “inspect” function on your browser. To view a website’s accessibility tree on Google Chrome, right-click on the page and go to Inspect > Elements and go to the Accessibility tab. To view a website’s accessibility tree in Safari, first enable the Developer menu by going to Safari > Settings > Advanced and checking the Show Develop menu in menu bar checkbox. Then, right-click anywhere on the website page and choose Inspect element. Select an element in the Elements panel and go to Node tab > Accessibility.
You can maximize your design’s web accessibility by completing Webflow University’s accessibility course and the Webflow accessibility checklist before you publish your site.
Get the best, coolest, and latest in design and no-code delivered to your inbox each week.