One thing that might be helpful would be to make the text more conversational such as “You’re currently on step: Confirm Your Order.”

Thanks for the input, great idea.

This is an interesting and informative post. I am currently implementing something similar and I have a couple of observations on which I’d be interested in your (and anyone else’s) feedback.

1. How do you indicate to a screen-reader which item is highlighted? In order to satisfy DDA requirements, information that is conveyed by an image (e.g. the progress bar image) also needs to be conveyed by screen-reader accessible text on the page. For step 3 from your example page I would implement it as below; inserting ” (selected)” after the step name provided within the tags.

Step 3

Checkout
Billing and Shipping
Confirm Your Order (selected)
Complete Order

2. When I last researched the issue, most screen-readers do not come pre-configured to read out the title text of a link. It is entirely possible that this situation has changed, but if this is still the case I would be inclined to further modify the example by placing the “Return to” text inside instead of using title text. I would also be consider using “Back to” and “Forward to”, rather than “Return to” as these re-enforce the ordering by indicating the direction through the process that the user would be moving. Further modifying the above example with the steps above and to add a forward link for the final step this would become:

Step 3

Back to Checkout
Back to Billing and Shipping
Confirm Your Order (selected)
Forward to Complete Order

Many thanks

Ian

You might be interested in a similar article that creates CSS custom buttons.

Thanks!

Talking about the progress bars, I also did some research on major etailers and how do they display the bar. I wrote an article about the findings, called CHECKOUT – Progress Bar Survey. Take a look and please let me know what you think.

Cheers,
TraiaN