Use the Inspect tool to detect accessibility issues by hovering over the webpage

The Inspect tool displays information about individual elements as you hover over the rendered webpage, including accessibility information. In contrast, the Issues tool automatically reports issues for the entire webpage.

The Inspect tool button (Inspect) is in the upper-left corner of DevTools. When you select the Inspect tool button, the button turns blue, indicating that the Inspect tool is active.

When the Inspect tool is active, hovering over any element on the rendered webpage displays the Inspect overlay. This overlay displays general information and accessibility information about that element. The Accessibility section of the Inspect overlay displays information about text-color contrast, screen reader text, and keyboard support.

The Inspect tool, showing the element's area as a multicolor overlay, and showing the element's details as a large information overlay

Check individual elements for text contrast, screen reader text, and keyboard support

  1. Open the accessibility-testing demo webpage in a new tab of the browser, and then select F12 to open DevTools.

  2. Select the Inspect (Inspect) button in the top-left corner of DevTools so that the icon is highlighted (blue).

    To turn on the Inspect tool, select the Inspect button

  3. Hover over any element in the rendered demo webpage. The Inspect tool shows an information overlay below the element within the rendered webpage.

    The Inspect tool, showing the element's layout as a multicolor overlay, and showing the element's details as a large information overlay

The bottom part of the Inspect overlay has an Accessibility section that contains the following information:

  • Contrast defines whether an element can be understood by people with low vision. The contrast ratio as defined by the WCAG Guidelines indicates whether there is enough contrast (a green check mark icon) or not enough (an orange exclamation-point icon).

  • Name and Role are what assistive technology such as screen readers will report about the element.

    • The Name is the text content of an a element. For the element <a href="/">About Us</a>, the Name shown in the Inspect tool is "About Us".
    • The Role of the element. This is usually the element name, such as article, img , link, or heading. The div and span elements are referred to as generic.
  • Keyboard-focusable indicates whether users can reach the element regardless of input device.

    • A green check mark icon indicates that the element is keyboard-focusable.
    • A gray circle with diagonal line indicates that the element isn't keyboard-focusable.

Additional information in the Inspect overlay

The top part of the Inspect overlay, which is above the Accessibility section, lists the following details of the element.

  • Layout type. If the element is positioned using a flexbox or grid, an icon (Grid layout icon) is displayed.
  • Name of the element, such as h1, h2, or div.
  • The dimensions of the element in pixels.
  • The color as a color swatch (or a small, colored square) and as a string (such as #336699).
  • Font information, such as size and font families.
  • Margin and padding in pixels.

Identify nested regions using color highlighting

In addition to the information overlay, the Inspect tool also provides region-coloring that's similar to hovering in the DOM tree in the Elements tool.

  1. Open the accessibility-testing demo webpage in a new tab of the browser, and then select F12 to open DevTools.

  2. Select the Inspect button (Inspect tool icon) in the top-left corner of DevTools, so that the button is highlighted (blue).

  3. Hover over different parts of the rendered demo webpage. Each element in the webpage now displays with a multicolor overlay. This multicolor overlay can display nested regions inside of an element. For example, hover over the left margin of Cats. The Inspect tool highlights several rectangular portions of the Cats section with different colors, showing the layout that results from the CSS flexbox definitions on your webpage.

Multicolor flexbox overlay and information overlay when using the Inspect tool

To configure the grid overlay or flexbox overlay, in the Elements tool, select the Layout tab. For more information, navigate to Inspect CSS Grid.

Use the Inspect tool to hover over the webpage to highlight the DOM and CSS

  1. Open the accessibility-testing demo webpage in a new tab of the browser, and then select F12 to open DevTools.

  2. Select the Inspect button (the Inspect tool) in the top-left corner of DevTools, so that the button is highlighted (blue).

  3. Select the Elements tool.

  4. With the Inspect tool active, hover over different parts of the rendered webpage. In the Elements tool, the HTML DOM tree automatically expands to show information about the element you hover over. Hovering doesn't cause the Styles pane to update.

  5. Now select any element within the rendered webpage. The Elements tool automatically opens and displays the HTML of the element in the DOM tree. The tool also displays the applied CSS on the element in the Styles pane. Selecting an element on the rendered webpage turns off the Inspect tool.

Details about the selected element are displayed in the Elements tool

After selecting an element in the rendered page, you could then use the Accessibility tab (near the Styles tab) to view the Accessibility Tree and use the Source Order Viewer.

See also

Getting in touch with the Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • To file bugs about this article, use the following Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools