Watching Checkout Progress Indicators That Screen Readers Miss
Step indicators tell sighted shoppers where they are in checkout. If the current step exists only as a colour or a filled circle, that information never reaches a screen reader.
Shipping, payment, review. The three words sit at the top of checkout with the current one bold, or filled, or in the brand colour. For a screen reader user, that whole display can amount to a list of three words with no indication of which step they are on, how many are left, or whether they just moved forward.
A progress indicator is information, so it falls under the same rules as other information: 1.3.1, info and relationships, and 1.4.1, use of colour. If position in a process is conveyed only visually, the relationship has not been made available in text, and checkout is a bad place to make someone guess.
What the indicator should say out loud
The current step needs to be identified in a way assistive technology can read. The usual method is aria-current with a value of step on the current item, inside a proper list or navigation structure. Paired with the step name, that gives an announcement a shopper can act on: payment, current step.
Completed and upcoming steps benefit from plain language too. A checkmark icon with no text alternative says nothing. Step one of three, shipping, completed, as text or as a properly labelled element, says everything. Keep it short. Checkout is not the place for a paragraph of orientation on every page load.
Watch what happens on an error
Progress indicators get strange when a step fails validation. The shopper is sent back to shipping from payment, but the indicator still shows payment as current, or shows both, or resets. A sighted user can often work out what happened from the form in front of them. A screen reader user is relying on the indicator and the error summary agreeing with each other.
Watch the back button behaviour as well. Moving back a step should update the indicator, preserve entered data, and not announce the shopper as being somewhere they are not. Test that path deliberately, because most checkout testing only ever moves forward.
A short watch routine for checkout changes
After any checkout change, run one full order with a screen reader and note what the indicator announces on each step, then trigger an error, then go back a step and note it again. Four observations. If any of them disagree with the visual indicator, that is a defect, not a nuance.
Stores on hosted checkout do not control all of this, and that is worth saying plainly. What they control is the choice of platform, the apps that inject steps or banners into checkout, and whether anyone ever tested it. An injected upsell step that the indicator does not know about is a store decision with an accessibility cost.
Related reading
If this topic is useful, these earlier guides go deeper on connected questions: Watching Loyalty Popups That Appear Right After Login, Watching Filter and Sort Controls on Mobile Collection Pages, and Watching Countdown Timers and Live Sale Clocks.
Frequently asked questions
How should the current checkout step be marked up?
Put the steps in a list or navigation structure and mark the current one with aria-current set to step. That makes position in the process available to assistive technology, not just visible on screen.
Is a coloured progress bar enough on its own?
No. A bar or filled circle conveys progress visually only. The same information needs a text equivalent, such as the step name identified as current and, ideally, its position, like step two of three.
What should happen to the indicator after a validation error?
It should reflect where the shopper actually is. If they are returned to an earlier step to fix an error, the indicator should show that step as current and agree with the error summary they are given.
Can a store fix this on a hosted checkout?
Partly. The platform controls the base markup, but stores control injected apps and extra steps, and they control whether checkout was tested with a screen reader before changes went live.