The accessibility and usability of the checkout progress bar is often overlooked. This tutorial is for designers or front-end developers on how to build out an accessible checkout progress bar without using hotspots or a large amount of images. Start creating an accessible checkout progress bar now!

Creating an Accessible Checkout Progress Bar

All websites (from content to commerce) should be as accessible as possible. I could get into a long series of paragraphed rants about that topic, but I’ll save that for another day :). For more on web standards and accessibility you can check out Roger Johansson’s write up.

One thing that is often overlooked in regards to accessibility and usability is the Checkout Progress Bar. This article is more of a tutorial for designers and front-end developers on how to build out an accessible Checkout Progress Bar without using hotspots or a large amount of images.

First, we simply add a class on the ol called checkout-progress, adding an id called “step1” (so we know that which step we’re currently on), and I’m also adding spans around our text so that we can easily hide the text when we replace it with images.

First we’re turning the ordered list into a block level element so that we can visually replace its contents with our images; the width and height are relative to the size of your progress image you design. I then removed all of the padding and added some margins in there. The “auto” attribute centers the <ol> in the body.

Now we remove all of the margins and padding on the li tags because we’re don’t need it to take up any more space.

There are several image replacement methods available (see more here at mezzoblue). I’m hiding the text by using “position: absolute; left: -9999px;” I was originally using “display: none;” but I later found out that display:none can actually hide the text from screen readers.

What About The Link?

A big reason people are settling for hotspots is because they make it easy to link portions of an image, I’ve included a much more accessible way of doing that, by using the a tag around the text and absolutely positioning it where it needs to be. This method makes it work for you and me, and still keeps things accessible.

Since the ol.checkout-progress has position: relative on it, our absolute positioning on the #step1-link is able to be positioned wherever it needs to go.

The Final Code:

Need the Final Code? No problem, just check out the demo I prepared, that should be all you need!

Conclusion:

It may seem complicated at first, but once you do one of these it’s very easy to utilize the same code on your next project. There are also a lot of CSS techniques used in this lesson that you’re welcome to use in other places as well. Let’s keep moving towards web standards and accessibility, especially in the details.