ada hero 2

Web

How to make the eCommerce experience more accessible

Last Updated on May 9, 2022

With the surge of online activity these last couple of months, anyone with a product to sell should be turning to web sales to keep business going. Making sure your site is accessible to everyone (that is, it’s ADA compliant) has never been more important. (New to the ADA turn of phrase? Learn all about it here.)

Three things to consider adding to improve the eCommerce experience

Even businesses that used to rely solely on Amazon are now trying to sell their goods directly to consumers. That’s smart. But in the rush to figure out pick, pack, and ship, it can be easy to forget that not everyone can view or access the content of your website the same way you do. Your site doesn’t need to be visually stunning to gain customers; it needs to be easy to use. Here are three tips for how to make the eCommerce experience more accessible: 

1. Make sure all customers can take action

Here are a few things you can do to ensure your customers can purchase from you.

  • Descriptive call-to-action buttons. “Add to Cart” or “Buy Now” are ideal descriptions because it’s perfectly clear what the user will do. Single words like “Select” or “Add” might not be clear enough. Even icons like a shopping cart or cancel button need to have descriptions associated with them. (For more guidance on calls-to-action, here are 4 simple steps.)
  • Descriptive alt tags. A photo can do a lot to communicate how powerful your hammer is. But it needs to be supported with copy. Adding descriptive text about the image ensures everyone (from people who see perfectly to the visually impaired) has a great experience on your site. This is called an “alt tag” and it’s easily added through your CMS.  
  • Form field labels. It’s a popular design trend to use placeholder text rather than a label for your form fields. Placeholders are not always read by assistive technology. So, a clear label, even if it’s visually hidden, is critical to ensure all shoppers understand the checkout process and can easily complete the purchase. 

2. Keep your messaging clear and your site easy to use

When in doubt, keep it simple. Don’t ask your customers to burn calories finding products they want. When people with disabilities are using screen readers, they listen as a machine reads them the copy on the page. That means everything, including buttons, needs to make sense as stand-alone copy. And it has to make sense without visuals to tell the story.

  • Make sure your site is easy to navigate. Does your site navigation make sense if you use a screen reader? Do your buttons and images have alt tags? “Click here” doesn’t make sense without context. But “Explore our selection of hammers” sure does.  
  • Label headings correctly in the code. Headings should be labeled correctly in the code, starting with H1 (heading 1), which tells assistive technology this is the main topic of the page. Putting in place other headings (H2, H3) enable someone with a disability to tab through the page and clearly understand topics and groups of information. (This system of headings is also great for SEO. The H1s and H2s are the best places for keywords.)  

3. Help people connect with you

Normal business hours today won’t be normal in a month. So it’s critical that you tell people how they can reach you and when. The more options the better. 

  • Always include an email address. A phone number as a main contact point on your website isn’t enough. Pair it with an email address or live chat to make reaching your business more inclusive.  
  • Post your hours of operation (and update regularly). Things are changing daily, so stay on top of your establishment hours and protocols for doing business. This eliminates unnecessary emails and calls and helps people feel confident in your business.  

We hope these tips help you make the eCommerce experience more accessible on your website. Please reach out to us if you’d like to talk further!

Want to avoid losing customers or revenue over things like alt tags?

Sign up for our short, four-part email series. We’ll show you simple considerations for design, development, and content to help your site become easy to use, regardless of a user's situation.

Sign up now!
Ryan Whetstone Image Alt

By: Ryan Whetstone

Ryan is a web developer who has side hustles ranging from a car wash to making corn hole bean bags.