G05 Progress Indicator

Definition

A visual representation of a sequential process, with different treatment designed to show users where they are in the process.

Usage

On all pages belonging to a linear multi-step form, such as a checkout process.

While the two variations look different, they are coded almost identically. For the variation 0, if a CSS2 compliant browser (Firefox/Safari/Mozilla) is being used, users can roll over the non-current items and the number will expand to show a brief description of that step. This action will not occur in browsers like IE 6.X.--however, it is not essential to the user interaction.)

The examples below show the finished steps (1 & 2) as clickable links. Use of a link for any of the steps is optional depending on the user's process. However, since it is a step-by-step process, it is logical that only the completed steps are clickable.

It is important to note that when building the component, the current step should have the ' class="current" ' in the LI, as well as "current step" in the EM tag that precedes the rest of the step information. This EM content is hidden to most browsers, but provides a verbal or textual context for blind or impaired users who would not otherwise see the different colors and styles for the current step

The H5 title "Steps" may be localized as needed.