Quick Tip: Using DevTools to Find Page Elements

The Elements panel in DevTools provides an easy way to find page elements of a particular type – just perform a search for the element or attribute name (e.g., “<h2>” or “aria-label”). You can also find elements based on their CSS selectors (e.g., “[aria-label]”).

Use the Console panel to quickly list elements. As examples, typing document.querySelectorAll("button");into the Console and hitting Enter will return a list of all buttons on the page. document.querySelectorAll("[aria-label]"); will list all elements with an aria-label attribute. Click on an element in the list to view it in the Elements panel.

The monthly Web Accessibility Tip comes from WebAIM and is shared to get a wider audience. For more information about web accessibility, please visit the WebAIM website.

See also information about how you can subscribe to the monthly WebAIM Newsletter which contains lots of great information about web accessibility.