February 24, 2023
•
12 min read
User Experience is at the forefront of e‑commerce. It means order fulfillment, brand buy‑in, customer lifetime value, and more. However, the user experience of all customers – particularly those with disabilities, is often overlooked. And while ADA law in the US makes it so websites have to meet some accessibility compliance, [Baymard found that 94% of e-commerce sites aren’t accessible to even the basic standards](https://baymard.com/blog/accessibility-benchmark-launch). To avoid being in that percentile, we’re covering everything you need to know to make your Shopify Plus store a truly accessible experience for your customers. So grab your pen and paper, and let’s get into it…
First up, the must-haves - before starting to make your front-end accessible, you’ll need to understand the legal standards and requirements for the country in which you are trading.
If you’re a US brand or sell in the US, this means starting with ADA compliance. ADA, or the Americans with Disabilities Act, became law in the US in 1990 and aims to make public places accessible to people with disabilities.
As of 2018, the ADA applies to websites. Although not new, businesses still fail to comply with the ADA and result in being sued. Whereas GDPR is generally enforced by a centralized information commissioner like the ICO, the ADA is often enforced via lawsuits. People with disabilities, or for whom that accessibility is a priority, will file lawsuits against companies whose sites aren’t accessible. This means that aside from the legal implications (which we cover in full in this article), it’s essential to get it right.
Third-parties
As many organizations don’t have in-house expertise in accessibility, you or your Shopify agency may want to leverage a third party to help make sure you are reaching the legal requirements. These include but are not limited to:
Accessible360
Accessible360 audits sites using live users with a range of accessibility requirements rather than AI to test and detect accessibility issues with your site. This means greater accuracy for ADA and Web Content Accessibility Guidelines (WCAG), plus an additional review of improving your accessibility beyond the compliance must-haves.
When searching for an accessibility vendor, you have to know what to look for. Accessible360 takes a holistic approach to digital accessibility and truly becomes your partner in the process. Stay away from overlays, widgets, or anyone promising to make your website accessible 'overnight.' At Accessible360, all of our audits are performed by skilled accessibility engineers, many of whom have disabilities themselves. Accessibility is a human test and simply cannot be fully tested by a bot. There is a lot of misinformation out there. That's why we spend so much time simply educating prospective and current clients on the accessibility landscape; when you know better, you do better.
Connor Born
Senior Client Development Consultant | Accessible360
Lighthouse
Lighthouse gives a good and fairly accurate indication of how accessible your storefront is, scoring you out of 100% and finding common accessibility issues. However, this tool is automated, so it can’t guarantee compliance with WCAG or ADA.
Next up, we’ve got WCAG. WCAG is a set of formal guidelines on developing accessible web content. It focuses primarily on HTML accessibility. Whether you’re a developer or not, knowing about WCAG and what it means for your e-commerce site is essential.
WCAG is broadly broken down into four principles — essential things that web content must be to be considered accessible:
By focusing on principles, not technology, they emphasize the need to think about the different ways that people interact with content and how a website should be set up for each of these ways. For example, users might:
Creating a 100% accessible website in every use case can be difficult. But, US-based or not, we think every site should be built to be as accessible as possible and work for everyone. So without further ado, here’s our recommendations for making your front-end accessible.
Let’s start with content - every e-commerce store has it, whether it's a blog or product synopsis. There are a few basics you can cover to keep your content accessible:
Typography
Choose fonts with a large x-height. Most default interface fonts today, like Apple’s San Francisco, Google’s Roboto, Proxima Nova, and Georgia, have a large x-height. These fonts make letterforms larger and clearer for the given text size.
Limit line length. We recommend 50-60 characters on desktop and 30-40 on mobile. A relatively short line length helps the user’s eye travel back to the start of the following line without getting lost.
Line spacing of at least 1.5 (150%). This serves the same purpose as a moderate line length—creating a clear channel of white space between lines of text to help guide the eye to the start of the following line.
Avoid light text weights, especially at smaller sizes. Letter forms in a font must be thick enough to create significant contrast with the background color. If a font’s weight is too light/thin, the text becomes very hard to read.
Make small text as legible as possible. Avoid using small text, but if there are labels or menu items where text size is a necessary trade-off, consider using all-uppercase, a moderately heavier font-weight, and slightly expanded letter spacing.
Color and contrast are how visible your text color is on background colors e.g., the minimum gray to use on white is #767676 for visibility. Typically, the contrast ratio between text and its background should be at least 4.5 to 1. However, the ratios become more forgiving with larger and heavier fonts since they’re easier to read at lower contrast. This rule of thumb works for most text colors. However, for yellow fonts, we recommend you consider avoiding it or use sparingly. Around 1 in 160 people has an autistic spectrum disorder, and research has found that the color yellow can be distressing to some people in that population and is associated with sensory overload.
Apps or browser extensions you can use:
Navigation is how your customers will use your site, find products and search for specifics, so it is essential to get right.
Typically, links on your site are already set up as ‘tab-able,’ so all keyboard and screen readers can find and read them - easy! While this strategy works well for desktop users, it is important to consider tablet and mobile users, who make up almost 55% of internet users.
Here are our ‘basics’ for setting up navigation to be more inclusive across all devices:
There are also search Apps on the Shopify Plus store that make search navigation accessible. We have a complete article on everything site search; however, it would be a miss if we didn’t highlight some ways our partners create accessible search functionality in e-commerce.
First up, Klevu. Klevu Smart Search delivers customer search results based on their intentions and behaviors. To create an accessible search function, Klevu offers auto-suggest, including categories, pages, product suggestions, and personalized search suggestions, all of which are entirely navigable using the tab key only. You can read more on their on-site search ADA compliance here.
Accessibility is one of the most important aspects of our journey in democratising discovery. We commit to advancing accessibility, thanks to continuous learning from our partners and customers.
Nilay Oza
Co-Founder, Klevu
Next Algolia. Algolia also focuses its search accessibility around keyboard-only navigation with an auto-complete API that provides full search terms or results. For example, if a user navigating an office supplier’s website types ‘m’ in the search bar Algolia’s autocompleting API would suggest results such as “Mobile,” “MacBook,” or “Microphone.” Users can then tab down this list until they find their desired search. If none of the search results match their query, they can continue typing. Algolia also has an integration for voice search, allowing users who don’t find keyboards accessible to navigate their favorite e-com store using voice commands.
It’s worth noting that auto-suggest can also be used for other navigation cases across your e-commerce site, such as checkout navigation, allowing autocomplete for address and payment input.
Headings and hierarchy
So we’ve covered how to enable users to navigate your site to find their desired page. But, when they come across the desired page, you need to define headings and hierarchy of content and consider how screen readers will read it. This is one of the most common accessibility issues on the web, so here’s how you solve it:
Throughout e-commerce stores, images and videos are used heavily to promote and provide important product information to customers. Whether it’s a catwalk video to see how an item of clothing fits and moves or a 3D model of a ceramic mug to demonstrate dimensions - all of this information allows customers to feel excited about your product and confident when purchasing what they see, is what they’ll get.
However, a study by Baymard found that “55% of e-commerce sites fail to meet basic accessibility requirements for informational images”. This means a number of users currently can’t easily obtain information communicated through images while shopping online, leading to site abandonment. So, here’s what you can do to ensure all users can glean the information they need from your site imagery and videos.
The best way to make informational imagery or other visual content, such as videos and icons, accessible for screen readers is using Alt text. Alt text is provided by Html, which a screen reader reads aloud to the user. So, it’s essential to write correctly. For example, writing alt text as “image with a backpack” isn’t good practice if the image itself breaks down the dimensions, weight, color, and materials of a backpack, as the user will be left without this important information.
Equally, writing unnecessary information such as, “the person wearing the backpack is caught in heavy rain,” isn’t helpful. The alternative and correct way to write this in Alt text is “This backpack is waterproof.” Furthermore, it’s also a negative experience if you don’t include Alt text, as a screen reader will likely read the image file name instead. Ultimately, Alt text should communicate all the core information that a sighted user can see.
Note: Alt text can also be used for badges and icons, e.g., starred reviews.
Another example of informational imagery is tables, such as size charts, used in the specifications section of a PDP. Communicating all of the information on a chart like this would be far too complex in Alt tagging. Therefore, the best way to present this information is in an HTML table rather than an image, which a screen reader can register.
In a similar approach to informational imagery, there are elements across your site that will be crucial for users to be aware of, such as errors, links, charts & graphs, touch elements, fine print, forms, and back-end coding.
Alert - Don't use color as the only visual cue when communicating something meaningful, showing an action, or prompting a response.
Errors - When showing errors on the screen, don’t rely on colored text or borders alone. Instead, add an icon or include a title or label to the message indicating the error or field.
Text links - If it's a link, make it look like a link. Add an underline or bolder weight.
Charts & graphs - Using other visual cues like Html tables or images to communicate information like shape, labels, pattern, and size found in charts and graphs will allow you to implement alt text for screen readers.
Touch elements - These should be separated by at least 8px of space. As well as making it clearer that the controls are separate, this also reduces the risk of the user accidentally tapping the wrong option.
‘Fine print’ - For subscriptions where customers are committing to a continued financial agreement, it’s essential to make the fine print more obvious.
Forms - To help people understand what they should do and write in a form, make sure labels outlining the context of each form section don’t go away. While hiding descriptions and labels can make a cleaner form, the usability will suffer. This is because people who use screen readers usually navigate through a form using the Tab key, and the <label> elements are read for each form control.
While all of these features mentioned are important, it’s equally important to remember the front-end of your website is not just the things you see - it’s also in your coding (developers, we’re looking at you). Whether you’re working with a Shopify Plus agency or using your in-house team, make sure your website code can be read by a screen reader - empty elements will break the screen reading and create a negative and frustrating experience for users.
It’s clear that while you may have got the legal requirements nailed down, there’s a lot more to creating an accessible storefront than the basics. From writing effective and purposeful Alt text to ensuring any critical information is available to all users, there’s features and functions throughout your entire site to consider. If you need support to ensure your site is accessible compliant while creating an excellent User Experience for all your customers beyond the laws and regulations, reach out to our team.
