How to Make Your Ecommerce Site Accessible

Regardless if you’re launching a new ecommerce site or looking to amplify your current offering, its accessibility should be a huge consideration. Otherwise, you’ll run the risk of limiting access to your website’s content, and for ecommerce based sites, this could lead to a lot fewer conversions. 

In this article, we’re going to walk you through a few ways you can ensure your website is accessible for those with visual and cognitive imparities

A brief (jargon-free) introduction to accessibility practices

Back in 1999, developers from across the world came together to create a set of guidelines that would ensure web content was accessible to people with various disabilities. These guidelines are known as the ‘We Content Accessibility Guidelines, or WCAG for short. Then in 2008, as technology advanced, an updated guideline was published known as WCAG 2.0. Along with WCAG 2.1 in 2018. 

These guidelines are not only internationally recognised as best practices, but also a legal requirement for some websites. ‘Legal requirement’ may sound daunting, but the good news is that your website most likely meets the minimum requirement.All points covered in this article have been considered under WCAG 2.1.

Page design considerations

Did you know that a poor page design can make it difficult for users with visual impairments to access and understand information?

Your website’s design is a critical tool for conveying information to users and guiding their actions. Specifically, in ecommerce, the design can set the tone and influence the user’s buying journey, so your page design must be accessible for all users, regardless of impairments.

We’re not stating that every website has to follow the same design as there’s plenty to explore whilst still following best practices and WCAG, but here are a few ways you can maintain your visual aesthetic whilst complying. 

First, avoid excessive uses of animations and interaction effects, as these all aid in reading difficulties. If animation effects are paramount to your design, then provide an option for those to be disabled as per the user’s request. 

Follow best practices with the header, navigation, and footer placements. Displaying these in hard-to-find areas can provide more difficulty for those with and without visual impairments. 

Last, one of the most straightforward considerations for those with visual impairments is whether they can manually adapt the page content to be more readable, which is usually done with their browser’s built-in zoom functionality. Therefore, as long as the page content is not locked at 100% zoom, it could be considered accessible under the WCAG.

Colour and accessibility

As many of you know, colour can be a powerful tool for displaying information. For example, red is often associated with an error, whilst green is associated with success — you wouldn’t have an “Out of Stock” label presented in green, and you wouldn’t have an “In Stock” label in red.

But colour and accessibility go much deeper than association, with one of the most important factors being the colour contrast ratio. 

The colour contrast ratio refers to the ratio between the colour of the text and the colour of the background, which must meet minimum levels to ensure legibility to visual-impaired and colour-blind users. 

Traditionally, black text on a white background will have the strongest contrast ratio, as they’re the darkest and lightest colours available, so we would always recommend starting with this as your default option. 

However, as an already established brand, you may have a diverse palette that you wish to explore within your website. For example, your brand’s colour palette may feature shades of pinks and greens, but paired together these wouldn’t always meet the accessibility guidelines. We would recommend using online tools such as WebAIM’s Colour Contrast Ratio checker, or even Coolors.co, which proposes the nearest match if your colours fail the checker. 

For new brands looking to develop their own identity, it’s worth checking the contrast ratio of your preferred palette before signing off. This will ensure you’re meeting the requirements from the very beginning. 

Textual elements and accessibility

For many sites, most information conveyed to users is likely to be in a textual format (to name a few, this could be: product titles, prices, product descriptions, image captions, etc.). As such, when styling these, we must take extra measures to ensure accessibility requirements are met.

Your font choices play an important role in accessibility. And whilst this isn’t as simple as choosing one style over another, as the simplicity of one may improve the readability for a user with visual impairments, whilst a font that’s too simple may cause difficulty for a user with dyslexia to establish the individual characters. 

When choosing a typeface for your website, we would recommend that you think about what’s appropriate for your audience, but don’t let the typeface be the driving factor of your brand identity. Readability and accessibility should take priority. Avoid decorative or handwritten typefaces as these styles often have complex and ambiguous character designs; avoid “imposter letters” – letters designed of a simple shape to others, such as uppercase “I’s”, the number “1”, and lowercase “L’s”.

Whilst this may seem quite daunting, the good news is you don’t have to invest in a custom font to make your content more accessible. Many widely available fonts with Google or Adobe score highly for web accessibility. 

Another thing to note is how the text is presented on the screen. For example, your font sizes, weight, and spacing.

Increasing the spacing between paragraphs, lines, and words can ensure the information is easier to absorb for people with visual and cognitive impairments – such as dyslexia or low vision. 

Whilst the font size and weight play an important role even for users without any impairments. And whilst the WCAG doesn’t establish a minimum font size allowance, 16px has been set as the industry standard, with 12px established as the minimum – even for long paragraphs. 

Finally, it’s important to allow these styling attributes to be adjustable by the end user to better suit their needs.

Accessibility plugins and apps

Ensuring your website meets the WCAG can feel like a tedious project and whilst the use of an accessibility plug-and-play may seem tempting, we would advise against it. 

These solutions may seem like a ‘one-and-done’ to all things accessible, as they’re often promoting the ability to ensure compliance with a small amount of code. They can often provide a false sense of security; In most cases, these plugins render a button, which requires someone to manually adjust to meet their visual requirements. This often defeats their initial purpose, and ultimately these plugins do not fix the underlining accessibility issues but rather mask it. 

Conclusion

These are just a few ways you can aid your website to comply with WCAG. But of course, there are plenty more opportunities to comply, and we’d always recommend you audit your own ecommerce websites to find the issues and complete usability testing.

If you’d like to know more about this topic, or how Velstar can support you by complying with WCAG, then please get in touch.