← Checking Out: Progress Meters

The progress meter

Default version

You might place the default progress meter on a page before the process begins; for example, on a shopping cart summary page. When none of the steps are given the class name "current", all of the steps appear in the default (non-active) state.

This is what a text-only browser will display:

There are three steps in this checkout process.

1. Enter your shipping information
2. Enter your payment information
3. Review details and place your order

This is what a screen reader will read to the user:

There are three steps in this checkout process. List of three items. One, enter your shipping information. Two, enter your payment information. Three, review details and place your order. List end.

Showing an active state

To show an active state, add the class "current" to one of the list items. Then add span elements within the list items to host copy that describes the state to the user.

Step 1 active

In a text-only browser, this is rendered as follows:

There are three steps in this checkout process.

1. You are currently entering your shipping information
2. In the next step, you will enter your payment information
3. In the last step, you will review the details and place your order

Step 2 active

A screen reader will read the following:

There are three steps in this checkout process. List of three items. One, you have already entered your shipping information. Two, you are currently entering your payment information. Three, in the next step, you will review the details and place your order. List end.

Step 3 active

In a text-only browser, this is rendered as follows:

There are three steps in this checkout process.

1. You have already entered your shipping information
2. You have already entered your payment information
3. Now, review the details and place your order