Team Madcraft
Let’s face it: when it comes to accessibility, many eCommerce websites think they’ve nailed it, but they’re often just putting on a blindfold and crossing their fingers. We get it. The idea of WCAG (Web Content Accessibility Guidelines) compliance can seem like a giant, intimidating monster lurking under your eCommerce store’s polished surface. But fear not! You don’t have to be a web accessibility guru to avoid common faux pas that could send your site down the slippery slope of user frustration.
In this blog, we’ll have a bit of fun while we point out some of the biggest accessibility mistakes even the most well-meaning eCommerce sites make. Grab a snack and get ready for some laughs because when it comes to accessibility, it’s important to know what not to do just as much as it is to know what to do!
You know that little thing called alt text? It’s crucial for accessibility, especially for visually impaired users who rely on screen readers. Yet, time and again, we see websites that treat alt text like that forgotten vegetable in the back of your fridge—just not that important. Alt text is your chance to describe what’s in an image, so don’t leave it blank or just slap on a generic description like “image1.jpg.”
Faux Pas:
“Alt Text: Image of product.”
“Alt Text: Image”
How to Avoid It:
Be specific! Describe the image. For a product shot, use something like:
“Alt Text: Red running shoes with white soles and black laces.”
Remember, the goal is to give users as much context as possible about what’s in the image, so they don’t feel left out.
You’re really proud of that sleek color palette you spent hours picking out—those shades of purple and green are so on-brand. But before you pop the champagne, let’s make sure your color choices don’t leave colorblind users feeling like they’re on a scavenger hunt in the dark.
Faux Pas:
Having text that’s dark gray on black or red text on green buttons. (Spoiler: Red-green color blindness is a thing.)
How to Avoid It:
Make sure there’s enough contrast between text and background colors. Use tools like the Contrast Checker to make sure your color combinations meet the minimum WCAG guidelines for contrast (4.5:1 for normal text, 3:1 for large text). Keep in mind that 1 in 12 men (and 1 in 200 women) have some form of color blindness, so you’ll want to accommodate them with contrasting colors that are readable for everyone!
Did you know that keyboard users can’t “click” like the rest of us? That’s right—without a mouse, people navigate your site using the Tab key. So, if you’re not paying attention to focus indicators (the little outline that shows where someone is on the page), it’s like you’re hosting a party but forgot to put up any signage.
Faux Pas:
Your site looks great, but when you tab through it, nothing happens. It’s a guessing game of “Where am I?”
How to Avoid It:
Ensure all interactive elements like buttons, links, and form fields are focusable and that users can see which element they’re focused on. Use clear, visible focus indicators (like a border or outline) so people know where they are on the page. This will make life way easier for keyboard-only users and improve the overall experience.
Imagine you’re at the checkout page, everything’s filled out, and you click the big “Place Order” button… only to be met with a silent, blank page. Where’s the error message? Did you just lose your order? Is it a tech apocalypse? Guess what? This can happen to people with disabilities if error messages aren’t properly communicated.
Faux Pas:
Nothing appears when a user makes a mistake in the form fields, leaving them confused and frustrated. Or worse—there’s a vague error message like “Error: Something went wrong.”
How to Avoid It:
Provide clear, descriptive error messages that help users understand what went wrong and how to fix it. For example, if they forget to fill in their shipping address, say:
“Error: Please provide a shipping address so we can complete your order.”
Also, make sure these error messages are screen-reader-friendly for those using assistive technology.
In the age of TikTok and YouTube, video content is a must for eCommerce sites—whether it’s product demos, reviews, or tutorials. But, if you’re leaving out captions, you’re essentially showing your users a silent movie. Imagine trying to buy a product without hearing about it—or worse, seeing important details written in the captions. Not so fun, right?
Faux Pas:
A product video with no captions or transcripts, leaving users in the dark about what’s being said or shown.
How to Avoid It:
Add captions or transcripts to all your video content. Captions help people with hearing impairments, and they also make videos more accessible to non-native speakers or users in quiet environments. It’s easy to use automated services like YouTube’s captions or other video platforms that generate them for you—just make sure they’re accurate!
If your link text is as vague as “Click here,” you might as well be telling users to go down a dark alley. Descriptive, context-rich link text is important for accessibility, especially for those who rely on screen readers.
Faux Pas:
“Click here”
“More details”
How to Avoid It:
Make sure your link text describes where the link will take the user. Instead of “Click here,” use something like:
“Learn more about our return policy.”
This way, users know exactly what to expect when they click on a link.
Infinite scrolling is cool—until it’s not. While it seems like a great idea to keep users engaged with endless content, it can be frustrating for users with disabilities, especially those using screen readers or keyboard navigation.
Faux Pas:
Users can’t navigate through your content properly because of infinite scrolling that doesn’t let them know when new content is loaded.
How to Avoid It:
Instead of infinite scrolling, consider paginated content or adding “Load more” buttons that allow users to choose when they want to see more content. This ensures your content is navigable and accessible to all.
Creating an accessible eCommerce site is more than just ticking boxes—it’s about making your store welcoming to everyone. Avoiding these common mistakes will help you build a more inclusive site that serves a broader audience. Plus, you’ll get some serious street cred with users and search engines alike!
So, take a look at your website today and make sure you’re not committing any of these accessibility faux pas and let Madcraft do it for you
