Step Indicator

A step indicator is used to convey the test taker’s position in a multi-step process broken out across multiple screens.

On the first screen in the sequence, the indicator shows the total number of steps in the process, but only the label of the current screen is displayed. As the test taker moves through the process, the labels of screens prior to the current one remain visible.

Steps in the indicator have the following states.

  • Unvisited. Shown for steps whose screens are after the current screen in the sequence. The bottom border is gray #AAAAAA , and the label does not appear.
  • Current. Shown for the step of the current screen. The bottom border is blue #2978C6 , and the label is black #000000 .
  • Visited. Shown for steps whose screens are before the current screen in the sequence. The bottom border is light blue #8CB3DB , and the label is gray #909090 .

When non-linear navigation (i.e., moving through steps in any order) is allowed, selecting a step will navigate the test taker to the associated screen. In this case, the steps receive the pointer cursor.

The following demo presents ordered steps that allow for non-linear navigation.

To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.