Accessibility and your eCommerce store

Providing accessibility is the practice of ensuring there are no barriers that will stop anyone – regardless of disability or need – from accessing, interacting, using and benefiting from something.

Accessibility is a key consideration for internationalisation, so if your aim is to scale your online store and enter new markets, make sure your website meets the accessibility standards required for that region.

Accessibility in any context means access. Providing accessibility is the practice of ensuring there are no barriers that will stop anyone – regardless of disability or need – from accessing, interacting, using and benefiting from something.

Website accessibility may not naturally be front of mind when it comes to eCommerce. But have you considered the sales you could be losing if your store is not accessible? There are over 14 million disabled people in the UK alone and the spending power of this population has been estimated at £274 billion per year. While a further study found that 71 percent of those with disabilities will abandon a website that’s difficult to use – that’s an estimated annual loss of £11.75 billion.

Failure to consider accessibility on your website risks excluding this vast audience, which is not only unethical but could also limit your brand’s growth. Accessibility is a key consideration for internationalisation, so if your aim is to scale your online store and enter new markets, make sure your website meets the accessibility standards required for that region.

Understanding accessibility standards

Accessibility guidelines differ from country to country, but both the UK and US use the Web Content Accessibility Guidelines (WCAG). WCAG outlines the accessibility criteria that brands need to meet onsite to consider all users and covers specifications for three defined levels of accessibility - A, AA and AAA - with the higher level being the hardest to meet.

WCAG 2.1, released in 2018, is the latest version of these guidelines and is divided into four principles:

• Perceivable: User-facing components, including content, must be presentable to the user in a way they can perceive and understand it.
• Operable: User facing components and navigation must be operable by all.
• Understandable: The operation of the user interface must be understandable to every user.
• Robust: Content needs to be robust enough that it can be interpreted by assistive technologies and should remain accessible as technologies evolve.

Web Accessibility Law

There are a number of regulations in place that force brands to meet specific criteria on the web. However, accessibility legislation varies in each country with different regions having different standards. While some make accessibility a mandatory must-have for any brand with a website, others don’t.

When it comes to accessibility, it’s very easy to get caught out. Simply running a website through an accessibility tool such as Google’s Lighthouse will likely highlight something where a website is falling short of accessibility needs. This could then be used as the foundation for a lawsuit.

As such, it’s no surprise that class action suits for ADA violations are on the up with 2,285 being filed last year - a huge 181 percent increase on the previous year. However, the majority of these cases are settled out of court with brands agreeing to make the necessary changes to their websites.

Following a successful case in 2017 (Gil v. Winn- Dixie), a group sprung up in the US that brings ADA Title III lawsuits against companies. Since then, the number of Title III lawsuits relating to website accessibility grew by 177 percent from 814 in 2017 to 2,258 in 2018, according to Seyfarth.

Renowned brands including Dominos, Netflix, and Target all faced lawsuits by advocacy groups over the accessibility of their websites which forced changes to company practices.

UK Accessibility Law

In the UK, the Equality Act 2010 does not refer explicitly to website accessibility, but it does make it illegal to discriminate against people with disabilities. The Act applies to anyone providing a service, whether that’s public, private or voluntary sectors. While the specific ways to comply are not explicitly listed, businesses are required to provide equal access to users with disabilities.

However, the UK government has adopted the WCAG 2.1 level AA as a suitable standard for public sector sites, and any site which meets these guidelines should have a strong defence against potential legal action should the worst happen.

US Accessibility Law

In the US there is also no written legislation that states brands must meet specific accessibility criteria on their website, but it is covered under the Americans Disability Act (ADA) Title III. This means if your website is not accessible, it could be classed as discrimination which is why so many brands are facing discrimination lawsuits.

Like the UK’s Equality Act, this Act covers all types of disability discrimination in businesses open to the public. Title III of the Americans with Disabilities Act (ADA) prohibits discrimination “on the basis of disability in the activities of public accommodations”. While the law was enacted primarily to focus on issues at physical locations, it is being applied to websites as well.

While there is much debate on the matter, The US Department of Justice has endorsed the WCAG 2.0 AA standard as an appropriate standard for accessibility in multiple settlement agreements, taking the position that the ADA requires affirmative steps to make sites accessible to disabled individuals.

Applying WCAG to your eCommerce store

Website accessibility has grown in significance due to these types of legal requirements and the risk of being sued. As such, it’s massively important to understand accessibility standards and how they can be applied to your website.

Applying WCAG guidelines to your eCommerce store requires both design and development considerations. The pointers below are designed to highlight different applications that you should consider, however, this is by no means a complete and exhaustive list.

It should be noted that the content and recommendations in this article shouldn’t be considered professional legal advice on the matter of applying web accessibility to your eCommerce store. Appropriate legal or other relevant professional advice should be sought in relation to any specific questions regarding the legal requirements of your site.

Information and relationships

Information, structure and relationships communicated through visual or auditory presentation need to be programmatically determined or available in text. This content should also be preserved when the presentation format changes, for example, when the content is read by a screen reader.

Applying this to the scenario of your store, visual aids or text are required for assisted technology to pick up. This consideration ensures all components are presented in a way that any user can understand, for instance, colour options for a piece of clothing should feature a visual or text cue.

Sequencing

Onsite content must be presented in a logical order. If the sequence that content is presented in affects its meaning, the correct reading sequence needs to be programmatically determined by assisted technology.

For example, an item on a product page should list the product title first and then the price – not the other way around. This ensures that if the text is read aloud by a text reader, it will make sense and be correctly understood by the user.

Graphical symbols

Graphical symbols and sensory characteristics should not be solely used to convey information to the user. This could include components such as shape, size, colour, visual location, orientation or sound.

For instance, we regularly see circles being used to represent moving to the next item within a product carousel. Users with assistive technology may have trouble understanding the meaning of this if no other visual control is provided. The addition of instructions is needed to provide the understanding and how to operate this content. In this specific case, including additional controls for ‘next’ and ‘previous’ items in the carousel either through arrows with visible text or applied as alt text in the build would be effective.

Colour

Colour is undoubtedly an extremely important part of design. Although it can be used to enhance visual elements, usability and accessibility, some users have difficulty perceiving colour. In fact, it’s estimated that 4.5 percent of the entire UK population suffers from colour blindness.

Those with partial sight often experience limited colour vision and many older users don’t see colour well. Additionally, people using text-only, limited colour or monochrome displays and browsers will be unable to access information that’s presented solely in colour. As such, colour shouldn’t be used as the only visual means to convey information, indicate an action, prompt a response or distinguish a visual element.

Applying this to a real eCommerce example, where products are available in multiple colour options, be sure to indicate this with text such as ‘3 more colours available’ as well rather than presenting swatches alone.

Contrast

This particular guideline can be one of the hardest to achieve from a brand perspective. When considering contrast in terms of A, AA, AAA standards, the requirements depend on what standard you’re aiming to achieve and large text (ratio of at least 3:1), text or images that are purely for aesthetic purposes and logos are exempt:

• A: There’s no specific criteria to meet regarding colour contrast but, as mentioned above, there is for the use of colour to convey information.
• AA: A visual level of contrast between colours is required at this level – brands should be aiming to meet specified contrast levels of at least 4:5:1.
• AAA: To meet the AAA standards, the highest colour contrast levels of at least 7:1 are required. This means all text would need to be on a solid background for a start. The lightest grey that could be on a solid white background would be #595959 and the lightest grey that can be used on a black background would be #969696.

If you have information, whether its text, your navigation or CTAs over an image such as a banner or carousel, it’s crucial to ensure adequate contrast or you may want to consider an alternative layout.

Content presentation

At all points, your onsite content should be presented without loss of information or functionality, and without the requirement of two-dimensional scrolling.

Common eCommerce ‘related products’ features often rely on horizontal scrolling and while certain pieces of content are exempt from the sideways scroll rule, there is nothing that specifically addresses this. On mobile devices in particular, it’s best to avoid horizontal scrolling and opt for stacked viewing instead.

Text spacing

To support accessibility, your content needs to follow specific text style properties to ensure no loss of content or functionality occurs, making it easily perceivable by all. The guidelines include:

• Line height (line spacing) should be at least 1.5 times the font size
• Spacing following paragraphs should be at least 2 times the font size
• Letter spacing (tracking) should be at least 0.12 times the font size
• Word spacing should be at least 0.16 times the font size

Timing

To comply, timing should not be an essential part of your onsite content, except for non-interactive synchronised media and real-time events. This includes:

• Banners on timers: Many banners and product carousels on eCommerce stores are set to auto rotation whereby they automatically change after a specific set of time.
• Timed checkout: Certain brands place timers on their checkout systems leaving users a pre-determined number of minutes to complete the purchase.

As such, we advise removing any time-based functionality from your store otherwise it can make certain elements inoperable to users.

Link purpose

For users to navigate your site, it’s important to make links easy to spot, allowing them to determine what happens if the link is clicked. The purpose of the link should be easily understandable, either from the link text alone or from the link text placed in context by accompanying content.

For example, on a blog page adding a text button that says ‘Read more’ after the blog title or on a product page including a text button such as ‘View product’ will put the existing content into context with the link.

To meet this guideline, every link on your eCommerce store would need to be clearly identifiable from the link text. This would mean adding CTAs on every single link or, where that’s not possible, ensuring all links are clearly descriptive. There’s also a development consideration within this regarding how link text is picked up by assistive technologies.

Headings and labels

The use of headings and labels help users understand what information is featured on a page and how that information is organised. When headings clearly describe a topic or purpose, users can find information easier and understand the relationship between different parts of the content. Each section of a webpage requires a section heading to break it up into organised sections.

Descriptive labels work in the same way, helping users to identify specific components within the content. For example, descriptive button labels such as ‘Load more products’ makes it easy to understand what that button will do and how to complete the action.

Location

To successfully pass the location guidelines, your website should allow a user to orientate themselves with their location within your site in multiple ways.

Including a site map that’s accessible through the footer is one way to do this alongside highlighting within the navigation the section of the site the user is active on. Implementing a sitewide breadcrumb trail would also help pass this criteria.

Readable

The readable accessibility considerations of your eCommerce store are vastly development related. But there are certain content considerations to be considered that ensures your site is readable and easy to understand for all.

For example, content should be written clearly and concisely for an appropriate reading level. This means abbreviations, unnecessary jargon and language that’s only used internally should be avoided onsite.

Other considerations that consider assistive technologies include:

• Language of page
• Language of parts
• Unusual words
• Pronunciation level

Predictable

Users may rely on predictable user experiences and subsequently become disoriented by inconsistencies. This requirement helps people learn how a website functions, allowing them to operate it in line with their needs.

For example, some users may assign shortcut keys to functions to enhance keyboard navigation while others might simply memorise the steps to reach a certain page. These actions rely on predictable and consistent functionality. Examples could include:

• Navigation mechanisms repeated across multiple pages appearing in the same place
• User interface elements repeated onsite having the same labels each time
• Significant changes on a webpage are unable to occur without the consent of the user

Input assistance

Forms and other interactive elements may be confusing or tricky for people to use, causing them to make mistakes. Input assistance helps users avoid mistakes onsite, particularly when filling out forms. This functionality can be used in various areas of your site including:

• Error identification
• Labels or instructions
• Error suggestion
• Error prevention
• Help

Compatible

Your website should be compatible with different browsers, devices and assistive technologies. This ensures that technologies can reliably process, present and operate your content.

A requirement that is heavily development focused, it includes:

• Parsing
• Providing a name, role and value for non-standard user interface components
• Status messages

Support of an agency

Website accessibility is a large, complex topic and one that you may need to lean on an agency for support with.

With us, you can have both – style and substance. Design and user experience play a huge role in our projects. To scale across new markets and expand your global reach, your online store needs to not only be well designed and visually engaging, but also comply to local legislation and meet the expected usability standards.

A Shopify Plus partner, we know the platform inside and out. But it is our background in retail that means we also truly understand your challenges. Working alongside businesses to grow their eCommerce presence, we’ve built and optimised websites for a number of renowned brands including NEOM, Cloud Nine, Prestige, Slendertone and N.Peal.

If you have any specific questions regarding web accessibility on your eCommerce website, feel free to get in touch with our team who will be more than happy to chat.