Inspecting the Code of an Element from SimulAT Results

When you want to view the source code of an element in the assistive technology simulation results, you can click on it within the results to select it on the page, then with it selected, click the Inspect link at the top of the content pane of the SimulAT panel. This launches the Inspector tool that is a part of the browser's developer tools, and displays the code with the element highlighted. From the page inspector, you can then examine and modify the HTML and CSS of the loaded page.

To complete the following steps, you must first generate a SimulAT analysis report that is displayed in the main content pane at the right side of the SimulAT panel. For more information, see Analyzing a Page for Screen Reader Compatibility.

To inspect an element's code from the simulation:

  1. In the simulation results pane, click on the desired element to select it (for example, Heading level one).
  2. Example of clicking on a result element button to select it - Heading level one

    The element button in the simulation results pane becomes surrounded with a pink border with square corners outside the blue, rounded-corner border that was already there to indicate that it is selected.

  3. With the desired simulated result element selected, click the Inspect link at the top of the results pane (and just to the left of the Highlight link).
  4. Example of clicking the Inspect link on the SimulAT toolbar while an element in the simulation results pane is selected

    The Developer Tools window is refreshed to show the Elements tool, with the element tag highlighted both on its main source code content pane at left, which displays the source code of the page with beginning and ending tags displayed along with its parent and child tags in the hierarchical structure, and its hierarchical breadcrumb path display and in the lower left content pane. The selected element's entire line within the code is highlighted. Additionally, the right pane displays the default Styles tab with the style sheet content details associated with the selected element and related CSS inspection tools.

    Example of highlighted h1 tag in Element DevTool and highlighted element tags in code pane at bottom, left

    At this point, you can either return to the Attest extension by clicking the WorldSpace tab on the DevTools toolbox bar and repeat this procedure to inspect another element, or you can continue to use the various inspection tools available, as desired. For more information about the Chrome inspection tools, see Inspect and Edit Pages and Styles - Chrome DevTools Help .

Next Topic: