1. Help Center
  2. E-Commerce Best Practices

ADA Compliance for Your Website

Accessibility for your online store is essential to providing an inclusive experience for your customers.

SmartEtailing has gone to great lengths to put our clients in the best position possible to maintain accessible websites. Keep in mind that your business is ultimately responsible for ensuring that everything published on your website meets accessibility guidelines. While we may assist in your efforts, we cannot guarantee to any extent that your website is compliant. 

Understanding ADA for your website

The Americans with Disabilities Act (ADA) does not explicitly mention websites, but is interpreted to include websites as “places of public accommodation” and therefore covered under the act.

While the law related to business websites is not yet settled, it is clear that businesses are expected to make website content and navigation accessible for people with disabilities, affording every visitor with “full and equal” use of its resources.

Just like in your physical store, there are aspects of online ADA compliance that you’ll need to pay attention to and we’ll try to make it as easy as possible. The goal is to make your website as easy to utilize as possible for people with disabilities.

Recommended guidelines

The Web Content Accessibility Guidelines 2.1 (WCAG 2.1) published by the World Wide Web Consortium (WC3) is a widely-accepted standard for accessibility. 

Anyone visiting your website must be presented with content that is:

  1. Perceivable - All users must be able to perceive the information being presented.
  2. Operable - All users must be able to operate the interface.
  3. Understandable - All users must be able to understand the information as well as the operation of the user interface.
  4. Robust - Users must be able to access the content with a wide variety of user agents, including assistive technologies.

Improving Your Website's Accessibility

To review your current site for potential accessibility issues, you can use tools like Wave Web Accessibility Evaluation to access your website. This can be helpful to find potential accessibility issues that may need to be remedied. But it is important to note that these tools only offer a snapshot of possible issues. They may not be hyper-accurate and do not serve as a guarantee of compliance.

Image Alternative Text

Alt text helps users with impaired vision understand image content. You can add alt text to images when you add them in the page builder. Every image on your website must have an alt= attribute. There are three principal categories of images which require different approaches. A helpful practice for adding helpful alt text is to imagine what a person would need to know about that image if you were describing it to them.
    1. Decorative images should have empty alt text: Alt="" (this is the default state for images within the page editor).
    2. Informative images should have alt text which describes the information (not the picture) in brief, clear terms.
    3. Active images (e.g., linked images) require descriptive alt text.
    4. Learn more about adding alt text here.

Contrast

It is important that the text on your website is visible to visually impaired visitors. You can use a contrast-ratio tool like Contrast Ratio to make sure elements of your website meet the following ratios against their background:

  • Body text and button text should have a contrast ratio of at least 4.5:1
  • Headings and large text (24 px font size and up) should have a contrast ratio of at least 3:1
  • Borders and icons should have a contrast ratio of at least 3:1

On all stock templates, default themes all pass WCAG AAA contrast tests, and our on-boarding team are trained in accessibility, so any client just getting started with SmartEtailing will be compliant with recommended guidelines.

Page Content

When you add headings to your page, add them in sequential order from 1 - 6. Assistive technologies use headings to communicate how page content is organized. Altering the sequence can be confusing to users.

Site Content

Add an accessibility statement to your website and link to it in your footer. This demonstrates your commitment to making your site accessible for all visitors and provides a clear contact method for anyone who encounters an issue while visiting you. A stock accessibility page is available in the content library in Content > Page Editor > Page Library > About. Learn more about adding pages here.

Additional resources

For your benefit, here are some additional resources for you to learn more.

Google Accessibility resources

Web Content Accessibility Guidelines (WCAG) 2.1

Material Design color accessibility tool

Mozilla: Understanding Web Content Accessibility Guidelines

MOZ: What You Should Know About Accessibility + SEO