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

Your Guide to eTail West 2024 in Palm Springs, CA: Event Tips & Tricks

What Do I Need To Know About Etail West 2024? Are you in the eCommerce industry? If...
Learn More
Blog

The 5 Best AI and SEO Tools for eCommerce Website Strategy

In the vast digital landscape, where visibility is paramount, the science and art of...
Learn More
Blog

3 Tools To Use AI in Email Marketing For eCommerce Online Stores

In the realm of digital marketing, email continues to be a potent and influential...
Learn More
Blog

5 Awesome AI Copywriting Tools For Making Money Online In 2024+

In the realm of persuasive communication and digital marketing, the art of crafting...
Learn More
Blog

The 5 Best Video Enhancing AI Tools for Selling Online [2024 Update]

In the realm of digital content creation, video has emerged as a dominant force,...
Learn More
Blog

Our Agency's Top 5 AI Social Media Content Marketing Tools For Online Sales

In today's interconnected world, social media has transformed into an indispensable...
Learn More
BigCommerce vs Shopify_ Everything You Need to Know - 524x352
eBook
E-BOOK

BigCommerce vs Shopify:
Everything You Need to Know

Download e-Book

Let's Grow Your eCommerce Business, Together.