Four Tips For a More Accessible Ecommerce Website

Written by Ben Brake - UX Designer

The world is becoming increasingly more focused on the accessibility of physical spaces, but the digital world still seems to be lagging behind. Websites need to be more inclusive to a wide variety of users, especially those with physical limitations. 

When a company is building a physical space, there are numerous agencies and processes designed to ensure accessibility is an essential part of the process. While many of these standards have web counterparts, they are much harder to enforce due to the sheer size of the internet. Therefore, the duty falls on the digital creators to incorporate important accessibility measures in their content.

Today, we take that a step further to provide you with 4 changes you can make to ensure your website is accessible. The best part of these changes is that they improve usability for all of your users.

But before we dive in, a quick primer on web accessibility:

Categories of impairments

Visual - Colour blindness, Low Vision, Blindness
Auditory - Hard of hearing, Deafness
Physical - Amputation, Arthritis, Paralysis, Repetitive Stress Injuries
Cognitive - ADHD, Autism Spectrum Disorder, Mental Health disabilities (anxiety, schizophrenia, etc), Memory Impairments, Perceptual Disabilities
[2] Adapted from WAI Accessibility guidelines

Web Content Accessibility Guidelines

The Web Content Accessibility Guidelines (WCAG) were established by the Web Accessibility Initiative (WAI) to create an enforceable standard for accessibility in the web. Most of the rules are segmented into three tiers, A, AA, and AAA. These three tiers are separated by the role of the website. For example, all government websites are expected to adhere to AAA standards, because they are essential services. For the duration of this article, we will make recommendations to meet AA compliance. 

Four changes you can make today to improve your ecommerce website accessibility

1. Writing Copy

Writing clear, concise copy makes your website easier to use for people with cognitive impairments. William Strunk, author of Elements of Style writes: “A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.” This relentless editing and paring of unnecessary words will help all of your users with comprehension. 

2. Type Sizes

Using that light sans serif font in 11pt may look great for your minimalist aesthetic, but if users can’t read it, then the copy you just wrote won’t be readable.

While there is no minimum font size specified for Web Content Accessibility Guidelines (WCAG) compliance, your body text (what you’re reading right now) it is recommended to be a minimum of 16pt in order to assure best reading experience. It is also important to allow users to resize all text on the page up to 200% of its original size. 

1. The copy here is needlessly complicated and technical, and at 11px font size, it’s nearly impossible to read what the page says.

2. The font size has been increased to 16px, and the copy has been shortened and simplified to make it more accessible.

3. Colour & Contrast

Colour blindness affects nearly 8% of all men and 0.5% of women globally. If you are exclusively using colour as a signifier, these users will become frustrated, and potentially abandon their purchase altogether.

Consider your error messaging, and how relying on colour alone to communicate an error creates problems for colour blind users. Find more ways to communicate with users. Add text error messages for clarity. Use contrast to communicate hierarchy.

1. This error screen points out that the user has incorrectly entered their email address, or does it?

2. Users with deuteranomaly (a particular color blindness) won’t be able to see the error message, becoming confused and frustrated.

3. A redesign of the initial error screen. This time we’ve added a clear message, and also found a second way to highlight the error.

4. The colour blind user has no barrier to recognizing the error and completes their registration.

Contrast, or a lack thereof, impacts users with any visual impairments. If there is insufficient contrast between your background and your body copy, it won’t be readable. There are many online tools to gauge the contrast between colour on your website, we use https://webaim.org/resources/contrastchecker/

Check whether your colours are WCAG compliant for contrast. While a ratio of 4.41:1 for body text is the minimum for WCAG 2.0 [3], a ratio of 7:1 will ensure that users with 20/40 vision will be able to distinguish colours, and read your text.

1. With a contrast ratio of 1.43:1, it is almost impossible for the user to read the content on this page.

2. With the font size increased and a contrast ratio now at 15.9:1, this page is now considerably more accessible for all users.

4. Forms

Much of what makes forms accessible is done in development, making sure that forms can be used by screen readers, and people with motor based impairments.

One way to increase accessibility is to ensure that the form label is consistently present. For people with cognitive impairments, this is key. If your form label disappears when the user begins writing, and they forget, this can create frustration and pain.

1. When the user begins typing their email, any context disappears. For many users, this can create confusion.

2. The label shifts into a box, reminding the user what they are supposed to enter.

3. The label is omnipresent, providing the user with a clear indication of what is required 

Conclusion

Similar to creating good design for physical spaces and allowing all types of individuals to come and go freely, it’s important to see the value and necessity of making digital places inclusive. Most of the changes can be made fairly easily. Creating a roadmap for your website that includes auditing and improving and testing your website’s accessibility will set you towards more sales, and higher conversion rates. Aside from that, it’s just the right thing to do. You’ve spent time and money creating great products, now make sure everyone can see them!