Highlighting an Element on a Page from SimulAT Results

Page elements in the results pane display as buttons you can select. When you want to know which element on the page under test a result display element refers to, you can click on the element in the results pane to visually highlight it with a dashes outline border in a contrasting color on the rendered page under test in the browser displayed above the developer tools.

To highlight an element on the page:

  1. In the simulation results pane at right of the SimulAT panel, click on an element to select it (for example, Heading level one). They appear as buttons with rounded-corner blue borders.
  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 in a pink border with square edges around the outside of the existing blue rounded-corner border to indicate that it is selected.

  3. With the desired simulated result element selected, click the Highlight link at the top, right of the result content pane.
  4. Clicking the Highlight link at top, right of results pane after element highlighted in results pane

    The Highlight link text changes to 'Stop highlight' to indicate the highlighting on the rendered page under test of the selected element in the simulation results has been toggled on, and will remain active when subsequent result pane element buttons are selected until stopped via this link to toggle it off again.

    Additionally, the selected simulation result element is highlighted on the test page above DevTools with a visual border of dashes that is in a contrasting color, so you can see its corresponding location.

    Example of selected element in simulation results pane and highlighted corresponding element on test page

    Now you can see which element the screen reader simulation is referring to, by viewing the position in the browser where the displayed element is located on the rendered HTML of the loaded page under test that has been simulated. You can proceed with clicking additional elements in the same manner.

    Inspecting a Highlighted Element's Code: After you have highlighted an element, if you then want to inspect its underlying source code, you can use the Inspect link on the SimulAT panel toolbar for the currently-selected element to do so. For more information, see Inspecting the Code of an Element from SimulAT Results.

Next Subtopic: