# Checkout Progress Steps: The Step Indicator Screen Readers Cannot Follow

Source: https://cartcomply.com/blog/2026-11-15-checkout-progress-steps-screen-reader.html

*The progress steps at the top of checkout, Shipping, Payment, Review, with the current step highlighted, are the one piece of orientation a shopper gets during the longest form on your site. A sighted shopper glances at it and knows where they are. A screen reader user hears nothing at all, because the steps are usually a row of styled divs with no list, no links, and no current-step marker. The orientation is decoration, and decoration does not get announced.*

## Three steps, zero structure

A step indicator is a list. It has three or four items in a fixed order, one of them is current, and the ones before it are done. That is a list with state, and HTML has a structure for it: an ordered list, with the current step marked by aria-current="step" and the completed steps marked as links back to the steps they name. Most checkouts build it as three divs with a number and a label, styled to look like steps, with the current one bolded. A screen reader sees three unrelated pieces of text with no order and no state. The shopper who most needs to know where they are in a three-step form is the one the indicator tells nothing.

WCAG 2.2 Success Criterion 2.4.3, Focus Order, requires that the navigation order preserves meaning and operability, and a step indicator that is not in the tab order at all breaks the spirit of it even when the letter is arguable. The stronger failure is under 1.3.1, Info and Relationships: the information that the steps are a sequence, and that one of them is current, is conveyed by vision alone. The WebAIM Million 2025 report finds missing structural information of this kind on most of the pages it scans, and checkout is where the cost lands, because a shopper who cannot tell which step they are on cannot tell whether the payment step already happened or is still to come.

## The completed steps should be links

A completed step is a destination: the shopper can go back to shipping and change the address. If the step indicator shows it as plain text, the shopper has to find the browser back button or the edit link buried in the summary, and both are worse than the step itself. Make completed steps links to those steps. Make the current step text, marked with aria-current="step", so the screen reader announces "current step, Payment." Make the future steps plain text, because they are not destinations yet. That is the whole pattern, and it is about ten lines of markup.

[Focus order at payment fails the same way](https://cartcomply.com/blog/2026-11-11-checkout-focus-order-payment-keyboard.md): the tab sequence loses shoppers at the step where the money changes hands. [The cart upsell drawer steals focus](https://cartcomply.com/blog/2026-11-13-cart-upsell-drawer-keyboard-focus.md) in the same checkout, for the same reason: the structure was built for sight, and the keyboard and screen reader were never tested. The step indicator is the cheapest of the three to fix, and it is the one shoppers notice first, because it is the first thing on the page.

## Announce the step change

When the shopper moves from shipping to payment, the step indicator changes. A sighted shopper sees the highlight move. A screen reader user hears nothing unless the change is announced. A polite live region on the step list, or a heading at the top of each step that names the step, closes the gap. The heading is the better fix: every checkout step should start with a heading that says where the shopper is, so the screen reader announces it as the user arrives. The indicator shows it, the heading says it, and the two together mean no shopper has to guess.

Test it by tabbing through checkout with a screen reader and listening for the words "step two of three" or "current step." If you hear neither, the indicator is decoration. Fix the markup, not the styling.

## Frequently asked questions

### How should a checkout step indicator be marked up?

As an ordered list, with completed steps as links back to those steps, the current step marked with aria-current="step", and future steps as plain text. That gives the screen reader the order, the state, and the destinations. Three styled divs give it none of those.

### Does the step indicator need to be in the tab order?

The completed steps should be, because they are links to real destinations. The current and future steps should not be focusable, because they are not actions. The point is not to add tab stops; it is to make the structure and the state available to the screen reader.

### How does a screen reader user know which step they are on?

Two ways, and you should provide both: the step indicator marks the current step with aria-current="step," and each checkout step starts with a heading that names the step. The heading is what the user hears when they arrive. The indicator is what they check when they want to confirm.

### Is a visual step indicator enough if the form itself is accessible?

No. The form being usable does not tell the shopper where they are in it. A shopper who cannot tell whether payment already happened or is still to come will abandon the checkout rather than risk paying twice. Orientation is part of the form, not decoration on top of it.