How Do You Create An ADA Compliant Shopify Store? The Complete Guide.

An estimated 1.3 billion people – or 16% of the global population – experience a significant disability today which includes visual, motor, or mental impairment.

"By creating a website that’s accessible, not only do you avoid serious financial penalties, but you also expand your revenue-generation capabilities." ~ Hubspot

What does ADA Compliance mean?

ADA compliance refers to adhering to the guidelines and standards set by the Americans with Disabilities Act (ADA), a United States federal law enacted in 1990. The primary purpose of the ADA is to prohibit discrimination against individuals with disabilities and ensure they have equal opportunities in various aspects of life, such as employment, public services, transportation, telecommunications, and access to public and commercial facilities.

In the context of websites and digital content, ADA compliance means ensuring that your website or application is accessible to people with disabilities, including those who use assistive technologies such as screen readers, magnifiers, or speech input devices. This involves designing and coding your website in a way that accommodates the needs of users with various types of disabilities, including visual, auditory, motor, or cognitive impairments.

Web accessibility guidelines, such as the Web Content Accessibility Guidelines (WCAG), provide a framework to help web developers and designers create accessible websites and applications. By following these guidelines, you can improve the usability of your website and ensure that it is more inclusive and compliant with the ADA.

It's essential to note that ADA compliance is an ongoing process, as web technologies and accessibility standards evolve over time. Regularly reviewing and updating your website to maintain accessibility will help you stay compliant with the ADA and provide a better user experience for all visitors.

Why Should We Care About ADA Compliance?

Legal Issues

ADA Compliance is mandatory for websites of governments and businesses, according to the courts and DOJ. 

Between 2017 and 2021, the number of ADA-related lawsuits increased 400% — for an average of more than 10 per day.

Equality & Value

ADA compliance goes beyond legal obligations; it's about connecting with and valuing all your customers equally.

It's about believing in the fundamental human right of access to information.

ADA compliance brings your Shopify store closer to everyone, welcoming diversity, fostering inclusivity, and creating an environment of respect and understanding. In fact, embracing ADA compliance could significantly enhance your brand reputation, broaden your customer base, and boost your bottom line.

When creating your theme, focus on the main principles of the WCAG 2.0 Guidelines:

• Perceivable: Information and UI components must be presentable to users in ways that they can perceive.
• Operable: UI components and navigation must be operable.
• Understandable: Information and the operation of the UI must be understandable.
• Robust: Content must be clear enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

How do you create an ADA compliant Shopify store?

To ensure that your Shopify theme is ADA (Americans with Disabilities Act) compliant, you should focus on making your website accessible to users with disabilities.

Here are the main areas to consider and the steps to take:

1. Semantic HTML Tags

Use semantic HTML tags: Use appropriate HTML tags like <header>, <nav>, <main>, <footer>, <section>, <article>, and <aside> to structure your content. This helps screen readers to navigate and understand the content.

2. Proper Heading Structure

Ensure proper heading structure: Use the correct heading hierarchy (H1 to H6) and avoid skipping heading levels, as this can create issues for screen readers.

3. Minimum Font Size

Ensure that your body text is legible with a minimum font size equivalent to 16 px. This size improves readability for all users, particularly those with visual impairments.

4. Font Style

5. Text Alignment 

Avoid justified text, as inconsistent spacing can make reading difficult. Text should have consistent spacing between words and letters to make it easy to read. 

The text alignment should be left-aligned, which creates consistent spacing between words. 

6. Alt Text to Images

Add alt text to images: Provide descriptive alternative text for images by adding the alt attribute, which helps screen readers describe the images to visually impaired users.

Example:

<img src="example-image.jpg" alt="An example image description" />

Keyboard Accessibility

Customers with vision or motor impairment might use a keyboard to navigate and complete tasks online. These customers rely on a visual indicator to communicate where their keyboard’s focus is on a web page. In the example below, the Email field has a visual focus indicator:

Use labels for forms: Make sure that all form elements, like input fields and dropdowns, have associated labels. Use the for attribute on the label to link it to the input. 

Example: 

<label for="email">Email</label>
<input type="email" id="email" name="email" />

If you edit your theme's stylesheet, then make sure that you don't remove the keyboard focus style from any page elements. Use the following guideline:All interactive page elements have a clear visual indicator when they have keyboard focus. These elements include links, buttons, and form fields.Ensure keyboard accessibility: Make sure all interactive elements, like buttons and links, are accessible via keyboard. Ensure they have a visible focus indicator for better usability.

Links & Buttons

A link (or a hyperlink) on a website is text or a button that leads you to another page or a piece of information by adding a hyperlink or a URL to the text or button.

Every time you click a link on a website or type a web address into your browser, it's a URL. URL stands for Uniform Resource Locator. Think of it like a street address, with each portion of the URL as different parts of the address, and each giving you different information.

Here are some requirements to follow for ADA compliance:

1. Use large buttons, links or controls

The area for clicking and tapping controls must be large enough for people to activate them. This includes links, buttons, checkboxes, and other controls.

Small controls, and controls that are placed too close to each other, are difficult for many people to use. This is particularly relevant on mobile devices with small screens.

What are additional benefits?

• Content is more usable on touch screens, especially on smaller mobile devices.
• Content is more usable for people who are not experienced with the mouse or touch-pad on the computer they are using.
• Content is more usable in situations where the device cannot be held steady.

2. Use meaningful link text

Avoid using generic link text like "click here" or "more". Instead, use descriptive text that tells users what to expect when they click the link.

Links are more useful when they make sense out of context. Authors should avoid non-informative link phrases such as:

In fact, the phrase "click here" is unnecessary, even if it precedes a more meaningful phrase. For example, a link that says "click here to access today's weather" can be shortened to "today's weather." In some cases it may make sense to precede a link phrase with "more" or "read more about," (e.g. "more about global warming"), but if these extra words can be avoided, it is probably best to avoid them (e.g. "global warming" may convey the same meaning as "more about global warming," depending on the context)

These long links are almost certainly unnecessary, and are user-unfriendly for screen reader users. Remember that blind users cannot visually skim through lengthy links. They must listen to the entire text. .

3. URL links

URLs are not always human-readable or screen-reader friendly.

The human readable link Shopify Made Easy series is more user-friendly than the link to purchase the book by the same title on Amazon.com, which consists of a 108-character link full of numbers, slashes, and text that is not very human-readable. (https://www.amazon.com/dp/B0BV176712?binding=kindle_edition&searchxofy=true&ref_=dbs_s_aps_series_rwt_tkin&qid=1687175548&sr=8-2)

Does this mean that URLs should never be used as links? No. If the URL is relatively short (such as a site's homepage), the URL may be used as the link text. The key is to be considerate of screen reader users who must listen to the longer, less intelligible URLs.

Link Appearance

Browsers underline hypertext links by default. It is possible to remove the underline using Cascading Style Sheets (CSS), but this is a bad idea most of the time. Users are accustomed to seeing links underlined. In body text, they may or may not be able to figure out which text is linked if the underline convention is not used.

If link are not underlined by default, then there are 2 requirements:

1. The link text must have a 3:1 contrast ratio from the surrounding non-link text.
2. The link must present a "non-color designator" (typically the introduction of the underline) on both mouse hover and keyboard focus.

These two requirements help ensure that all users can differentiate links from non-link text, even if they have low vision, color deficiency, or have overridden page colors.

Links Focus

Many sites have implemented visual mouse hover effects for links, such as adding background glows, drop shadows, color changes, or underlining. These effects help users know that the item can be clicked on and that mouse focus is on a particular link.

To make these effects device-independent, it is necessary to ensure that it can be activated by either the mouse or the keyboard. In CSS, this means using both the :hover and the :focus pseudo-classes.

Nearly any time a:hover (or other hover effects) are defined in CSS, it should be modified to be a:hover, a:focus to ensure the same visual presentation is available when keyboard users navigate or 'tab' to the link

Buttons

Slideshows

When you add a slideshow to your online store, use the following guidelines:

• Slideshows don't play automatically.
• If slideshows do play automatically, then they include a setting that customers can use to pause or stop the slideshow.

Videos

When you add a video to your online store, use the following guidelines:

• Videos don't play automatically.
• If videos do play automatically, then their audio is muted.
• For videos that include audio, the video is fully visible and not obstructed by other page elements. This allows closed captions to remain visible.
• For videos that include dialogue, text transcripts are available. These are included either on the page, or in a link to a separate page.

• Make your site accessible with different devices and browsers: Test your site on different devices and browsers to ensure it is compatible and accessible for all users.

• Test your site with accessibility tools: Use tools like WAVE (https://wave.webaim.org/) and the Accessibility Inspector in browser developer tools to check for accessibility issues.

ARIA Roles and Attributes

Use ARIA roles and attributes: ARIA (Accessible Rich Internet Applications) roles and attributes can be added to elements to improve accessibility. For example, you can use role="navigation" on a <nav> element to specify that it is a navigation region.

For example, an <a> element with role="button" will be treated as a button, not as a link.

How to implement the ADA compliance changes to a Shopify store?

To implement these changes, you'll need to access your Shopify theme files. Here's how:

1. Log in to your Shopify admin panel.
2. Go to "Online Store" and then "Themes".
3. Click "Actions" next to the active theme, and then select "Edit code".
4. From here, you can edit your theme's Liquid files, HTML, CSS, and JavaScript.

Ensure that you create a backup of your theme before making any changes, as modifying the code can cause errors if not done correctly.

Lastly, remember that achieving full ADA compliance requires a continuous commitment to accessibility. Regularly review and update your website to address any new issues that may arise.

RESOURCES:

Here is a link for an ADA Compliance page - Web Accessibility Statement Example.

Color Contrast Checker: https://webaim.org/resources/contrastchecker/

Web Accessibility Tool: https://wave.webaim.org/

World Health Organization: 

Legal Information about ADA Compliance and websites.

ARIA Roles and Attributes by Modzilla for Accessiblity