Regardless of if you're launching a new website or looking to amplify your current website, accessibility should be a huge consideration. Otherwise, you'll run the risk of limiting access to your website's content, and for ecommerce-based websites, this could lead to a lot fewer conversions.
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 ‘Web Content Accessibility Guidelines, or WCAG for short. Then in 2008, as technology advanced, an updated guideline was published known as WCAG 2.0. This was followed by the WCAG 2.1 in 2018, and most recently with WCAG 2.2 in 2023.
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.2.
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 page design can set the tone and influence the user’s buying journey, so it must be accessible for all users, regardless of impairments.
We're not stating that every website has to follow the same design. Instead, you can look at this as an opportunity to explore designs whilst still following best practices and WCAG. Below we’ve set out a few ways you can maintain your visual aesthetic whilst complying with WCAG recommendations.
First, avoid excessive use of animations and/or interactive effects, as these can create issues for those with reading difficulties. If animation effects are paramount to your design, then you should provide an option for those to be disabled as per the user's request.
Secondly, you should always 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 difference between the colour of the text and the colour of the background, which must meet minimum levels to ensure legibility to visually-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 colour palette that you wish to explore within your website. For example, your brand's colour palette may feature shades of pinks and greens – however when these are paired together they wouldn't always meet the accessibility guidelines.
To help you out, we would recommend using online tools such as WebAIM's Colour Contrast Ratio checker (which will show you a pass/fail for your chosen colours) or even Coolors.co, which proposes the nearest match if your colours fail the checker.
If you’re a new brand looking to develop your 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, you must take extra measures to ensure accessibility requirements are met.
Your font choices play an important role in accessibility. But this isn’t as simple as just choosing one style over another. Whilst the simplicity of one font may improve the readability for a user with visual impairments, if a font is too simple it 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. However, don't let the typeface be the driving factor of your brand identity. Readability and accessibility should always take priority.
One top tip is to avoid decorative or handwritten typefaces, as these styles often have complex and ambiguous character designs. You should also avoid "imposter letters", which are letters designed with a simple shape that’s too similar to others. For example, an uppercase "i", the number "1", and lowercase "L" could read as “I,1,l” which is difficult to distinguish with or without additional needs.
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, which involves checking 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.
The font size and weight play an important role even for users without any additional needs. And whilst the WCAG doesn't strictly mandate 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. However, 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 underlying accessibility issues – but rather mask them.
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.
Your Shopify Plus Partner Agency
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.
