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 :).

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 things first, let’s start with some clean markup:

<ol title=”checkout Progress”>
<li>Checkout</li>
<li>Billing and Shipping</li>
<li>Confirm Your Order</li>
<li>Complete Order</li>
</ol>

Which will output the following:

1. Checkout
2. Billing and Shipping
3. Confirm Your Order
4. Complete Order

Nothing new here, a very simple display of the progress; but we can’t stop there, we need some visuals so it flows with our unique design!

Let’s get our markup ready to be styled:

<ol class="checkout-progress" id="step1" title="Checkout Progress">
<li><span>Checkout</span></li>
<li><span>Billing and Shipping</span></li>
<li><span>Confirm Your Order</span></li>
<li><span>Complete Order</span></li>
</ol>

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.

Now for the CSS:

ol.checkout-progress
{
position: relative;
display: block;
width: 890px;
height: 37px;
padding: 0;
margin: 15px auto;
}
ol.checkout-progress li {margin: 0; padding: 0; display: inline;}
ol.checkout-progress li span {position: absolute; left: -9999px;}
ol.checkout-progress#step1 {background: url("checkout-progress_p1.gif") no-repeat center;}

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. 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.

HTML:

<ol class="checkout-progress" id="step2" title="Checkout Progress">
<li><a href="#" title="Return to Checkout" id="step1-link"><span>Checkout</span></a></li>
<li><span>Billing and Shipping</span></li>
<li><span>Confirm Your Order</span></li>
<li><span>Complete Order</span></li>
</ol>

CSS:

a#step1-link {
display: block; width: 130px;
height: 37px;
position: absolute;
top: 0px; left: 125px;
}


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. If you have any questions about creating an accessible checkout progress bar, drop us a line. We're happy to help!