Is Your Shopify Website ADA Compliant?

Shopify has the largest eCommerce market share in the USA with millions of buyers and sellers using the platform every single day. As of writing this, Shopify sites fall behind in terms of accessibility. Shopify themes are not fully ADA-compliant. Making them hard to use by people living with disabilities.

Shopify websites are not ADA-compliant by design. They often lack core features of an accessible website, such as being keyboard accessible. Shopify delegates the matter to the owner of the website, since each jurisdiction has its own laws and regulations related to web accessibility.

The closest you can get to meet ADA compliance are Shopify’s free OS 2.0 themes, though they are not fully ADA compliant. The good news is Shopify’s Checkout went through a full audit and meets WCAG 2.1 AA requirements, but Shopify themes are far from it.

Shopify does offer some guidance in making themes more accessible, but it doesn’t solve the main issue. Website owners need to make those changes and adjustments themselves; not everyone is technically capable. Which leaves millions of Shopify sites inaccessible to the disabled and impaired, especially those built by third parties.

This puts business owners using Shopify in a vulnerable position financially, by the threat of getting sued for ADA violations and losing millions in sales.

The Benefits Of Having Your Shopify Website ADA Compliant

More Profitable

An ADA compliant Shopify website means a better reach and a wider audience. Approximately 42.5 million Americans are living with a disability, facing limitations with inaccessible websites and web content.

Having your Shopify website ADA compliant benefits you and your customers. It opens your Shopify business to an underserved market that otherwise wouldn’t be able to use your website, and you would be missing out on business.

Every year, businesses lose billions from having inaccessible eCommerce websites, losing customers and their reputation. In 2021 alone, retailers expectedly lost $828 million due to having inaccessible websites. 

Being ADA compliant can be a great marketing feature for your brand, promoting it as accessible and ADA compliant will definitely make your Shopify website stand out and attract more clicks. Today, a brand is everything, customers want to do business with inclusive brands that take their customers seriously. Failing to be an ADA compliant eCommerce website can result in lower sales and a damaged brand reputation.

Large retailers like Amazon are spending millions to make their websites accessible and have dedicated accessibility teams. Which isn’t always the case with small to medium retailers using Shopify websites to sell online, most of them ignore the legal requirements of web accessibility and some aren’t aware that it’s a problem on their Shopify site. Making them vulnerable to hefty ADA lawsuits which can bankrupt their online business.

Ultimately, making your Shopify website accessible translates into a better experience for your customers and more money for you.

3 Best Practices To Make Your Shopify Website ADA Compliant

Here are some best practices that you can implement today on your Shopify website.

1. Images

Making sure that images on your Shopify websites are responsive is important for a smoothly running and fast website load time. It also helps us avoid layout shifts on web pages which can negatively affect user experience.

This also includes icons, when displaying icons on your website you should preferably use them in SVG format. Which is a format for vector graphics, enabling us to display icons at any scale without image distortion. Something which raster images like JPG and PNG cannot do.

Unfortunately, not all images can be in SVG format especially if your initial picture was in raster format. The solution is to use Shopify’s liquid template language image_url and image_tag filters.

image_url is how we generate images using Shopify’s image API which are sent from Shopify’s CDN. Using it we can resize, crop, add padding and generate different file formats.

Older browsers display images differently from modern browsers which is where image_url comes in handy. It will automatically generate the right size and format depending on the client’s browser and at the same time load those images in the CDN offering a better load speed. 

Image_tag will generate the HTML <img> tag when given an image URL and the markups needed such as srcset, sizes and much more to display responsive images on all devices.

Here’s a plain example of using image_url and image_tag in liquid template language:

{% assign image_url = 'Assigning_Your_Image_Name.jpg' | image_url: 'medium' %}

{{ image_url | image_tag: alt: 'Image alt text goes here' }}

And here’s the resulting <img> tag from the query:

<img src="//cdn.shopify.com/s/files/1/123/456/products/example-image_medium.jpg" alt="Image alt text">

2. Pricing

Pricing can be displayed in many ways on a Shopify website, with or without decimals and even using HTML superscripts for dollar cents.

This makes it difficult for screen readers to make sense of all the different ways pricing is displayed on Shopify sites. Especially if different HTML tags are used for displaying a single price such as the case with <sup> for superscripts.

One way we can solve that is by simply hiding the price value from the user in a second <span> which screen readers will read. While the first <span> is shown visually to the user but hidden from screen readers.

Here’s an example using HTML <sup> tag for displaying superscript:

<span id="productPrice">
	<span aria-hidden="true">199<sup>99</sup></span>
	<span class="visually-hidden">$199.99</span>
</span>

By doing so you can display the price in any way you like, as long the first span is hidden from screen readers using aria-hidden=true.

3. Forms

Forms are widely used across Shopify sites, for email subscriptions, comment sections, product reviews and at checkouts. Adding form errors is a great way to make your website more accessible and ADA compliant. 

One easy way to do that is by using Shopify’s liquid template form.errors to check for validation issues with forms and display an error message.

Here’s an example with an email input field:

<html>
<head>
    <title>Email Form with Liquid Errors</title>
</head>
<body>
    <h1>Contact Us</h1>
    <p>Please fill out the form below to get in touch.</p>

    <form action="/contact" method="post">
        <label for="email">Email:</label>
        <input type="email" id="email"
name="contact[email]" value="{{ form.email }}" required>

        <br>
        <-- Display Form Error -->
        {% if form.errors %}
            <ul style="color: red;">
                {% for error in form.errors %}
                    <li>{{ error.message }}</li>
                {% endfor %}
            </ul>
        {% endif %}
        <br>

        <input type="submit" value="Submit">
    </form>
</body>
</html>

Conclusion

Having an ADA compliant Shopify website is more important than ever today, Shopify doesn’t offer much assistance in making your website accessible and delegates the matter to the website owner. This puts your organization at risk of losing thousands in lawsuits and lost revenue from customers with accessibility needs.  Need help auditing your Shopify store? Let our accessibility engineers help you. Write to us at info@advancedbytez.com or reach out to us by filling out our contact form.