10 ways to improve accessibility in your online store

Close your eyes and try to type “Accessibility.” Can you do it? Or did you end up with a few too many c’s, an x, and no t?

Now imagine trying to search, view, and purchase a product without your eyesight, your mouse, or your speedy internet connection.

Challenging prospect, isn’t it? And yet, it’s the reality for more than 15% of the world’s population living with a disability.

Setting aside the fact that people with disabilities deserve the same access to information as everyone else, they also have significant purchasing power. Ignoring and excluding them from online spaces (especially in ecommerce) isn’t just discriminatory, it’s bad business.

Though it can take considerable time and resources to make an online store 100% accessible (in fact, it’s been argued such a thing doesn’t exist), there’s a lot you can do to improve accessibility and provide a better experience for everyone.

Allow for keyboard navigation

First things first: for a website to be truly accessible, it has to work without a mouse. This is because many users with disabilities rely on assistive technologies like screen readers to navigate the web. These devices have keyboards, not trackpads or mice.

The primary feature of keyboard navigation is the ability to move around a page using the tab key. That means your goal should be to ensure that all links, buttons, forms, and content in your store can be accessed using tab.

There are a number of technical ways to accomplish this, but the easiest is to use a theme that supports it! Our Empire and Pacific Shopify themes are both fully navigable via mouse, keyboard, and touch devices, and we’re adding this to our other themes as well.

Structure your content carefully

Imagine trying to navigate and make sense of an online store without any formatting. There would be nothing to tell you that a heading is a heading or a menu is a menu, no cues to help you distinguish between links, forms, and add-to-cart buttons.

Formatting is important for everyone, but it’s imperative for people using screen readers. By ensuring your site has clear, properly tagged headings and subheadings, you’ll make it much easier for screen readers to interpret pages, and for users to get where they want to go.

Make a habit of alt text

Alt text (sometimes called alt attributes or alt tags) is used to describe the appearance and function of images on the web. It’s displayed in place of an image if an image file can’t be loaded, and it’s used by screen readers looking to “read” the image to their users.

Whether you're adding an image to a product page, updating your slideshow imagery, or embedding a video in a blog post, you need to include alt text. Try to describe the image as specifically as possible without getting too verbose (most screen readers cut off alt text at around 125 characters), and don’t neglect icons and form buttons.

Write helpful link text

“Click here” and “check this out” are everywhere online. It makes sense—the goal of most links is to get you to click, and “click here” makes the instruction pretty clear.

The problem is these phrases aren’t very descriptive. They don’t provide any information about what will happen if a user clicks. As accessibility advocate Mark Caron explains, “‘Click here’ may sound actionable, but user research suggests that it will, instead, slow the user down and increase cognitive load.”

Rather than writing “click here” every time you want to include a link, it’s much better to write the sentence as you normally would, and link relevant keywords. For example, “To learn more about us, click here” could be rewritten as “Visit our About page to learn more.”

Use high-contrast colours

Contrast is key when it comes to accessibility. Low-contrast colours can strain the eye and make text and graphics hard to distinguish (and therefore understand).

The Web Content Accessibility Guidelines (WCAG) recommend a minimum “luminosity ratio” of 3:1 for larger text and 4.5:1 for smaller text, where 1:1 is white on white and 1:21 is white on black. What you’re trying to avoid is creating a palette where the shades are too similar in hue and saturation, like this:

It's better to opt for a high-contrast palette, as above, as we've done in our Startup Home demo, which uses bold shades of orange and blue against a white background.

CheckMyColours or Google’s Color Contrast Analyzer are both great tools for testing the contrast ratios of page components.

Avoid using colour as a sole organizer

“Use the green button if you agree or the red button if you don’t.” That’s not going to work for the 4.5% of the population that suffers from red/green colour blindness, for whom both buttons would appear brown.

Rather than using colour alone to indicate required fields and sale prices, use asterisks and copy to highlight what’s on sale. If you use colour swatches on product pages, consider adding colour labels to the selection options, or at the very least, providing alt-text for the swatches.

Use large typefaces

Many older adults and people with reduced vision have difficulty reading small text and selecting links and form elements. Fortunately, most web browsers now allow you to enlarge text, zooming to 200%.

Even so, it’s important to use large, legible typefaces, and to ensure that your site scales text appropriately. Check not only that your font sizes scale but also that it reflows or wraps properly so users aren’t forced to scroll back and forth to read resized content.

Avoid autoplay

We can all agree that autoplay music and videos are super annoying. But it’s an even bigger issue when we’re talking about accessibility.

Fast-moving animations can pose serious problems for people with conditions like ADHD and epilepsy. They overwhelm people with cognitive disabilities, and drag down page load speeds for people with slow internet connections. Try to avoid elements that start without the user prompting them.

Caption video and audio

According to the World Health Organization, 466 million people worldwide have disabling hearing loss. This means most video and audio content online is effectively off-limits to them.

The easiest way to overcome this barrier and reach hearing-impaired users is to include a text alternative—most commonly, captions on a video, or a transcript of a podcast. If you have it in your budget, you might also consider offering sign-language versions of any video or audio content on your site.

Simplify your content

Lastly, a word about content. While many of the ideas in this blog post deal with site design, it’s also hugely important to make your content accessible.

This means using simple language and writing short sentences and paragraphs. It means avoiding technical language, jargon, and non-literal expressions as much as possible, and writing out acronyms and abbreviations.

This will help not only those with literacy or cognitive challenges, but also those who may not be fluent in your store’s language or industry lingo.

Find more helpful articles in The ultimate guide to starting an online store.