LET’S CHAT

Web Accessibility Standards and How Can They Enhance E-commerce?

6 min read Last Updated: May 20, 2020

Written by Ramin Ramhormozi

Ramin, a Managing Partner at SKU Agency focused on growing your business through strategy, technology & design. Ramin loves to devour business books, podcasts and blogs. In his spare time (which is minimal) he enjoys hanging out at home with his wife and three kids - and occasionally riding the Peleton.

You’ve worked hard to get your website up and running. It’s polished, it’s professional, and the design is stunning. Before you hit that launch button, however, you should really stop to consider how accessible your site is.

Why should you care about web accessibility standards? To put it simply: creating an accessible site ensures every customer who visits your web pages can navigate, read, and understand them. If you don’t follow accessibility standards, you’re losing out on potential customers and higher search engine rankings.

From a customer service standpoint, you should want to create a site that all your customers can use. From a business standpoint, failing to consider your site’s accessibility could earn you several dings from major search engines like Google because your user retention dips. We’ll explain more as we go.

The Basics of Web Accessibility

Let’s begin with the basics. What do we mean when we talk about accessibility? What are the factors that make a site accessible to all? For a detailed guide, we recommend you look through Google’s own accessibility guide for web developers. In this guide, they also reference the Web Content Accessibility Guidelines (WCAG).

These guidelines were developed by accessibility experts to address recommendations for best practices. While the document itself is very dense, we’ll summarize the general idea for you here. Web developers should familiarize themselves with the full set of guidelines.

What you’ll want to remember is the acronym POUR, which stands for Perceivable, Operable, Understandable, and Robust. Here’s a simple checklist for you to keep in mind.

  • Is the content on your site perceivable to everyone, even if they have visual, hearing, or cognitive impairments?
  • Is your user interface operable for someone with a disability who can’t use a mouse or touch screen very well (or at all)?
  • Are you providing content that is understandable to people of all education levels and cognitive function? Is the interface easy to follow?
  • Can your website be viewed by a robust variety of browsers and devices? If a customer were using assistive devices to view your site, would they work?

Many of these guidelines are focused on users with disabilities, but in reality, they’re generally good advice for web development. There are a variety of ways to implement these standards on an enhanced e-commerce site that will improve the experience of every user.

5 Ecommerce Web Accessibility Tips

web accessibility

Here are our top five tips for creating a great e-commerce site with web accessibility in mind.

Use high contrast colors

One of the biggest complaints any web developer hears about a site is that it’s difficult to read. Most often, this is because the text on the site doesn’t differentiate enough from the background color, or a pattern complicates things.

This issue affects all kinds of people – those with low vision, blindness, colorblindness, light sensitivity, pattern recognition disorders, and much more. A customer doesn’t have to have any specific disability at all to find low contrast sites bothersome. Elderly users, people who wear glasses, and even people prone to headaches might navigate away from a site that doesn’t work well for them.

A WIRED article from 2016 discusses the issue of web design trends opting for lower contrast designs in this piece on how the web became unreadable. There are examples of contrast ratios and the preferred ratio for text opacity.

Many sites, including major players like Apple, have opted for designs in the past that used gray text on a white background. While this may look aesthetically pleasing for many minimalist designs, readability instantly becomes an issue.

A visit to Apple’s current website shows that while they’ve largely rethought this trend and opted for higher contrast options, they still fall back on that gray text in some areas – typically the areas where they want people to pay less attention.

When selecting appropriately contrasting colors, it’s advisable to use a standard color wheel. The color opposite your first selected color is going to offer the most contrast. We don’t advise red text on a green background unless you really know what you’re doing, but these elements can be incorporated into your overall site design to distinguish different information or navigation buttons.

Test your site on a variety of browsers and devices

A digital storefront that looks amazing in Google Chrome might look terrible in Mozilla Firefox. Something built for desktops may fall flat when viewed on an iPad.

E-commerce has been steadily growing to a larger portion of overall retail sales with every passing year. No matter what happens or where people are, they always have access to the internet via their desktop computers, laptops, tablets, and smartphones. It’s vital in this commercial landscape to have a website that meets the needs of shoppers.

That means sites should work on mobile, and more than that, they should be incredibly fast and easy to navigate. A person shopping on mobile is more likely than not looking for a specific product and ready to make a purchase. They want to access the buy page, perhaps read some highlights and stats on the product, check the images, and make their purchase.

If you can’t give them what they need, they’re off to your competitor.

While this is clearly good general design advice, from a web accessibility standpoint, it becomes even more important. Many people can’t easily navigate a touch screen, while others prefer the ease of their mobile devices and the ability to increase the size of text or use a screen reader.

Some browsers offer extensions that help with a variety of accessibility issues. For every user to get the most out of your site, they need to be able to view it in their preferred browser and on their preferred device.

You’ll also want to test how your site looks when text is enlarged on the screen. It could block other essential elements of the site or become unreadable.

Consider the reading level of your content

There are countless business owners out there who want to plug their content full of fancy buzzwords and lengthy descriptions. They want to impress their customers. Instead, they could be putting them off.

It sounds counterintuitive, but most adults prefer to read at a lower reading level than they can comprehend. It’s easier on them. Few people enjoy feeling like they’re doing homework while browsing an e-commerce site.

The average user will be most comfortable reading content at about a middle school level (7th-8th grade). That means less jargon and multisyllabic words (like, well, “multisyllabic”), shorter sentences, and fewer nitty-gritty details. It’s absolutely possible to give potential customers the information they need without overwhelming them.

Again, this is a tip that works well in general, but for specific web accessibility standards, you want to consider anyone with a cognitive disability, learning disorder, or even advanced age. These factors can all make processing dense or complex text difficult.

When you’re developing content, pause for a moment to consider your ideal customer. For example, a mother of teenagers. This mother may have no issue reading your content, or she might have a processing disorder that makes focusing for long periods of time difficult. Disabilities affect any and all demographics. Keep that in mind with your content.

Keep assistive technology in mind

There are many different types of assistive technology for web accessibility. You may be familiar with some of them, such as screen readers or speech-to-text, but others may be out of your realm of experience. Regardless, web designers should keep a variety of assistive technology in mind when planning an e-commerce site.

Some of the assistive technology customers may be using includes:

    • Screen readers
    • Text readers
    • Speech input software
    • Screen magnification software
    • Mouse-less technology (eye or motion trackers, hands-free devices, etc.)

As previously mentioned, doing the legwork required to ensure your site works on multiple browsers will also cover much of this software. Overall, you want to make sure your site is still usable for people who aren’t using a standard mouse or keyboard. This ties right back in to creating a user interface that’s easy to navigate.

It’s very common for companies and their web designers to go for something flashy and unique, but even the coolest effects can overwhelm assistive technology, rendering a site completely unusable by potential customers.

It may seem odd advice to recommend fewer bells and whistles, but ultimately your site will be better (and more accessible) for it.

Your media may require additional information

Anyone who’s delved into search engine optimization should be familiar with ALT text on images. This text serves an important SEO function, but it’s also a way to make your site accessible.

How? By describing images using ALT text, you’re giving customers who use screen readers access to those images. For users who are blind or have other vision impairments, an image-heavy site can be frustrating because they can’t properly see the images. Use ALT text to describe everything from the color of a product to its finer details.

As we move ever more into web commerce, many sellers are also relying on video or animation to grab customer attention. However, many still fail to include closed captioning or a transcript for customers who are d/Deaf or hard of hearing. 

Colorblindness is another factor to consider. We discussed contrasting colors in an earlier point, and that still holds true here. If your site largely depends on color-coding for navigation, consider how a person who’s unable to see certain colors would navigate your site.

How Enhanced Ecommerce Helps Your Site Succeed

We’ve gone over several reasons why accessibility standards ultimately help your site stand out and succeed in a crowded marketplace. When you make sure all users can access your site and what you’re selling, you’re making sure every single visitor can purchase from you.

At the end of the day, taking the extra necessary steps to make your site accessible will improve your viewership, your search engine ranking, and your business. There’s no reason not to!

If you need any assistance setting up an accessible Shopify storefront, we’re here to help. Drop us a line any time to receive our expert guidance.



Shopify 90-day Free Trial



Prefer to send us an email?

[email protected]

Learn more about SKU Agency.

X

Prefer to send us an email?

[email protected]

Learn more about SKU Agency.