Email and SMS Marketing

Creating an Accessible Checkout Progress Bar

Dec 07, 2010   •   2 Min Read

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!

Explore more tags: Email and SMS Marketing Blog
Related Content

You Also May Like

Blog

Google Merchant Center: Everything an eCommerce Merchant Needs to Know

As the eCommerce landscape continues to evolve, businesses are constantly seeking...
Learn More
Blog

Choosing the Right eCommerce Tech Stack for 2023 & Beyond

Introduction The eCommerce tech stack is the foundation of any successful online...
Learn More
Blog

eCommerce UX: How Website Design Affects Conversion Rates

In the competitive world of eCommerce, striking the perfect balance between an...
Learn More
eCommerce Development

How This Nursery Increased Revenue 140% With HubSpot Email Marketing

Background Groove Commerce initially partnered with Caragh Nursery to migrate them...
Learn More
BigCommerce

3 Reasons Subscription Bundles Will Change Shopify Forever

What are subscription bundles?  Before we dive into the three major reasons why...
Learn More
BigCommerce

Lifting Bottom-Line Revenue 50% With Paid Advertising

Background The team at Cordova Outdoors specializes in creating tools for...
Learn More
Transforming eCommerce Customer Service   - 524x352
Frame 167 (1)
E-BOOK

From Cost Center to Profit Driver: Transforming eCommerce Customer Service

Download e-Book

Let's Grow Your eCommerce Business, Together.