Modern websites and web apps are complicated things that involve hundreds of states, thousands of lines of code, and complicated multi-screen interactions. These automated programs are incredible resources. Certain automated accessibility products can also integrate as a Continuous Integration or Continuous Deployment (CI/CD) tool, presenting just-in-time warnings to developers when they attempt to add code to a central repository. The pseudocode would be something like:įailures can then be collected and used to generate reports that disclose the number, and severity of accessibility issues. The Accessibility Tree for the element is displayed, and is expanded.Īny element in the tree that doesn't have a name, or has a role of generic (such as the div element) is a problem, because that element won't be available to keyboard users, or to users who are using assistive technology.For example, an automated accessibility test might check to see if the tabindex attribute is present and if its value is greater than 0. To the right of the Styles tab, select the Accessibility tab. The Styles pane shows the CSS settings for the element. The DOM tree shows the div element for the 100 button.

In DevTools, the Elements tool is displayed. In the rendered webpage, select the 100 button. In the rendered webpage, in the Donation section, hover over the 100 button. Select the Inspect ( ) button in the top-left corner of DevTools so that the button is highlighted (blue). Open the accessibility-testing demo webpage in a new tab.

The Accessibility Tree is in the Accessibility tab of the Elements tool (near the Styles tab). The Accessibility Tree is a subset of the DOM tree, which contains elements from the DOM tree that are relevant and useful for displaying the contents of a page in a screen reader. The Accessibility Tree indicates what information the page provides to assistive technology such as screen readers. An alternative way to check a webpage is to use the Accessibility Tree. Using the Inspect tool to check the accessibility of each page element individually can become pretty time-consuming. Several DevTools features check for keyboard and screen reader support.

Accessibility screen reader test