Many eCommerce businesses make most of their income during the holiday shopping season, so your website must perform to the best of its ability during the Black Friday and Cyber Monday promotions. Web Accessibility is probably the last thing on your mind when you’re already in a frenzy to ensure you’re maximizing every visit to your website. However, you may be leaving money on the table or making yourself vulnerable to expensive litigation if you don’t stay diligent with your digital inclusivity.
For many customers—especially those with disabilities—shopping online is their primary option. If your website isn’t accessible, you’re alienating a significant portion of your audience (up to 20%) and potentially violating the Americans with Disabilities Act (ADA).
To help you prepare for the holiday rush, let’s go over five common web accessibility mistakes businesses make during holiday promotions and how you can avoid them.
Insufficient Alt Text for Images
Holiday promotions often rely on eye-catching images, banners, and product displays. However, if those images lack appropriate alt text, customers using screen readers won’t be able to understand their content. Alt text (short for alternative text) provides a textual description of an image that’s accessible to screen reader users.
Why It Matters
Alt text is essential for individuals with visual impairments. If a visually impaired customer is browsing your site and encounters an image without a proper description, they’ll have no idea what’s being displayed. Imagine running a huge Black Friday sale, but your best deals are hidden from a portion of your audience simply because your images aren’t described.
How to Fix It
As you add promotional banners and products to the website, always make sure you’re adding alt text to the images. Here’s an example:
<img src=" winter-sale-banner.jpg" alt=" Banner for Winter Sale - Up to 50% off jackets and coats">Do not use image file names or vague text such as “sale-img” or “Sale Image”. Make sure the alt text contains enough information that the user understands the purpose of the image and contains any words that appear on the image.
Poor Color Contrast
With holiday promotions comes festive design—bright colors, eye-catching buttons, and themed decorations. While these designs may look great, they often fail color contrast standards. Having adequate color contrast is not only good for color-blind users, but it also makes the website easier for everyone to navigate.
Why It Matters
According to WCAG, the minimum contrast ratio between text and background should be at least 4.5:1 for normal text and 3:1 for larger text. When the contrast is too low, customers with low vision or color blindness may struggle to read important information, such as product details or discount codes.
How to Fix It
Use tools like the WebAIM Contrast Checker to ensure your color choices meet the WCAG contrast ratio guidelines. For example, a light gray text on a white background will likely fail the contrast test, but switching to a darker gray or black can make a big difference.
Here’s an example of a common mistake and how to correct it:
<!-- Poor contrast -->
<p style="color: #cccccc; background-color: #ffffff;">50% off all products!</p>
<!-- Better contrast -->
<p style="color: #000000; background-color: #ffffff;">50% off all products!</p>Pay attention to your text color, button colors, and even the contrast of smaller elements like icons.
InaccessibleNavigation and Controls
Most store owners don’t consider that some users do not navigate their website with a mouse. Even some users without disabilities prefer to use other input methods to quickly navigate some sections of your website.
Why It Matters
Blind and motor-impaired users rely on the keyboard, gestures, or voice commands to navigate your website. If your navigation, contact forms, category filters, and product pages are not properly coded to support these input methods, these users will be denied equal access to the website and may not be able to make a purchase with you at all, losing you a valuable customer and potentially damaging your reputation.
How to Fix It
Regularly test the functional portions of your website with a keyboard. Attempt to start at the homepage, navigate to a category page, use the category filters, add/remove product quantities, and select product options without your mouse. If you encounter a problem with an element, it’s likely not coded using the correct element. You can force an element to receive keyboard focus using the tabindex attribute. The role="button" attribute will help users navigating with assistive technology better understand the purpose of the control:
<span class="swatch-button" tabindex="0" role="button">Beige</span>Better yet, use the correct semantic HTML tag to accomplish this:
<button class="swatch-button">Beige</button>Semantic HTML helps users relying on assistive technology understand the purpose of controls and also helps Google better understand the structure of your website:
<nav>
<a href="/products">All products</a>
<a href="/products/sale">Sale products</a>
<a href="/contact">Contact Us</a>
</nav>Missing Captions on Promotional Videos
Videos are an excellent way to showcase products, promote deals, or explain services during the holiday season. However, many businesses forget to include captions, making the content inaccessible to users who are deaf or hard of hearing.
Why It Matters
Videos contain a lot of important information in the form of spoken words and visual cues. Both blind and deaf users rely on accessible closed captions (not just subtitles) to understand the content of the video. Also, some users may be in noisy environments and are unable to hear the video.
How to Fix It
Most popular video platforms have auto-captioning features, but these tend to just subtitle the video rather than create truly accessible closed captions. There are many cheap and easy closed captioning services, such as Rev.com, that have quick turnarounds.
Here’s how you implement closed captions from an external service:
<video controls>
<source src="promo-video.mp4" type="video/mp4">
<track kind="captions" src="captions_en.vtt" srclang="en" label="English">
Your browser does not support the video tag.
</video>Always test the captions to make sure they sync properly with the video and cover both spoken dialogue and important sound effects.
Over-reliance on Automated Accessibility Overlays
It might seem tempting to use automated accessibility overlays, especially during the hectic holiday season. These are often marketed as one-click solutions to make your website accessible. The Department of Justice has issued clear guidance that these solutions are inadequate in addressing web accessibility, and they may get you targeted with litigation.
Why It Matters
Automated accessibility overlays claim to fix all accessibility issues on a website, but they usually fail to address the root problems. Blind users are outspoken that they dislike these solutions as they tend to interfere with the assistive technologies they’re already comfortable with. We’ve also seen these solutions specifically called out in lawsuits as a reason for being targeted.
How to Fix It
The best way to ensure your site is accessible is by addressing the core issues in your code and design. Automated tools can help identify problems, but manual reviews and fixes are essential. Invest in manual audits and focus on meeting the WCAG guidelines through thoughtful design and coding practices.
Here’s an example of using a reliable method instead of relying on an
<!-- Instead of using an overlay for images, provide clear alt text -->
<img src= "holiday-product.jpg" alt= "Red winter coat with a 30% off discount tag">Automated tools tend to use AI to label images and controls and often misrepresent content on the website, leading to a potentially overtly harmful experience.
Conclusion
As you gear up for holiday promotions, make sure accessibility is at the top of your checklist. By avoiding these common mistakes—insufficient alt text, poor color contrast, inaccessible navigation, missing captions, and over-reliance on automated tools—you’ll ensure that your website is welcoming and easy to use for everyone.
Not only does improving web accessibility help you reach a wider audience, but it also protects your business from legal risks and ensures compliance with WCAG and ADA standards. Taking the time to implement these changes now will pay off during the holiday rush and beyond.
If you’re unsure about the accessibility of your site, reach out to 216digital using the contact form below for a free evaluation.