Making your online store more accessible can seem like a daunting task, but even small changes can make improvements. Here are 7 accessibility tips for eCommerce sites:
1. Make sure your site can be easily navigated using a keyboard
Screen reader users, users with mobility issues, and users of other assistive technology depend on keyboard navigation to move through website content. It’s easy to begin testing whether your site is keyboard accessible. Refresh the page of your site, then use only the tab key and the enter key to try and navigate through your site. Tabbing will focus on the interactable elements of a page (link, buttons, input fields, and so on).
If your site has convenient skip links, your first Tab will reveal a “skip to menu” or “skip to content” link. These links allow keyboard users to skip over repeated information (like the main menu) if they’re just tabbing. Visually, these are usually tucked into the upper-left-hand corner of the browser.
Ideally, you’ll know exactly where you are on a page from the focus indication. Focus indication is generally an outline of some sort around the elements (and buttons and links should have the same effect as they would when you hover over them). If you don’t have a focus indication or it’s not obvious enough (causing you to get lost on the page easily), this indicates a poor user experience.
You should be able to navigate through all parts of your page – the menu and any clickable items. If you discover any issues, you may need to consult your developer about a fix.
2. Use alt text on images
Alt text is a description of the purpose of an image that gets read out loud to people who use screen readers. Good alt text describes the image.
Alt text on product photos can get tricky, since you want to make sure you have enough detail, but not too much, and that each image has its own distinct description. For a more detailed tutorial, read our post on “How to write effective product alt text for accessibility“.
All images except for decorative images – like a fancy swirl to separate paragraphs – should have alt text.
Alt text can really help improve your SEO as well as accessibility. Just don’t try to keyword stuff.
3. Optimize your site for screen readers
There are a few key things you can do to optimize your site for screen readers. First, make sure your site is well-organized and easy to navigate. Use clear, concise language and structure your content in a logical way.
Second, use proper headings and labeling to help users understand your content. This means using H-tags to structure your content (not bold or italics), and properly “nesting” those tags without skipping any tag levels. There should only be one H1 — the page, post or product title. H3’s should only have an H2 or an H3 above them, and only an H3 or an H4 below them.
Finally, make sure that your link text (the text used in lieu of a raw link) clearly conveys where the user will go WITHOUT depending on any other text. Link text should never be vague like “click here”, but specific like “to find out more, [link] read our Reviews.” Not only is this crucial for screen reader users who will sometimes surf through links on a page, it provides a better user experience for all users when they know exactly what will happen and where they’ll go when clicking a link.
4. Provide clear error and success messages
eCommerce sites have a lot of user interaction. When a user who has cognitive disabilities or is blind has missing or wrong info in a form, it’s often hard for them to try to find out what the problem is. Often the error message is just: “You have an error.”
Make sure that your login page, your cart and payment details page, and even your contact form all have clear error messages about what is missing or wrong. Instead of “You have an error” find a way to give specific info about the error, like “Zip code is required.”
It’s also just as important for users to know they’ve succeeded in their orders on eCommerce sites. Some of these messages are vague or overly cutesy like “You got it!” Sometimes nothing affirmative even happens at all!
Make sure your users clearly know their order has successfully gone through.
5. Provide clarity of process
Clarity of process is vital for all users. They must know the cause and effect of every step of the shopping process. “This happened and so this will happen next.” If your checkout has multiple steps, make user a user known what step they’re on (and even more ideally, how many step they’ll need to take – eg, Step 1 of 5). This gives your users confidence.
When a user has submitted their order, make sure they know what happens next. “Your order is completed! You should receive an email verification.” Or, “Your order is pending, we will text you when it has been confirmed.” And of course, “Your email has been received, you should hear back from us within 48 hours.” Leaving your users in the dark in terms of “Now what?” is a good way to create anxiety which will prevent users from making repeated purchases.
6. Provide captions or a transcript for videos
If you include videos on your website, make sure that they have captions and/or a transcript available to make them accessible for people who are deaf or hard of hearing. YouTube and other video platforms offer caption generation by artificial intelligence. These captions can be generated when you upload the video, but should be checked for accuracy.
Often, things that you do on your site to improve accessibility for people with disabilities also help people without disabilities. Adding captions is one of those things, as analytics shows that around 80% of people with no hearing impairment who watch videos on social media or websites do so with the sound off.
7. Use clear and concise language
Many people have less visible disabilities like ADHD, anxiety and depression, cognitive impairments and reading disabilities. For all of these people, long and convoluted blocks of text can represent barriers. The average reading level in the United States is about eight grade, and (unless you are running a highly technical site) the closer you can get the reading level down to third or fourth grade, the better.
Your website is not the place to try to impress people with your vocabulary and brilliance. Everyone will thank you for using shorter, more clear language.
Summary
- Make sure your site can be easily navigated using a keyboard
- Use alt text on images
- Optimize your site for screen readers
- Provide clear error and success messages
- Provide clarity of process
- Provide captions or a transcript for videos
- Use clear and concise language
These seven tips are a great start for making your eCommerce website more accessible for people with disabilities. If you have questions, or need help with accessibility for your store, don’t hesitate to contact us.
Our Accessibility Maintenance Plans help you remove barriers for people with disabilities and meet legal requirements with confidence.