Running an online store comes with all sorts of challenges—from keeping up with trends, to updating product photos, to making sure your orders go out on time. But have you ever considered there might be challenges for your customers, too?
According to the World Health Organization, about 15% of the world’s population lives with a disability of some kind. That means 15% of your potential customers could use some sort of extra help to shop your store. To make your site useful and accessible to everyone (and why wouldn’t you want that?), you need to consider web accessibility.
According to our pals at Wikipedia, “Web accessibility refers to the inclusive practise of removing barriers that prevent interaction with or access to websites.”
Web accessibility isn’t a new concept. In fact, the first set of guidelines were compiled and released in 1995. Currently, the international standard is outlined in the Web Content Accessibility Guidelines (WCAG) 2.0. According to WCAG 2.0, websites should be perceivable, operable, understandable, and robust.
In general, web accessibility aims to address the needs of people who live with the following challenges: visual, motor/mobility, auditory, seizures, and cognitive/intellectual.
Making your online store accessible is not only beneficial to your customers but also to you. Better accessibility increases the number of people who can visit and shop your site, and as an added bonus your business will be perceived in a more positive light.
It can take considerable time and effort to make a website 100% accessible (we’re taking code changes). But there are some straightforward steps you can take right now to make your online store more accessible for all customers.
Add alt text to images
Alternative text (or “alt” text) is the text that shows up when an image doesn’t load or when you hover your cursor over an image. This is the text read by screen readers (an assistive technology used by people who are blind, visually impaired, illiterate, or have a learning disability). Not only does alt text increase your accessibility, it can improve your SEO.
Ensure that all your store’s important images have alt text that contains the message that the image is conveying. Also, name your image files to provide even more context. You do not need to include alt text if an image is purely for decoration.
Use high-contrast colours
Colour is an integral part of your store’s design. You put a lot of effort into choosing colours that fit with your brand, and you should also consider the impact of your colour choices on accessibility.
Contrast is super important when it comes to web accessibility. Low-colour contrast makes text or graphics harder to see and therefore more difficult to understand.
Pay special attention to the contrast of buttons and various calls-to-action across your store. These are important components you want everyone to be able to access.
The colours used in the image above have a low contrast, making it almost impossible to read. The image below has a high contrast that makes it easy to read and more accessible.
WebAIM has a great colour contrast checker that you can use to test the contrast ratio of components of your page. On their site, you’ll also find WCAG 2.0 contrast ratio guidelines.
To make your online store even more accessible, don’t use colour as a sole indicator or organizer. Many groups of people can benefit from the use of colour to categorize or sort information, but for those with vision challenges, these colours might not be helpful. Use additional visual separations such as white spaces or borders when organizing information.
Avoid “busy” animations
Certain animations can have a negative impact on web accessibility. Try to avoid animations that are overly distracting or too fast-moving. These can pose challenges for people with conditions such as ADHD or those who have trouble seeing.
Eliminate seizure risks
Do you have any content in your online store that could potentially cause a seizure? Things like flashing colours and lights, fast-moving patterns, or images that create the illusion of quick movement can all trigger seizures.
If you’re uncertain, the University of Maryland’s Trace Center has developed a helpful and free tool called PEAT that identifies potential seizure-inducing content.
Make link text more helpful
It’s basic instinct to type “click here” or “check this out” and hyperlink that text. After all, you’re commanding your user, and it’s what you want them to do. The issue here is that those snippets of text aren’t super instructive. They aren’t providing information on where you want users to go.
For example, rather than saying “To learn more about us, click here,” try saying, “To learn more about us, visit our story page.” Take a look at your links and the text you’re using to link. Is the text specific and helpful? If not, change it!
Choose accessible fonts
Fonts can make a significant impact on your online store’s accessibility. While font choice doesn’t impact a screen reader’s ability to read your page, those who don’t use a screen reader still might face some challenges.
Ensure your fonts are basic and easy to read—no wingdings or cursive, please. Use a limited number of fonts to reduce distractions. And avoid small fonts or too many font variations (italics, bold, etc.).
Look at the two examples below. One is cursive, small, and italicized. The other is a large basic font.
Simplify your language
Simplifying your language helps not only those with learning or literacy challenges but also those who may not be fluent in the language in which you conduct business.
Keep your language simple by writing short sentences and paragraphs. Avoid passive language as much as possible, and also avoid any esoteric jargon. Be sure to define any complex or technical terms, acronyms, and/or abbreviations. The more people who are able to understand your language, the better.
Rethink your slideshow
Slideshows are everywhere. Sadly, they aren’t all that accessible. Fortunately, there are things you can do to increase the accessibility of your slideshow.
First, turn off auto-rotate, or at the very least increase the amount of time each slide displays. Try to give customers as much control over the slideshow as possible. If they can pause the slideshow altogether, that’s even better.
Second, provide accessible controls. Make those arrows or “next” buttons visible by increasing their size and making use of contrast and borders.
Third, give each slide a clear purpose. If you’re using call-to-action buttons on your slides, make these buttons big enough and visible for all.
Include a text version of video and audio
Do you have audio or video content on your website? If so, you’ll want to include a text alternative that people can read on their own or use a screen reader to access. A text alternative can be anything from closed captions on a video to transcripts of a podcast.
Improving your online store’s web accessibility is a helpful step in making the web a more useful place for everyone. As an added bonus, it will help you improve your SEO and visibility, which will lead to more sales.
If you want to measure the accessibility of your online store, WAVE has an easy-to-digest web accessibility evaluation tool that pinpoints major areas of concern. All you have to do is type in your web address. Try it—we guarantee you’ll learn something!
Is there anything we missed? Is there something you’ve done to improve the accessibility of your online store? We’d love to hear about it in the comments.