Elevating E-Commerce Accessibility: Cart Confidence

If there’s one part of your e-commerce experience you really don’t want to break, it’s your checkout flow: the path users take to complete a purchase. And for customers with disabilities, accessibility barriers in your checkout flow are barriers to buying.

Importantly, designing an accessible checkout experience goes beyond ensuring shoppers can enter their credit card details. Before they’re ready to pay for merchandise, most people want to review the contents of their cart to confirm they’ve selected the right items. When this information isn’t accessible to users of assistive technology (AT) like screen readers, potential customers may choose to abandon their carts rather than risk spending money on the wrong products.

So, how can designers ensure every shopper has the “cart confidence” they need to checkout? In part three of her “Elevating E-Commerce Accessibility” video series, accessible design expert Dana Randall offers practical guidance for creating an inclusive shopping cart experience, helping all customers check out with certainty.

New to this series? Check out parts one and two, covering accessible template design and product display basics. 

Video: Cart confidence

 

Your roadmap to accessibility in e-commerce

Get the guide

Video transcript

This is the third video of the three-part video series. This video is going to focus on the cart and checkout. If you’re anything like me, you use your shopping cart as a wish list or a collection of things that you want, but you’re still considering. Maybe you’re unsure of sizing and you need to do a little more research to be sure you’ve got the best fit.

My shopping cart often looks a little bit like this. I’ve got the same item in two different sizes. I also have an item that I’m saving for when it goes on sale, and maybe a few things that I have in mind to buy as gifts.

As a sighted customer, I might not have a hard time figuring out what I did during my 03:00 a.m. insomnia add-to-cart spree, but what is this experience like for a low-vision or screen reader user?

When I’m designing, I want to make sure that I’m considering how to create a functional and efficient experience for all of my users. Some elements that I want to think about include:

Tip number one

Ensuring the sale price is clear and legible, especially for low-vision users. In this example, I’m making sure the sale text in red passes minimum contrast.

Yikes, it doesn’t. Let’s fix that. That’s much better.

A complete framework for accessible design

Get the guide

Tip number two

Let’s also make sure that the screen reader accurately announces the price. What is the actual price versus the sales price? And let’s ensure that we’re not creating any unnecessary confusion.

In this example, we have the original price with a strike through, the discounted price that the customer will actually pay, and the total savings amount. One way to approach this could be to give the complete information in a concise sentence, for example, $7.99 instead of $9.99, saving $2.

And finally, let’s go back to my 03:00 a.m. add-to-cart spree. Remember, we have a cart with a lot of items in it. Maybe some need to be deleted or saved for later. That takes us to my final tip of this series.

Tip number three

Something that you might want to consider as a design team is to include your spoken user interface during your prototyping process. Have someone on your team read the cart experience aloud. By including this, you’re considering how a screen reader user will experience your cart. You can think about how you want certain elements and components to be announced and the preferred order that you’d like that to happen.

You can take this same process and apply it to your checkout flow. Your goal is to create a clear and concise cart and checkout experience for all of your customers.

If you found any of this helpful, we’ve got more for you. Check out our other resources on accessibility and retail.

Win more customers with inclusive experiences

Visit our retail hub for additional resources on accessible design in e-commerce, and to learn how Level Access can support.