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

HubSpot

Use The HubSpot Shopify Integration To Sync Customer Data

Introduction Running an online store is full of day-to-day excitement, but the data...
Learn More
Blog

How Cordova Outdoors Manufactures Insulated Coolers In the USA with Gentry Jensen - EP 003

Podcast: Download | Subscribe: Apple Podcasts | Google Podcasts | Spotify Meeting...
Learn More
Klaviyo

Klaviyo Abandoned Cart: 5 Strategies to Increase Conversion

It takes a lot of work to get customers to your eCommerce store. Whether you use SEO...
Learn More
Blog

Omnisend vs Klaviyo: A Marketer's Perspective on the Best Choice

One of the main factors to consider when growing your brand is choosing an email...
Learn More
Blog

Klaviyo Email Marketing: 5 Reasons They Stand Out in 2024

In 2024, email marketing is far from dead. Contrary to popular belief, it continues...
Learn More
Blog

Klaviyo vs HubSpot: A Side-by-Side Comparison

While many tools are required to successfully manage a digital-age brand, the tools...
Learn More
20 Best Shopify Apps LP Background Small
eBook
E-BOOK

20 Best Shopify Apps For Your eCommerce Store

Download e-Book

Let's Grow Your eCommerce Business, Together.