21-Aug-19 | News

Building for Accessibility: How to Make Sure Everyone Can Use Your Store

As developers and online store owners, we often treat accessibility as a bonus.  But it’s really a requirement! Each piece of a website build should be considered from the perspective of all site visitors, no matter their age, capabilities, or impairments. After all, it’s important that everyone can easily use your store and purchase your products.

When it comes down to it, accessible content is defined as:

  1. Perceivable.  All information must be presented in ways that users can perceive, no matter what user agents (browsers, screen readers, or other software) they operate or what disabilities they have.
  2. Operable.  Visitors need to be able to navigate around the site and use all functionality even if they don’t utilize a traditional mouse.
  3. Understandable.  Content, forms, menus, links, and other site components need to be easily understood by users.
  4. Robust.  A variety of tools, including screen readers, voice recognition software, and braille readers should all be able to read your content.

Making Accessibility a Focus

An accessible website starts with the right mindset.  It’s important to get everyone involved – the developer, the business owner, the content manager, etc. – on the same page.  

How to Make Your eCommerce Site Accessible

  • Accessible Images

Does it convey straightforward information, e.g. a simple picture or icon?
Does it convey complicated information, e.g. an infographic or chart?
Is it solely decorative, e.g. a small flower element used as part of the site design?

  • Accessible Links

The important thing to consider when adding links is to always tell your site visitors what’s going to happen when they click. In the case of images, your alt attribute will be your link text.

  • Accessible Fonts

The first thing you want to consider is font size.  It’s important that your text can easily be read by people who are partially blind or who simply have trouble seeing smaller font sizes. Consider the font choices that you make, as well.  Cursive or intricate fonts are often very difficult to read and should only be used occasionally.

  • Accessible Colours

Not everyone sees colour the same way.  In fact, approximately 8% of men and 0.5% of women have some form of colour blindness.  So, your website should be entirely functional and usable in greyscale.  Contrast is a big consideration for web accessibility. An important rule to keep in mind: Don’t rely on colour alone.  Shapes and symbols can help communicate the same message.

  • Accessible Headings

Remember that headings aren’t just there for size – they’re an important structural component of your content.  Using proper heading elements allow screen readers to quickly identify headings and sections throughout the page and navigate effectively.

  • Accessible Forms

A good place to start is by using labels. A label should tell your users what to fill out (e.g. Email Address) while the placeholder should share how to fill out the field (e.g. name@example.com).  Make sure that any required fields are clearly labelled and that instructions (especially on formatting requirements for dates, phone numbers, etc.) are outlined in a way that’s easy to understand.

  • Accessible Videos

Make sure you add captions to your videos, which will help those that are deaf or hard-of-hearing to understand the audio. Adding audio descriptions is an important step to help those who are blind understand what’s happening in your video. 

  • Keyboard Navigation

It is important that your website can be operated using only a keyboard.  This is especially helpful for people with motor impairments who may have difficulty using a traditional mouse. 

Since the Tab button is used to navigate throughout the page, it’s important that your website navigation is set up so that it follows the visual flow of the page (left to right, top to bottom).  Test your website to ensure that you’re able to navigate with the Tab button in the following order:

  1. Header
  2. Main navigation menu
  3. Any page navigation and links
  4. Footer

This link takes you to the main article which you can read more in details about each accessibility point