Inspecting a Violation

Follow this procedure when you want to quickly examine and modify the HTML and CSS of the loaded page and immediately view the target element associated with the selected currently-displayed violation. The Inspect button on the Violation pane of the Analysis tab allows you to launch the browser's built-in Inspector tool to examine details about the source code of the element in which the violation was found, including its HTML and CSS information.

This procedure assumes you have already analyzed the page. For more information, see Analyzing a Page for Accessibility Rule Violations.

To inspect an element in which a violation was found:

  1. Click on a rule row in the left RESULTS pane of the Analysis tab (for example, 'Images must have alternate text').
  2. Clicking a rule from the RESULTS section after analyzing to display a violation in right pane

    The first violation of the rule is displayed in the Violations pane to the right of the RESULTS pane. Note the information displayed in the Target, HTML and Node fields.

  3. Click the Inspect button near the top, right of the right Violations pane.
  4. Clicking the Inspect button in the violation content pane of the Analysis tab

    The Inspector tool in developer tools becomes the active tool, and the HTML and CSS information is displayed in its panes.

End of procedure.

Inspector Tool Components

Example of a target element in a violation being displayed in the Page Inspector developer tool

Refer to the following descriptions of the five main components of the Inspector tool to inspect the source code of the accessibility violation:

  1. Select Element button: The DOM and style inspector is actually part of the main toolbox toolbar, and gives you detailed information about the currently-selected element.
  2. HTML pane: The source code of the page is displayed with the selected element highlighted to allow you to examine and edit the HTML.
  3. HTML breadcrumbs: The breadcrumb trail at the top of the HTML pane shows the hierarchy in which the selected branch element is located.
  4. CSS View tabs: The tabs at the top of the CSS pane can be clicked to reveal different views of information pertaining to the selected element.
  5. CSS pane: The cascading style sheet information pertaining to the selected element is displayed, with different views of information available for inspection.

For more information about the various things you can do with the Inspector tool, see Page Inspector - Firefox Developer Tools | MDN.


Next Topic: