eCommerce Website Accessibility Checklist

Chapter 1:

Introduction

Introducing the eCommerce Website Accessibility Checklist

Website Accessibility Checklist

Ensuring that your online store complies with all eCommerce laws and regulations can be challenging. So, we created this website accessibility checklist to help you comply with ADA standards and optimize your site for performance accessibility.

*Disclaimer: This website accessibility checklist does not serve the purpose of providing legal advice to eCommerce website owners. Rather, it provides general guidelines to follow to ensure their website is on the right path to being accessibility to all people and optimized for performance.

Chapter 2:

ADA Compliance

eCommerce & The American with Disabilities Act

eCommerce websites are required to abide by the Americans with Disabilities Act (ADA) Standards for Accessible Design, which was created to help people with disabilities easily access and use websites. According to the United States Department of Justice Civil Rights Division, the ADA covers employers with 15 or more employees (including State and local governments). It also applies to employment agencies and to labor organizations.

If your website is not ADA compliant, then you are liable for discrimination. If there's a lawsuit, your business could owe thousands of dollars because your website was not easily accessible to those with disabilities - even if the mistake was unintentional.

Be sure to follow this website accessibility checklist so that your eCommerce store remains ADA compliant and provides the best user experience for your visitors.

Use Appropriate Page Titles & Headings

Help your visitors know which web page they’re on by using descriptive page titles. The page title will display in the tab description at the top of the screen, so be sure it’s short enough for a user to read and relevant enough so that people can quickly understand what your web page is about. Plus, optimizing page titles helps to improve your SEO.

Also, use appropriate headings within your body text and throughout your website to make your page more visually appealing. Headings help guide readers’ eyes through the page, since they provide structure to your content.

SEO Tip: Rank in organic search results by incorporating your targeted keywords in your page titles and headings.

Offer Text Resizing

Use resizable text to accommodate people with impaired vision. Browsers typically enlarge the font size only or zoom into the web page and use a responsive design. Though enlarged text is easier for some people to read, it can present some challenges when optimizing your mobile design. Be sure you’re implementing these mobile website optimization strategies to ensure your site is easily accessible on both mobile and desktop. 

It’s important to note that when developers code for text resizing, it may hinder the browser’s default settings of zooming in on content. So, we encourage developers to verify this for themselves prior to launching a website.

Always Include Alt Text In Images

One of the most important points in this website accessibility checklist is to always use alt text in your images. It’s one of the simplest ways to ensure ADA compliance because the primary purpose of alt text is to help people with blindness understand what an image is.

Alt text is read by screen readers to help translate the content that’s on a web page. Keep in mind that some people may not see your images, so it’s important to use descriptive words to fully explain what the image is.

Alt text also helps search engines like Google understand the context of an image and how your image and content relate to one another - which contributes to organic search rankings. SEO best practices suggests incorporating targeted keywords in alt text (in addition to page titles and headings).

Use Color Contrast

We cannot stress enough the importance of using color contrast throughout your eCommerce website. Color contrast allows people with and without vision impairments to differentiate between the text and the background color (technically defined as the luminosity contrast ratio).

Be sure to use color contrast not only on your text but also on images, buttons, graphics and diagrams to ensure your content is recognizable on a page. People who are older in age typically have a low contrast sensitivity, making it harder for them to distinguish between similar colors. Cater to this segment of people as well as those who are color blind by ensuring a 4.5:1 contrast ratio for normal text and a 4:1 contrast ratio for larger text, graphics and images.

Provide Warnings For Flashing Visuals

If your website uses flashing lights and images, you must display a trigger warning before showing the flashing visuals. If you don’t, there could be a potential lawsuit against your company for causing distress to your visitors.

Flashing visuals often trigger seizures for people with epilepsy. If you choose to use flashing content, make sure it flashes slowly to avoid triggering those with epilepsy. Or, if you choose to use visuals that flash more than 3 times per second, you need to provide a trigger warning.

Make Website Navigation Easy

One of the most important takeaways from this website accessibility checklist is to create a seamless user experience. Increase the number of page sessions by making the website navigation simple. Help your website visitors easily navigate to a web page by providing more than one way to get there. Why? Well, doing this permits people to find and access your page in a way that is easiest for them.

The way in which consumers navigate throughout eCommerce sites comes down to their personal preferences and abilities. For example, some people might rather use a site map instead of navigating through multiple pages. Or, a person with vision impairments may find it easier to use on-site search rather than navigating through the menu.

Use Audio & Text Descriptions

Ensure a positive user experience for all of your visitors by offering audio and text descriptions in your videos. People who are deaf will not hear the audio, and they’ll need closed captions to understand what’s being said. On the other hand, people who are blind will not see the video, so enabling audio descriptions will provide them with better access to your visual content.

In addition, we encourage businesses to provide users with the option to turn off the audio from within the video player. The audio from a video can easily impede people's ability to comprehend the text on the page.

Optimize For Keyboard Navigation

Optimize your website for keyboard navigation to cater to people who are unable to use a mouse. Instead, provide a way for users to navigate through your site using only the arrows, tab, shift and enter keys.

We recommend limiting your menu options to 5-10 to create a predictable navigation and help people with disabilities move from one page to another. Keep in mind that some people use assistive technology, like voice control, so be sure to optimize your site for voice search as well.

Chapter 3:

Performance Accessibility

How Accessibility Affects Website Performance

The Secondary Effects of Website Accessibility

For a few years now, Google has taken many factors into consideration when displaying search results, like mobile-friendliness, page load times and so much more. In May 2020, Google announced a new algorithm update that gives thought to even more website metrics. They’re calling it “Core Web Vitals.

Google’s Algorithm Update

Google promises to make the public aware of these changes at least 6 months in advance, and website owners are already eager to learn how this will affect their businesses. Though the change was announced earlier this year, it will not go into effect until the end of 2020. Google acknowledged the effects that COVID-19 has had on many business owners and realized that many companies are shifting their focus to eCommerce sales to stay afloat during these challenging times.

So, what exactly are these Core Web Vitals, and how will they impact your organic search rankings? We’re diving into it below to help you get a head start on optimizing your website.

Core Web Vitals

The purpose of the Core Web Vitals is to improve the overall user experience on the Internet. Though we’re familiar with Google taking into consideration website and context specific factors - like including keywords throughout our content, using featured snippets, increasing site speed, ensuring site security and so much more - Google has decided to hone in on other critical aspects of a positive user experience.

The foundation of Google’s new Core Web Vitals involve three things:

1. Loading Experience
2. Interactivity
3. Visual Stability of Page Content

Loading Experience

It’s typically tough to measure how quickly a web page loads for its users. Google has conducted research on how to accurately measure page load times, and they’ve found that looking at how quickly the largest element on the page renders is most efficient. They call this metric the “Largest Contentful Paint,” which measures how quickly a page loads.

Interactivity

This one is just what it sounds like! Google measures a website’s interactivity, or how fast a website loads, when first-time users click around and interact with it. Google calls this metric the “First Contentful Paint,” which measures a website’s responsiveness and assesses how good (or bad) the first-time user experience is.

Visual Stability

Visual stability refers to the number of times that content on a page has shifted and has caused users to lose their spot on the page without warning. Google calls this metric the “Cumulative Layout Shift,” which measures how often website visitors experience a shift in layout. Google is making this change so that a website with low visual stability will rank lower than one with high stability. This is because unexpectedly changing a user’s screen results in a negative user experience.

What To Do

When Google puts these Core Web Vitals into action, we are expecting many brands’ rankings to change. Some will drop remarkably; others will drop a few spots; and some will improve. We recommend getting ahead of the game by improving these key features and functionality now.

Here’s what you can do right now:

• Ensure your pages load fast (under 2 seconds)
• Optimize your content for interactive engagement
• Avoid intrusive pop-ups

Chapter 4:

Conclusion

Our Closing Thoughts

By carefully following the tips in this website accessibility checklist, your eCommerce website will remain ADA compliant and perform well according to Google. Don’t be lax when it comes to ADA compliance - negligence could result in a serious (and expensive) lawsuit.

Although Google’s efforts of accounting for more in-depth website information may help or hurt some brands’ organic rankings, the overall benefit is to improve consumers’ online experiences.

If you have any questions or are wondering whether your eCommerce website currently follows the ideas in this website accessibility checklist, don’t hesitate to contact our team to request a complimentary website audit. We’ll be happy to hop on a call with you to discuss your website and marketing goals.