Highlighting a Violation

Follow this procedure when you want to highlight an element on the loaded web page from a violation in the Attest Analyze tool to visually inspect the area of the rendered page that contains the element in which the accessibility rule violation was found.

Automatic Highlighting Note:

Once activated, highlighting stays on until stopped manually. Immediately after analyzing a page, clicking a rule in the results pane automatically displays the first violation in the right pane, and when highlighting has previously been activated via the Highlight link, the target element in which the first violation of the selected rule was found is automatically highlighted on the analyzed page above the developer tools. Subsequently navigating to another violation will automatically highlight its element until you click the Stop highlight link (which the Highlight link changes to after being clicked). It is only when you navigate to another developer tool, or highlight something else on the SimulAT panel after analyzing a page, then go back to the Analyze panel again, that it becomes necessary to use the Highlight link again.

To highlight an element in which a violation was found:

Prior Activity: Analyzing a Page for Accessibility Rule Violations

  1. Click on a rule row in the left results pane of the Analyze tab.
  2. Clicking a rule from the RESULTS section after analyzing to display a violation in right pane

    Tip: You can view the target and source code of the element in which the currently-displayed violation was found by viewing the Target, HTML and any Node information that is immediately displayed in the violation pane at right, so you will have the information for references purposes to compare with the highlighted element.

  3. Click the Highlight link near the top of the right violation content pane.
  4. Clicking the Highlight link in the violation content pane of the Analyze tab

    This acts as a toggle for turning highlighting on, and you'll notice the link text changes to 'Stop highlight'. Dotted lines outline the element on the loaded, analyzed page, and a dotted line outlines the element in which the rule violation was found on the rendered page above DevTools in the browser.

    Example of a target element in a violation being highlighted in the rendered HTML part of the browser window

    Clicking a violation [>] navigation button to display another violation of the same rule will cause its target element to also be automatically highlighted. Similarly, clicking on a different rule row in the RESULTS pane will cause its first violation target element to be highlighted. Click the Stop highlight link to toggle the automatic highlighting off again, when desired.

Next Subtopic: