Back to blog

Four Ways to Make Your E-Commerce Site Accessible for Every Holiday Shopper

Posted November 29, 2022

AudioEye

Posted November 29, 2022

A series of gingerbread cookies decorated in the shape of a shopping cart, a cursor, and a buy now button, beneath a label that reads "4 Ways To Make Your E-Commerce Site Accessible for Every Holiday Shopper".
A series of gingerbread cookies decorated in the shape of a shopping cart, a cursor, and a buy now button, beneath a label that reads "4 Ways To Make Your E-Commerce Site Accessible for Every Holiday Shopper".

Get quick, actionable tips you can take today to make your website and holiday campaigns more accessible.

For people with disabilities, shopping online can be tough sledding.

In 2021, AudioEye analyzed more than 3,500 websites across 22 industries to better understand the state of web accessibility.

The results were predictably poor. Almost every site had accessibility issues, but e-commerce sites performed worse than most: 83% of the sites we tested had severe accessibility issues, including the inability to view product descriptions, make a purchase, or book an appointment.

A holly wreath, next to a stat that reads "20% of issues were severe enough to impact a user's ability to complete key tasks, like viewing a product description or making a purchase.

These issues can be especially pronounced during the holiday shopping season, for a few reasons:

  • Most holiday promotions are shared via email or social media, two channels that are notoriously inaccessible for many disabilities.
  • Every update to a website is a chance to introduce new accessibility issues. Many businesses update their website for the holidays, with new branding, promotional banners, and product pages.
  • Customer service teams are often overwhelmed during the holiday rush, which can make it harder for people with disabilities to get assistance.

To help make the holidays more accessible, we worked with members of AudioEye’s A11iance team to compile a list of quick, actionable steps that every online retailer can take immediately to make sure their digital content works for all shoppers.

A holly leaf in the shape of a percent sign, as part of a stat that reads "75% of online shoppers rely on product photos to make a decision."

1. Paint a Clear Picture of Every Image

Product photos are a critical part of most buying decisions. In fact, 75% of online shoppers say they rely on product photos to make a decision. However, not every shopper can perceive images visually — which is where image alternative text, or alt text, comes into play.

Alt text is a written description of an image that screen readers can read out loud — or convert to Braille — for people with visual impairments, sensory processing disorders, or learning disorders.

Done right, alt text can help paint a fuller picture of your products and services for people who use screen readers to navigate websites.

Unfortunately, many businesses forget to provide alt text. Or they treat it like some sort of file naming system, adding descriptions so generic — for example, an image of a clothing size chart with alt text that simply says “size chart” — they may as well not be there.

You can write more helpful alt text by following these best practices:

  • Don’t start with “Image of” or “Picture of”: Screen readers will know from the preceding HTML tag to announce the alt text as an image — so including these phrases in the alt text will only disrupt the user experience.
  • Be descriptive: People using screen readers can ignore what you write, but they can’t ignore what isn’t there. Include key details and defining traits.
  • Include readable text: If your images have text (for example: labels that explain product features or benefits), make sure they are either listed in the alt text or described nearby on the page.

Want to compare the difference between good and bad alt text? Check out our free holiday guide for e-commerce retailers

2. Design for Sound Off

If you’re selling online in 2022, there’s a pretty good chance that video is a big part of your marketing strategy. Whether you use video to highlight your products or share customer testimonials, it’s important to do it in a way that doesn’t exclude anyone. And often, that means adding captions and audio descriptions that help everyone enjoy your videos.

Here are three ways to create more accessible videos for potential customers:

  • Invest in high-quality audio: Make sure your audio is free of background noise, which can be distracting to people with hearing impairments.
  • Use audio descriptions: Insert descriptions of what’s happening on screen into natural pauses in the video’s dialogue, so people who are blind or low vision can follow along more easily.
  • Proof captions by hand: Human eyes and ears can help catch any mistakes that an automated captioning tool makes.

Want more video and captioning best practices? Download our free holiday guide for e-commerce retailers

3. Make Your Emails Accessible (and Check Them Twice)

Emails can be hard to code, which is why many businesses default to using linked images in place of coded emails.

Unfortunately, most email images aren’t all that accessible. Just think about how much information a typical promotional email includes. There are product names, sale prices, special offers … if all of this information is conveyed by the image alone, anyone using a screen reader will be left behind.

There’s a website I go to all the time that’s great. It’s easy to navigate, everything has a description. I got an email recently and it was just images with no text. It drives me absolutely crazy. They basically said, “We have this awesome sale going on. Image. Image. Image.”

— Ana Jacob | A11iance Advocate

As a general rule, businesses shouldn’t use images as the entire email. And when they do use images, they should make sure that each one has descriptive alt text.

However, there’s more to email accessibility than alt text. Here are three more accessibility best practices to apply to your promotional campaigns:

  • Set the role attribute of every table to “presentation”: Doing so makes it easier for screen readers to read emails in the right order.
  • Underline inline links: For people with visual impairments, color alone isn’t always enough to indicate that an inline link is clickable.
  • Make sure links are descriptive: Descriptive links help people understand where a link will take them.

4. When It Comes to Color, Take the High (Contrast) Road

For many people with disabilities, color contrast can be the difference between a website that is easy to read and navigate, and one that is completely illegible.

So why is color contrast so important around the holidays?

A lot of the colors traditionally associated with winter holidays — from white and silver to red and green — have low color contrast when used together. In fact, red-green color blindness happens to be the most common variety of color deficiency.

Six gingerbread man cookies, one of which is decorated to look older, next to a stat that reads "Approximately 15% of the U.S. population is currently 65 or older."

When you think about the impact of color contrast on accessibility — and add senior citizens with declining eyesight to the mix — the number of people who could struggle to navigate your website or engage with an email or social media campaign grows much larger.

The Web Content Accessibility Guidelines (WCAG) — the de facto international standard for accessibility — recommends a contrast ratio of at least 4.5:1. You can check the color contrast of your digital content using AudioEye’s free Color Contrast Checker.

Don’t Let Web Accessibility Be Your New Year’s Resolution

The holiday season is already here, but that doesn’t mean it’s too late to fix accessibility issues on your site.

Many of the most common accessibility barriers can be identified through automated testing. AudioEye’s Website Accessibility Checker runs a battery of over 400 tests, more than any other automated solution in the industry.

Ready to get started? Get a free scan of your site today.

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading