ADA Compliance Archives - Page 5 of 11/Tag

Closed Captions for Online Video Content
With online video content becoming a cornerstone of business, marketing, and education, ensuring your videos are accessible to everyone is essential. One of the most effective ways to ensure your videos reach the widest audience possible is through closed captioning. But what exactly are closed captions? How do they work, and what actions must you take as a business or website owner? Let’s dive into everything you need to know about closed captions.

What Are Closed Captions?

Closed captions are text alternatives for words spoken in video or information conveyed through visual actions, designed to help people who are deaf or hard of hearing understand the content. Captions appear at the bottom of the frame and include the spoken dialogue and describe sound effects, music, or other audio cues critical to understanding the video. Closed captions can be toggled on and off by the video player, giving them control over how they experience the content.

Who Benefits From Closed Captions?

You might think closed captions are just for people with hearing impairments, but they benefit a much broader audience. Closed captions can help:
- Deaf and hard-of-hearing individuals: This is the primary group that closed captions serve, allowing them to access video content on an equal footing with hearing viewers.
- Non-native language speakers: Captions help people learning English or other languages follow along with the dialogue.
- People in noisy environments: Imagine watching a video in a busy coffee shop or on public transportation—captions make it possible to follow along even if you can’t hear the audio.
- People in quiet environments: Maybe you’re watching a video while a baby sleeps in the next room. With captions, you can follow the content without turning up the volume.
Closed Captions vs. Subtitles: What’s the Difference?

Though often used interchangeably, closed captions and subtitles aren’t quite the same. Subtitles are a text representation of the spoken words in a video. They benefit individuals with hearing impairments or people who can’t understand the spoken language but can otherwise visually perceive the content. For instance, subtitles often appear in foreign films. They don’t include sound effects or non-dialogue audio, which makes them less accessible for people who are deaf or hard of hearing.

On the other hand, closed captions include not just the dialogue but also sound effects and other crucial audio information, making them more comprehensive.

What are the Differences Between “Closed Captions” and “Open Captions”?

You’ve likely heard about “closed captions” and “open captions.” The critical difference between the two is control. Closed captions can be toggled on or off by the viewer, while open captions are always on—they’re embedded into the video file and cannot be turned off. While open captions may seem convenient, they don’t provide viewers the choice to disable them, which can sometimes detract from the viewing experience for those who don’t need them.

What Are the Legal Obligations for Closed Captioning?

As a website owner, business owner, or content creator, you must understand your legal obligations regarding closed captions. In the U.S., several laws and regulations address digital accessibility, including captioning for video content.

The ADA’s Requirements for Closed Captions

The Americans with Disabilities Act (ADA) states that businesses and organizations make their services accessible to people with disabilities. While the ADA doesn’t specifically mention closed captions, it requires that public-facing businesses and websites provide equal access to their services, which can include providing captions for video content.

The Department of Justice has provided guidance that websites should be accessible to everyone, and providing captions for videos is an integral part of ensuring your content meets the Web Content Accessibility Guidelines (WCAG), which help businesses comply with the ADA.

FCC Requirements for Closed Captions

For online video content that has aired on TV in the U.S., the Federal Communications Commission (FCC) requires closed captions. This regulation was expanded in 2012 with the introduction of the Twenty-First Century Communications and Video Accessibility Act (CVAA), which requires that any video programming aired on television with captions must include captions when distributed online.

This act means that if your business uses TV ads or commercials and also posts them online, they must be captioned. Even if your content hasn’t aired on TV, following FCC rules for captioning is a good best practice.

What Are the Benefits of Using Closed Captioning?

Adding closed captions to your videos isn’t just about legal compliance—it can offer significant benefits to your business:
- Expanded audience: Captioning your videos makes them accessible to more people, including those with hearing impairments, non-native speakers, and people in noisy or quiet environments.
- Improved SEO: Search engines can’t watch videos but can read captions. By adding captions, you give search engines more context to the relevance of your content, which can improve your rankings in search results.
- Better engagement: Captions can help viewers stay engaged with your content. Studies have shown that videos with captions have higher engagement compared to those without.
- Increased social media reach: Many social media platforms autoplay videos without sound. Captions can ensure your message gets across, even if the audio isn’t playing.
Best Practices for Closed Captioning

Here are some best practices for closed captioning video content:
- Ensure the captions are accurate: Inaccurate captions can confuse viewers or misrepresent your content. Invest in high-quality captioning services or use tools that offer high accuracy.
- Include non-dialogue audio: Remember that closed captions provide a complete audio experience for viewers who can’t hear. Include descriptions of music, sound effects, and other audio cues that are important to understanding the content.
- Use appropriate timing: Ensure that captions appear on-screen at the same time as dialogue or actions.
- Keep the text readable: Ensure the text is easy to read by using a legible font, high contrast between the text and background, and large enough size to be legible.
How to Add Captions to Videos

There are several ways to add captions to your videos, depending on the platform and your budget:
1. Automated captioning tools: Platforms like YouTube and Facebook offer automatic captioning, though these tools often require manual review to ensure accuracy.
2. Manual captioning: You can create captions manually if you have the resources. Many video editing tools allow you to add captions by entering the text.
3. Professional captioning services: You should invest in a professional service specializing in closed captioning for high-quality, accurate captions. These services usually charge based on the length of the video.
What If My Video Service Doesn’t Support Closed Captions?

If your platform doesn’t support closed captions, consider switching to one that does. Most popular video hosting services, including YouTube, Vimeo, and Wistia, provide captioning options. If switching platforms isn’t feasible, you can include a transcript of the video as an alternative. However, this is not a perfect substitute for closed captions, as transcripts don’t provide the real-time viewing experience that captions do.

Conclusion

Closed captions are a great way to make online video content accessible to everyone, and they offer many benefits, from legal compliance to better engagement and SEO. As a business or website owner, adding captions to your videos can broaden your audience, improve your content’s reach, and ensure you’re providing a digital experience that’s inclusive to everyone.

Remember to follow the ADA, FCC, and WCAG guidelines, and always aim for accuracy and readability when adding captions to your videos. If you’re unsure if your video content is leaving you vulnerable to expensive litigation or causing you to miss out on revenue, reach out to 216digital for a courtesy evaluation.
Bobby

September 24, 2024

How-to Guides, Legal Compliance, The Benefits of Web Accessibility

ADA Compliance, Closed caption, digital accessibility, How-to, WCAG, Web Accessibility, web development
How to Build Accessible Slideshows and Carousels
Slideshows and carousels can add style and organization to a website, but they often pose accessibility challenges. If not designed with care, they can be difficult for people with disabilities—especially those who use screen readers or rely on keyboard navigation—to interact with. The good news is that by following a few key practices, you can make sure your slideshows and carousels are accessible for everyone, enhancing user experience and making your site more inclusive. Let’s break it down step by step.

Why Accessibility Matters for Slideshows and Carousels

Before we dive into the “how,” let’s talk about the “why.” Making sure your slideshows are accessible isn’t just the right thing to do; it’s essential. Accessibility is about making sure everyone can use your website, and it helps you comply with important standards like the Web Content Accessibility Guidelines (WCAG).

If you skip over accessibility, you could end up frustrating visitors, losing potential customers, or even dealing with legal trouble. Plus, accessible content doesn’t just help those with disabilities—it actually improves the experience for all users and makes your site more welcoming.

Key Considerations for Accessible Slideshows

So, how do you make your slideshows and carousels accessible? Here are a few key things to keep in mind:

Keyboard Navigation

Not everyone uses a mouse to navigate a website—some people rely entirely on their keyboard. This means your slideshow should be easy to move through using just the keyboard without users getting stuck or confused.

Best Practices:
- Tab Key Navigation (WCAG SC 2.1.1): Make sure users can use the Tab key to move forward through the slides and Shift + Tab to move backward.
- Arrow Key Control (WCAG SC 2.1.2): Allow users to switch slides with the left and right arrow keys so they can navigate without getting lost.
- Visible Focus(WCAG SC 2.4.7): Ensure that buttons and interactive elements like arrows have visible focus indicators so keyboard users can easily see what they’re interacting with.
Descriptive Labels and Alt Text

For people using screen readers, descriptive labels and alt text are super important. Without them, the screen reader can’t tell the user what a button or slide is for.

Best Practices:
- Alt Text for Images (WCAG SC 1.1.1): Every image in your slideshow should have alt text that describes what’s in the image. For example, if one slide shows a chart about “Website Accessibility,” the alt text should explain the key points of the chart.
- ARIA Labels: Use an aria-label attribute to give a text label to an object, such as a “Next” and “Previous” buttons. When a screen reader encounters an object, the aria-label text is read aloud to inform the user about what it is. So, instead of a generic label like “Button,” make it something like “Next slide: About Us” so users know exactly where they’re headed.
Pause/Play Buttons

Automatic slideshows that move on their own can be frustrating—especially for people with cognitive or motor disabilities. Always give users control over the slideshow with pause and play options.

Best Practices:
- Pause/Play Button (WCAG SC 2.2.2): Make sure there’s a clearly labeled button to pause or play the slideshow and that it’s easy to use with both the mouse and keyboard.
- Adjustable Timing (WCAG SC 2.2.1): For each slide transition, users should be able to turn off, adjust, or extend the time before the slide changes. This ensures that users have enough time to read and understand the content before the next slide appears.
Using ARIA Roles for Screen Reader Compatibility

ARIA roles help screen readers understand the structure and behavior of a slideshow. They provide extra information about how it’s organized and how users can interact with it.

Best Practices:
- Role Assignment: Use ARIA roles like role= "region" to define different parts of the slideshow so that screen readers can identify them quickly.
- Live Regions: Use aria-live= "polite" to let screen readers know when a new slide has appeared, keeping users in the loop without disrupting their experience.
- Hide Inactive Slides: Only show one slide at a time to screen readers. You can do this by adding aria-hidden= "true" to the slides that aren’t currently visible.
Poor Color Contrast

Even with the best intentions, it’s easy to fall into some design traps that can hurt accessibility. If the text on your slides blends into the background, users with low vision will have a hard time reading it.

Best Practices:
- High Contrast Text(WCAG SC 1.4.3): Make sure there’s plenty of contrast between the text and background. For example, white text on a dark background or black text on a light background works well. Aim for a contrast ratio of at least 4.5:1 for standard text and 3:1 for larger text, as recommended by WCAG. You can use color contrast checkers to make sure your text stands out against the background.
Testing for Accessibility

Once you’ve added accessibility features, testing is critical to making sure everything works as it should. There are a few easy ways to test your slideshows:

Ways to Test:
- Use a Screen Reader: Try out your slideshow with popular screen readers like NVDA (NonVisual Desktop Access) or JAWS (Job Access With Speech) to see if everything is being read in the correct order and labeled correctly.
- Keyboard Navigation: Go through your slideshow using only your keyboard to make sure you can interact with all the buttons and slides.
- Automated Tools: Use tools like WAVE or the Google Lighthouse browser feature to check for common accessibility issues like missing alt text or incorrect ARIA roles.
Final Thoughts

Making your slideshows and carousels accessible might take a little extra effort, but it’s totally worth it. Not only will it make your site more inclusive, but it’ll also create a smoother experience for all your users. From ensuring easy keyboard navigation to adding meaningful labels and controlling autoplay features, each step brings you closer to a more accessible website.

So, the next time you’re adding a slideshow to your site, remember—accessibility isn’t just a nice-to-have; it’s a must-have! With a bit of planning and regular testing, you can create slideshows that everyone can enjoy.

Are you ready to make sure your website is accessible? Then, schedule an ADA Strategy Briefing with the web accessibility experts at 216digital.
Greg McNeil

September 23, 2024

How-to Guides

Accessibility, ADA Compliance, Carousels, digital accessibility, Slideshowes, WCAG, Web Accessibility, web development
Is Your Restaurant Website ADA Compliant?

If you own or manage a restaurant, you probably spend a lot of time making sure your customers have the best experience—from delicious food to a welcoming atmosphere. But have you thought about how your customers interact with your restaurant online?

In today’s digital world, your website is often the first point of contact for people looking to check out your menu, make a reservation, or order food online. But here’s the thing—if your website isn’t accessible to everyone, you could be at risk of a lawsuit. And yes, it’s happening more than you might think.

Over the past few years, more and more restaurants have been hit with lawsuits for having inaccessible websites. So, what’s going on? Let’s dive into why this is happening, what kind of issues are putting restaurants in the crosshairs, and what you can do to protect your business.

The Rise of ADA Lawsuits Against Restaurant Websites

What is the ADA?

The Americans with Disabilities Act (ADA) is a civil law that protects the rights of people with disabilities in all areas of public life. While it doesn’t specifically mention websites, the courts have made it clear that the ADA applies to websites, including restaurants. If your website is not accessible to people with disabilities, it is not compliant with the ADA, as websites are considered public places.

The ADA’s Impact of Online Interactions

In other words, if your website doesn’t provide accessibility to people with disabilities, it doesn’t comply with the ADA since websites count as public places. So, why are restaurants facing so many challenges? The answer is simple: people are doing more online than ever before—looking up menus, making reservations, and even ordering food. Now imagine someone with a disability trying to use your website and hitting roadblock after roadblock. It’s frustrating, and unfortunately, it happens all the time.

The Growing Trend of Lawsuits

If your website isn’t accessible to everyone, including people with disabilities, you’re at risk of being sued for violating the ADA. And these lawsuits aren’t rare—they’re happening more and more, especially in the restaurant industry. In fact, the food service industry is now one of the most targeted for ADA lawsuits, second only to eCommerce. It doesn’t matter if you’re running a big franchise or a small local café—if your website isn’t accessible, it is at risk. And the cost of these lawsuits? It can add up fast, even if you settle out of court.

Why Are Restaurants Being Targeted for ADA Lawsuits?

Restaurants are a prime target for several reasons:

High Online Traffic

People rely on restaurant websites for crucial information, like menus, reservations, and online orders. This makes them one of the most frequently visited business websites. The more people visit a website, the higher the chances are that someone with a disability will encounter barriers to access. When those barriers exist, lawsuits often follow.

Common Accessibility Issues

Many restaurant websites have the same accessibility problems, which makes them easy to target. Features like menus, online ordering systems, and location finders are commonly inaccessible to people with disabilities. For example, a visually impaired person might not be able to use a screen reader to read an online menu because the text isn’t coded correctly. Similarly, someone with limited mobility might struggle to navigate a reservation system that requires complicated mouse clicks.

Lack of Awareness

Some restaurant owners may not even realize that their websites need to be accessible. They focus on the day-to-day operations of running a business, not on the technical aspects of web development. Unfortunately, ignorance of the law isn’t a valid defense, and that lack of awareness can leave restaurants open to lawsuits.

Automated Tools for Testing

Just like in the retail industry, plaintiffs can use automated tools to check a website for accessibility problems quickly. These tools can scan for issues like missing alt text on images, poor color contrast, or difficulties with navigating menus. If a website fails these basic tests, it can be flagged as non-compliant, leading to a lawsuit.

Common Accessibility Issues on Restaurant Websites

The truth is, most restaurant websites have accessibility problems. They’re not always easy to spot if you don’t know what to look for, but for someone using a screen reader or other assistive technology, it can make your website almost impossible to use.

Menus That Aren’t Accessible

If you’ve ever uploaded a menu as a PDF or image file, it might seem like the easiest option. However, people using screen readers may struggle with these formats. Screen readers are tools that read text aloud for visually impaired users. Unfortunately, PDFs and image files can be impossible for them to navigate. If someone can’t read your menu, they can’t place an order. They also can’t decide if they want to visit your restaurant.

No Keyboard Navigation

Some people don’t use a mouse—they navigate websites using only their keyboard. If your website doesn’t support keyboard navigation, they won’t be able to click through your pages or make a reservation.

Unlabeled Form Fields

Let’s say you have an online reservation form. If the fields (like “name” and “email”) aren’t properly labeled, someone using a screen reader won’t know what information to enter. This could stop them from making a reservation at all.

Color Contrast Issues

Design is essential, but if your website uses colors that blend together too much, it can be hard to read, especially for people with visual impairments. High contrast between your text and background makes everything easier to see.

Missing Alt Text for Images

Do you know all those mouth-watering pictures of your food on your website? If they don’t have alt text (a written description of the image), someone using a screen reader won’t know what’s being displayed. This can be a huge barrier to fully experiencing your website.

What Can You Do to Avoid a ADA Lawsuit?

Now that you know what makes a restaurant website vulnerable, let’s talk about what you can do to protect yourself. The good news? You don’t have to be a tech expert to make your website accessible. Here are some simple steps you can take:

Get an Accessibility Audit

The best place to start is to have a professional conduct a web accessibility audit. They’ll go through your site and find the issues that need fixing. It’s like getting a health checkup for your website. Many companies specialize in ADA web accessibility audits and can provide you with a clear roadmap for improvements.

Use Accessibility Tools

There are free tools out there that can give you a quick idea of where your website might be falling short. Tools like Google Lighthouse can scan your site for fundamental accessibility issues, like missing alt text or poor color contrast. While these tools aren’t perfect, they are a good starting point.

Make Your Menus Accessible

One of the most common accessibility issues for restaurants is their menus. Make sure your menus are available in a text format that screen readers can easily read. Avoid using images or PDFs for your menu unless they’re tagged properly.

Train Your Team

Educate your staff about web accessibility best practices. Whether they’re creating content, updating the menu, or managing online reservations, everyone on your team should know how to make sure the website stays accessible.

Work With a Developer Who Understands Accessibility

If you’re making significant changes to your website or starting from scratch, it’s essential to work with a web developer who understands ADA compliance like 216digital. They can ensure your site is built with accessibility in mind from the start.

Stay Informed

Web accessibility laws and standards are constantly evolving. Keeping up with the latest guidelines—like the Web Content Accessibility Guidelines (WCAG)—can help you stay compliant and avoid future legal trouble.

Update Your Website Regularly

Websites change often, especially in the restaurant industry, where businesses frequently update menus, promotions, and events. Make sure that any new content you add is accessible. It’s also important to ensure that your website stays compliant with the latest web accessibility standards (like WCAG 2.1).

Wrapping Up

making sure your restaurant’s website is accessible to everyone is more important than ever. With the rise in ADA lawsuits targeting restaurant websites, it’s crucial to take proactive steps to create an inclusive online experience. Not only will this help protect your business, but it will also ensure that every customer can enjoy what you have to offer.

At 216digital, we understand the challenges you face and are here to help. Whether you want to protect against a frivolous ADA accessibility lawsuit or become WCAG 2.1 AA compliant, we have you covered. After years of analyzing ADA lawsuits, we’ve discerned the tactics used by law firms to pinpoint websites for groundless ADA claims and how to protect businesses against them.

Don’t wait until it’s too late— schedule a complimentary ADA briefing with 216digital to take the first step towards website accessibility.

Greg McNeil

September 20, 2024

Legal Compliance

ADA, ADA Compliance, ADA Lawsuits, digital accessibility, Restaurants, Web Accessibility
Web Accessibility: What to Ask Your Digital Agency
When choosing a digital agency to build or maintain your website, one of the most crucial factors to consider is accessibility. Digital Accessibility ensures that your website is usable by everyone, including people with disabilities. But how do you know if your agency partner understands web accessibility and can meet your needs? Asking the right questions can make all the difference.

Why It’s Important to Ensure Your Agency Understands Digital Accessibility

Web accessibility isn’t just about checking a box; it’s about making your website available to all users, regardless of their abilities. In the United States, over 70 million adults live with a disability. If your website isn’t designed with accessibility in mind, you could miss out on a large audience. Beyond that, failing to meet accessibility standards can expose your business to legal risks, including lawsuits under the Americans with Disabilities Act (ADA).

Moreover, accessible websites provide a better overall user experience, which can lead to increased engagement and customer satisfaction. If a website is easy to navigate for individuals with disabilities, it’s also likely more intuitive for everyone. That’s why it’s vital to ensure your digital agency understands and prioritizes web accessibility.

When Is the Best Time to Ask Your Agency About Accessibility?

The short answer? As early as possible.

Accessibility should be baked into the foundation of your website, not an afterthought. Whether you’re designing a new website or revamping an existing one, accessibility discussions should start in the planning phase.

If you’re already working with a digital agency, it’s never too late to ask about accessibility. It’s better to make improvements now than to wait until you’re facing a lawsuit or losing customers. By prioritizing accessibility from the start, you ensure your site meets legal requirements and offers a smooth, inclusive experience for all users.

Key Web Accessibility Questions to Ask Your Digital Agency

What Is the Current State of Web Accessibility on Our Website?

Before diving into solutions, it’s essential to assess where your website currently stands in terms of accessibility. Your digital agency should conduct an accessibility audit to identify any existing issues. Here are a few questions you can ask:
- Do you offer an initial accessibility audit?
- Can you provide examples of accessibility issues that have been flagged?
- What tools or methods do you use to test for accessibility?
A comprehensive audit should highlight potential barriers on your site, like empty headers, missing alt text for images, or lack of keyboard navigation. Starting with an audit gives you a clear picture of where improvements are needed.

What Is Your Approach to Web Accessibility?

Every digital agency has a process for implementing accessibility. You’ll want to understand how your agency handles it from start to finish. Ask them about their approach and experience:

How well do you know WCAG 2.1 guidelines?

The Web Content Accessibility Guidelines (WCAG) 2.1 are the industry standard for web accessibility. Your agency should be familiar with these guidelines and know how to apply them to your website.

Do you integrate accessibility into every stage of development?

Accessibility isn’t just a one-time fix. You should implement steps during the design, development, and content creation phases. Ask your agency if they have a process for embedding accessibility throughout the entire project.

Do you use both automated and manual testing methods?

Automated tools can catch many accessibility issues, but manual testing is essential for uncovering complex problems. Your agency should combine both methods for a thorough approach.

How Will You Ensure Accessibility Is Maintained?

Accessibility is an ongoing commitment. Websites change over time as content is updated and features are added. It’s important to ask how your agency plans to maintain accessibility once the site is live:

Do you offer ongoing accessibility monitoring?

Regular monitoring can help you stay compliant as web standards evolve and your website grows. Ask your agency if they provide services like continuous testing or accessibility check-ups.

Can you train our team to maintain accessibility?

If your website content is managed internally, your team should know how to keep it accessible. Some agencies offer training for content creators and developers to ensure new additions meet accessibility standards.

What is your process for updating the site to stay compliant with new regulations?

Digital accessibility laws are constantly evolving, and you need to ensure your website stays compliant. Your agency should have a plan for keeping your site up-to-date with the latest guidelines and legal requirements.

How Do You Prioritize Web Accessibility Issues?

Accessibility issues vary in severity. Some barriers, like missing alt text, are easier to fix, while others may require significant changes to your website’s structure. Ask your agency how they prioritize accessibility fixes:

How do you determine which issues need immediate attention?

Critical issues that block users from accessing content should be resolved first. Make sure your agency knows how to prioritize fixes to address the most pressing concerns first.

How long will it take to resolve accessibility issues?

Accessibility improvements should be made in a timely manner. Understanding the expected timeline helps you plan your next steps and set realistic expectations.

What’s Your Experience with Similar Projects?

Experience is vital when it comes to accessibility. You want to work with a digital agency that has a proven track record of making websites accessible:

Have you worked with other companies in our industry?

Different industries have unique accessibility challenges. For example, e-commerce sites may need to focus on accessible forms and shopping carts, while media companies may prioritize video captions and transcripts.

Can you show us examples of websites you’ve made accessible?

Case studies or portfolio examples can give you an idea of the agency’s capabilities. Look for examples that demonstrate a deep understanding of accessibility best practices.

Prioritize Accessibility from the Start

Web accessibility isn’t just a legal requirement – it’s a business imperative. By asking your digital agency the right questions, you can ensure your website is accessible to all users while avoiding the risk of legal issues.

Remember, accessibility should be an ongoing effort. Choose a digital agency that understands the importance of maintaining compliance and improving your website over time. By doing so, you’ll create an inclusive online experience that benefits both your users and your business.

Contact 216digital for Your Accessibility Needs

If you’re unsure where to start, 216digital can help. Our team specializes in ADA remediation and web accessibility, and we’re here to guide you every step of the way.

Schedule an ADA briefing with 216digital today to learn more about how we can help you maintain a compliant and accessible website. Let’s work together to make your site welcoming to everyone while keeping your business protected from legal risks.

Don’t wait—make accessibility a priority from the start!
Greg McNeil

September 19, 2024

How-to Guides, Legal Compliance

ADA Compliance, ADA Web Accessibility, digital accessibility, digital agency, Web Accessibility
Making Your Website Accessible Across All Devices
In today’s digital world, websites aren’t just accessed on desktops—they’re viewed on everything from smartphones to tablets. But with this variety of devices comes a significant challenge: ensuring your website works for everyone, no matter what screen they’re using. This is especially important for people with disabilities.

Web accessibility is about more than just following the rules. It’s about making sure everyone can navigate, interact with, and enjoy your site. If your website isn’t accessible, you’re not only missing out on a large audience but also putting your business at risk of legal trouble. And as devices become more diverse, testing your site across different screen sizes and input methods is crucial.

In this article, we’ll explore why web accessibility matters across different devices and share ways you can ensure your site is user-friendly and inclusive for everyone.

Why Web Accessibility Matters

Ensuring web accessibility is not just a best practice; it’s a vital responsibility. Web accessibility guarantees that people with disabilities can fully engage with digital content—whether that’s perceiving, understanding, navigating, or interacting with it. In the U.S., this is a legal requirement under the Americans with Disabilities Act (ADA). Failing to meet these standards doesn’t just alienate a significant portion of your potential audience; it can also expose businesses to serious legal risks.

But accessibility is about more than avoiding lawsuits. It’s about creating a digital experience that works for everyone, regardless of how they access your site. Users interact with websites across a wide range of devices—desktops, mobile phones, and tablets—each bringing its own set of accessibility challenges. Comprehensive, device-specific testing is essential to make sure that your website remains fully functional and inclusive, no matter how users access it.

Understanding Device-Specific Accessibility Challenges

Web Accessibility on Desktops

Desktops typically offer a full-sized screen and a mouse with a keyboard. While this setup may seem straightforward, it presents its challenges. Many users rely on keyboard navigation due to mobility impairments. If your site isn’t designed for keyboard users, navigating through forms, menus, and interactive elements can be frustrating.

Web Accessibility Challenges:
- Missing or improper use of semantic HTML.
- Lack of focus indicators for interactive elements.
- Insufficient contrast between the text and background colors.
Mobile Devices

Mobile devices are now a primary way people access the internet. However, small screens and touch interfaces create unique hurdles. For example, touch targets (like buttons) must be large enough for users with dexterity issues to tap accurately.

Accessibility Challenges:
- Inadequate touch target sizes.
- Poorly designed forms that are difficult to fill out on a small screen.
- Inconsistent navigation may confuse users who switch between mobile and desktop views.
Web Accessibility on Tablets

Tablets straddle the line between desktop and mobile devices, often combining features. Users may interact with tablets via touch or keyboard, making it vital for websites to accommodate both methods. Tablets can also be used in various orientations, which may affect layout and functionality.

Accessibility Challenges:
- Orientation changes that disrupt layout.
- Inconsistent behavior between touch and keyboard navigation.
- Complications with zoom functionality affect users with visual impairments.
Effective Testing Methods and Tools

Now that we’ve explored the challenges let’s discuss how to test for accessibility effectively across different devices. Testing for web accessibility is an ongoing process that requires attention to detail and a proactive approach.

1. Manual Testing for Web Accessibility

Manual testing involves using your website as a user would. This means navigating through your site using keyboard-only navigation and screen readers. Pay close attention to how easily you can access all content.

Tips for Manual Testing:
- Navigate your site using only the keyboard (Tab, Enter, Arrow keys).
- Test with various screen readers (like JAWS, NVDA, or VoiceOver).
- Attempt to use your site on different devices and in different orientations.
2. Automated Testing Tools

While automated tools can’t catch every issue, they can help identify many common accessibility problems. Tools like Lighthouse and WAVE can scan your website to ensure compliance with WCAG (Web Content Accessibility Guidelines) standards.

Recommended Tools:
- Lighthouse: Built into Chrome Developer Tools for performance and accessibility audits.
- WAVE: A visual feedback tool that shows you accessibility issues directly on your site.
3. User Testing for Web Accessibility

Involving real users in your testing process is invaluable. This approach can reveal issues that automated tools might miss. Consider creating a focus group that includes users with various disabilities to gather their feedback.

How to Conduct User Testing:
- Recruit participants with different abilities and device preferences.
- Observe them as they navigate your site.
- Collect qualitative feedback on their experience.
Final Thoughts

Making your website accessible to everyone is not just a legal requirement—it’s a crucial part of creating a welcoming online experience. With people accessing websites on various devices, understanding and addressing web accessibility challenges is essential.

To ensure your site meets these standards, consider scheduling an ADA briefing with the experts at 216digital. Our experts will guide you through the steps needed to ensure your website not only meets legal standards but also serves all users effectively. Let’s work together to create a web that’s accessible to everyone!
Greg McNeil

September 18, 2024

Legal Compliance

ADA Compliance, digital accessibility, responsive web design, User Experience, user testing, Web Accessibility
Are Web Accessibility Overlays Hurting Users?
When it comes to making websites accessible, many businesses turn to web accessibility overlays, believing they’re a simple and quick fix. These tools promise to enhance usability for people with disabilities by adding features like text size adjustments or color contrast options. However, beneath this shiny exterior lies a troubling reality. Far too often, overlays create more problems than they solve, leaving users frustrated and excluded.

Instead of providing real solutions, these overlays can break essential functions on a website, making it even harder for people to navigate. Imagine a visually impaired user trying to read a page only to find that the overlay has garbled the text or made buttons unclickable. This isn’t just a minor inconvenience; it’s a barrier that undermines the very purpose of accessibility. With countless users reporting negative experiences, the reliance on overlays is more than just misguided—it can be harmful.

In this article, we’ll explore why web accessibility overlays often fall short of their promises and what businesses can do to truly support all users. Let’s take a closer look at the pitfalls of these quick fixes and uncover the importance of genuine web accessibility.

What Are Web Accessibility Overlays?

Web accessibility overlays are tools or widgets that website owners can add to their sites to enhance accessibility. They typically involve inserting a small JavaScript code snippet into your site, which then adds a floating button or widget. When users interact with this button, they can adjust various aspects of the site’s appearance and functionality—like changing text size, altering color contrasts, or enabling screen reader compatibility.

The appeal of these overlays is their promise of quick, low-cost accessibility improvements. They offer an attractive option for businesses looking to make their sites more inclusive without undergoing a major redesign. However, while the intention behind these tools is good, the reality often falls far short.

Overlay’s Intended Purpose

The goal of web accessibility overlays is to make websites more accessible to people with disabilities. For instance:
- Visual Impairments: Users who have difficulty seeing might benefit from high-contrast modes or text enlargement.
- Motor Impairments: Customizable interface elements can help users navigate the site using alternative input methods.
- Cognitive Impairments: Simplified navigation and text-to-speech features can make content more understandable.
In theory, these overlays should help users interact with a website more effectively by allowing them to tailor the site to their needs.

The Reality: Why Overlays Often Fall Short

Despite their good intentions, web accessibility overlays often fail to deliver on their promises. Here’s a closer look at why:

Broken Functionality

Many users with disabilities find that these overlays break essential website functions. For example, after activating an overlay’s high-contrast mode, a screen reader might start reading out garbled or irrelevant text. Interactive elements like forms or buttons may become unusable or misaligned. This can make the website even less accessible than it was before the overlay was applied.

Limited Customization

While overlays offer some level of customization, they usually fall short of addressing all accessibility needs. For instance, they allow users to change text size but do nothing to improve keyboard navigation or fix structural issues. This limited scope can be frustrating for users who need more comprehensive adjustments to navigate the site effectively.

Disruptive Presence

The floating button or widget that overlays add can sometimes interfere with the user experience. For example, it might obscure important content or navigation options. Users who rely on screen readers or keyboard navigation may find the overlay itself to be a barrier rather than a help.

Overlay’s Provide a False Sense of Security

Relying on overlays can give website owners a misleading sense of security. Just because an overlay provides some accessibility features doesn’t mean your site is fully accessible. True accessibility involves more than just adding a few features—it requires thoughtful design and regular testing to ensure that all users can interact with your site effectively.

Common Issues with Overlays

To better understand the real-world impact, let’s explore some common issues faced by users with disabilities when dealing with web accessibility overlays:
1. Navigation Problems: Overlays often disrupt keyboard navigation. For users who rely on keyboards instead of mice, this can make it challenging to move through the site or interact with elements. Buttons and links might become unreachable or behave unpredictably.
2. Inconsistent Text Appearance: Overlays might change text size or color, but they often don’t adjust all text elements uniformly. This inconsistency can make reading difficult, especially for users with low vision who rely on specific text settings.
3. Broken Links and Forms: Features like forms and links can become broken or non-functional when an overlay is applied. This issue can prevent users from completing actions like submitting information or navigating through pages, leading to frustration and abandonment of the site.
4. Visual Overlaps: High-contrast modes or other visual changes introduced by overlays can sometimes cause elements to overlap or become misaligned. This can make content harder to read and interact with, defeating the purpose of the accessibility improvements.
Firsthand User Experiences

As highlighted in the New York Times article, For Blind Internet Users, the Fix Can Be Worse Than the Flaws, and echoed by accessibility advocates, overlays often complicate rather than simplify website navigation.

Patrick Perdue, a 38-year-old blind user from Queens, sums it up well: “I’ve not yet found a single one that makes my life better.” Many like him find themselves spending more time navigating around these overlays than actually using websites effectively.

Last year, over 862 advocates and developers urged organizations to reconsider their use of overlays, citing practical ineffectiveness and potential accessibility flaws in an open letter. Even the National Federation of the Blind has condemned these tools, describing them as inadequate solutions.

Brian Moore, a 55-year-old blind user from Toronto, raises a critical question: “If you can’t fix the basic issues, what value are you adding?”

Why Overlays Are Seen as a “Quick Fix”

Web accessibility overlays are often chosen as a quick fix because they appear to offer a fast, cost-effective solution. For businesses, especially those with limited budgets or technical resources, these tools seem like an easy way to address accessibility concerns without a full site overhaul.

However, this approach is problematic for several reasons:

Superficial Solutions

Overlays generally provide superficial solutions rather than addressing underlying accessibility issues. Real accessibility involves more than just adding features—it requires a deep understanding of diverse user needs and thoughtful site design.

Potential for Increased Barriers

As highlighted by user experiences, overlays can sometimes introduce new barriers or exacerbate existing ones. This can lead to increased frustration and exclusion for users who rely on accessibility features.

Legal and Ethical Concerns

Relying on overlays alone may not meet legal standards for accessibility under regulations like the Americans with Disabilities Act (ADA). A genuine commitment to accessibility involves more than just using tools—it requires ensuring that your site is fully accessible to all users.

The Path to Genuine Accessibility

So, what should you do instead of relying on overlays? Here are some steps to take:
1. Invest in Design: Start by designing your website with accessibility in mind. This includes using proper HTML semantics, ensuring good color contrast, and creating keyboard-friendly navigation.
2. Conduct Regular Testing: Test your site with real users who have disabilities to identify and address issues. This helps ensure that your site performs well in real-world scenarios.
3. Seek Professional Advice: Consider consulting with accessibility experts like 216digital, who can guide you through the process of making your site truly accessible. They can provide valuable insights and help you implement best practices.
4. Commit to Continuous Improvement: Accessibility is an ongoing process. Regularly review and update your site to address new challenges and improve the user experience.
Take the Next Step Towards Accessibility

If you’re serious about making your website accessible to everyone, don’t settle for quick fixes like overlays. Instead, invest in long-term solutions that truly improve the user experience for people with disabilities. At 216digital, we specialize in helping businesses achieve genuine web accessibility and stay compliant with ADA requirements.

To learn more about how you can make your site more inclusive and avoid the pitfalls of web overlays, schedule an ADA briefing with 216digital today. Our experts will guide you through the steps needed to ensure your website not only meets legal standards but also serves all users effectively. Let’s work together to create a web that’s accessible to everyone!
Kayla Laganiere

September 17, 2024

Legal Compliance

ADA Compliance, Overlay widgets, Overlays, screen overlays, Users experience, Widgets
How to Implement ARIA Landmarks and Roles for Better Accessibility
For users of assistive technologies, accessing and interacting with websites can be difficult if the proper structure and cues aren’t in place. This is where ARIA (Accessible Rich Internet Applications) landmarks and roles come in handy. Implementing ARIA landmarks and roles can significantly improve your website’s accessibility, helping users navigate more easily and interact with web elements effectively. If you’re new to ARIA, don’t worry! This guide will walk you through ARIA landmarks and roles, why they matter, and how to implement them step-by-step.

What Is ARIA and Why Is It Important?

ARIA is a set of HTML attributes intended to make webpages easier to navigate for people who rely on assistive technology, such as screen reading software. These attributes help bridge gaps in standard HTML that might not convey sufficient meaning to people with disabilities.

By using ARIA, developers can label, describe, and define the functionality of elements in ways that ensure everyone has a better user experience. Regarding web accessibility, ARIA attributes are recommended in some cases by the Web Content Accessibility Guidelines (WCAG), which provide standards to help websites comply with accessibility requirements.

ARIA landmarks and roles are two essential aspects of making sure your website content is accessible for all users to understand and interact with.

ARIA Landmarks: What Are They?

ARIA landmarks are unique markers you can add to different sections of your webpage to make navigation easier for users with disabilities. These landmarks help people who use screen readers understand the structure of a webpage and quickly jump to different sections. Think of them as signposts, making it clear where key sections—like the header, main content, navigation, and footer—are located.

The major ARIA landmarks include:
- <header>: Identifies the top section of the webpage.
- <main>: Indicates the main content of the page.
- <nav>: Points to the area that contains navigational links.
- <footer>: The bottom section of the webpage.
Why Are ARIA Landmarks Important?

ARIA landmarks are invaluable for users with visual or motor impairments who use the keyboard or screen reader to navigate the web. They allow users to skip repetitive elements (like navigation bars) and jump directly to the content they’re looking for. Without these landmarks, a user would have to listen to every single line of the page to figure out where the main content starts or how to get to the footer. Using ARIA landmarks ensures that your website is easy to navigate for everyone.

How to Implement ARIA Landmarks Step-by-Step

Now that you understand the importance of ARIA landmarks let’s look at how to implement them in your website’s code. The good news? Adding ARIA landmarks is simple and can be done using standard HTML elements.

Adding the Header Landmark

The <header> element is used to define the global top section of your page, which typically contains things like the website logo, title, or main navigation links. Here’s an example of the correct usage of the HTML5 <header> region:

<header>
```
<h1>My Cool Website</h1>
<h1>My Cool Website</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/products">Products</a></li>
    </ul>
  </nav>
</header>
```
The Main Landmark

The <main> element is crucial because it defines the primary content of the page. The <main> element, along with a skip link, can allow users of assistive technology to skip past repetitive content such as the navigation:
```
<main role="main">
  <h2>Main Content</h2>
  <p>This is the most important part of the page.</p>
</main>
```
By using role=”main”, you’re ensuring that screen readers can quickly identify and jump to the core content of your page. Only one main landmark should be used per page.

Using the Navigation Landmark

The navigation area of your website should be easy to identify and skip if necessary. You can use the <nav> element or the ARIA role, but you do not need to use both:
```
<nav>
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
  </ul>
</nav>
<div role="navigation">
  <ul>
    <li><a href="/products">Products</a></li>
    <li><a href="/about">About Us</a></li>
  </ul>
</div>
```
With the navigation region, you’re clearly marking the section of the page that contains links for navigating to other parts of the site.

Adding the Footer Landmark

Finally, the <footer> element typically contains secondary content, such as copyright information or additional links. Adding a landmark here helps screen reader users know when they’ve reached the end of the page:
```
<footer role="contentinfo">
  <p>&copy; 2024 Your Company</p>
</footer>
```
In this case, role= "contentinfo" tells screen readers that this section provides supplementary information about the website.

ARIA Roles: What Are They?

ARIA roles go beyond marking sections of the page—they describe the functionality of specific elements. By using ARIA roles, you’re defining how an element should behave or be interacted with, especially when using assistive technologies.

Some commonly used ARIA roles include:
- “button”: Makes non-biased elements like <div> behave like a button.
- “dialog”: Defines a pop-up dialog window.
- “alert”: Marks an element as an important alert that needs immediate attention.
Why Are ARIA Roles Important?

ARIA roles give more meaning to non-standard HTML elements. For example, if you create a custom button using a <div> instead of the traditional <button> element, a screen reader might not recognize it as a button. By assigning it an ARIA role, you ensure it’s interpreted correctly, making the interaction more intuitive and accessible.

How to Implement ARIA Roles Step-by-Step

Let’s check out some examples of proper ARIA implementation.

Creating a Custom Button

If you have a custom button element (like a <div> styled as a button), you can add the role="button" to make sure it’s recognized as an interactive button by screen readers:
```
<div role="button" tabindex="0" onclick="submitForm()">Submit</div>
```
The ARIA role “button” tells assistive technology to announce this element as a button, and the “tabindex” attribute makes the element focusable via the keyboard. However, it’s always best to use the correct semantic HTML5 <button> tag whenever possible.

Adding a Dialog Role

For models or pop-up windows, you can use the role= "dialog" to make them accessible:
```
<div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDescription">
  <h2 id="dialogTitle">Confirmation</h2>
  <p id="dialogDescription">Are you sure you want to delete this file?</p>
  <button onclick="closeDialog()">Cancel</button>
</div>
```
The aria-labelledby and aria-describedby attributes help give context to the dialog box for users relying on assistive technologies.

Creating an Alert

If you need to display important, time-sensitive information—like an error message or form feedback—you can use the role= "alert":
```
<div role="alert">
  <p>Error: The "password" field is required.</p>
</div>
```
This role makes sure that screen readers announce the alert immediately, ensuring the user doesn’t miss critical information.

Going Beyond ARIA: Continue Your Accessibility Journey

The HTML markup of your website is far more critical than just defining the visual style of the site. It is used by screen reading software, assistive technologies, and keyboard navigation to ensure users have easy access to content. SEO crawlers also use it to determine the accuracy and relevance of your content.

By adding landmarks like header, main, navigation, and footer, and using roles like button, dialog, and alert, you’ll not only meet the accessibility standards outlined by WCAG, but you’ll also create a more user-friendly website for everyone.However, this is just one piece of the web accessibility puzzle.

Team Up with 216digital

At 216digital, we understand that keeping up with ADA compliance and accessibility best practices can be challenging. That’s why we’re here to help. We specialize in helping businesses achieve and maintain ADA compliance with expert guidance and actionable strategies. Schedule an ADA briefing with our experts today to learn more about how we can guide you through the complexities of accessibility, ensuring your website meets legal standards and delivers a great experience for all users.

Let’s make the web more accessible, together—book your ADA briefing today!
Bobby

September 6, 2024

How-to Guides

Accessibility, ADA Compliance, ARIA, How-to, WCAG, Web Accessibility, web development
What to Ask When Choosing a Partner for Title II ADA Compliance

When ensuring your organization’s compliance with ADA Title II, selecting the right partner to guide you through the process is crucial. ADA Title II mandates that state and local governments, as well as any of their departments, agencies, or other instrumentalities, must not discriminate against individuals with disabilities. Compliance with these regulations safeguards your organization against legal risks and ensures your services are accessible to all individuals. To make an informed decision when choosing a partner for ADA Title II compliance, here are key questions you should ask.

Have You Worked with ADA Title III Compliance Before?

ADA Title II compliance shares similarities with ADA Title III, which focuses on public accommodations provided by private entities. A partner with experience in ADA Title III compliance will have a solid understanding of accessibility requirements across different sectors. While Title II and Title III address various types of entities, the underlying accessibility principles remain consistent. A partner with experience in both areas will bring a comprehensive understanding of the legal landscape, helping you navigate the complexities of ADA compliance more effectively.

How Well Do You Know WCAG 2.1 A/AA Standards?

The Web Content Accessibility Guidelines (WCAG) 2.1 are the most widely recognized standards for digital accessibility. They provide a framework for making web content more accessible to people with disabilities, including those with visual, auditory, cognitive, and motor impairments. Ensuring your partner has an in-depth knowledge of WCAG 2.1 A/AA standards is crucial because these guidelines serve as the benchmark for evaluating your organization’s digital accessibility. A knowledgeable partner can guide you through implementing these standards, ensuring that your digital properties meet or exceed compliance requirements.

How Skilled is Your Team in Accessibility?

The expertise of the team working on your ADA compliance project is a critical factor in your success. Ask about the qualifications and experience of the team members handling your account. Do they have certifications in accessibility, such as Certified Professional in Accessibility Core Competencies (CPACC) or Web Accessibility Specialist (WAS)? How many years of experience do they have in the field? A skilled team with a deep understanding of accessibility can assure you that your project will be handled with the utmost care and expertise.

What is Your Process for Conducting Accessibility Audits?

An accessibility audit is the foundation of any compliance effort. It identifies areas where your organization falls short of ADA requirements and provides a roadmap for remediation. Ask potential partners to explain their audit process in detail. How thorough is their approach? Do they conduct both automated and manual testing? How do they document their findings?

Understanding their process will give you insight into the level of detail and accuracy you can expect in their audit reports. A rigorous audit process is essential for identifying all accessibility issues and ensuring nothing is overlooked.

How Do You Prioritize and Address Accessibility Issues?

Not all accessibility issues are created equal. Some may have a significant impact on users with disabilities, while others may be less critical. A competent partner should have a clear strategy for prioritizing and addressing accessibility issues. Ask them how they determine which issues to tackle and how to address them. Do they focus on issues that have the most significant impact on user experience first, or do they take a different approach? Understanding their prioritization process will help you resolve the most pressing issues promptly, reducing the risk of non-compliance.

What Testing Methods Do You Use?

Testing is a critical component of ensuring ADA compliance. Ask your potential partner about the testing methods they use to evaluate accessibility. Do they rely solely on automated tools, or do they also conduct manual testing?

Automated tools are excellent for identifying specific issues but can’t catch everything. Manual testing by individuals with disabilities provides valuable insights into how real users experience your digital content. A combination of both methods is ideal for a comprehensive assessment of your organization’s accessibility.

How Will You Help Us Maintain Accessibility Over Time?

Achieving ADA compliance is not a one-time effort; it’s an ongoing process. Your digital content will evolve, and new accessibility challenges may arise. Ask your potential partner how they plan to help you maintain accessibility over time. Do they offer ongoing monitoring services to ensure your digital properties remain compliant as updates are made? How do they stay up to date with changes in accessibility standards and regulations? A partner committed to long-term support will help you remain compliant and avoid potential legal pitfalls in the future.

What Technology and Tools Do You Use for Accessibility?

The tools and technology your partner uses can significantly impact the effectiveness of their accessibility efforts. Ask about the specific tools they use for auditing, testing, and remediation. Do they use industry-standard tools such as WAVE or JAWS? How do they leverage these tools to identify and resolve accessibility issues? Additionally, ask about any proprietary tools they may have developed. A partner with advanced technology and tools will be better equipped to handle complex accessibility challenges and deliver effective solutions.

Do You Offer Training?

Training is a vital component of sustaining ADA compliance. Your staff needs to be educated on accessibility best practices to ensure your digital content remains compliant as it evolves. Ask your potential partner if they offer training services. Do they provide customized training sessions tailored to your organization’s needs? Do they offer resources and support for your team to continue learning about accessibility?

A partner who offers comprehensive training will empower your organization to maintain accessibility independently, reducing the need for constant external intervention.

Conclusion

Choosing the right partner for ADA Title II compliance is a crucial decision that can have long-lasting implications for your organization. By asking the right questions, you can ensure that your partner has the expertise, experience, and resources needed to guide you through the complexities of ADA compliance. A knowledgeable and skilled partner will help you achieve and maintain compliance, mitigating legal risks and ensuring that your services are accessible to all individuals, regardless of their abilities. Prioritize partners who demonstrate a deep understanding of accessibility, a commitment to ongoing support, and a comprehensive approach to testing and remediation.

At 216digital, we specialize in helping organizations like yours successfully navigate ADA compliance with expert guidance, tailored solutions, and ongoing support. Schedule an ADA compliance briefing with our team today to learn how we can help you stay ahead of regulations, reduce legal risks, and build an inclusive digital experience. Let’s work together to ensure your organization meets and exceeds accessibility standards.

Kayla Laganiere

September 4, 2024

Testing & Remediation

ADA Compliance, ADA Website Compliance, digital accessibility, Title II, Web Accessibility
The Legal Pitfalls of Web Accessibility Overlays
Web accessibility overlays have been popping up everywhere, promising to make websites accessible with just a quick fix. These tools, often marketed as a simple solution, claim to solve accessibility issues with just a few clicks. But are they really the answer? Unfortunately, relying on an overlay might not be the quick fix it seems. Instead, it could lead to even more problems down the road, including legal trouble. Let’s take a closer look at what overlays are and the risks involved depending on them.

What Are Web Accessibility Overlays?

First, let’s break down what web accessibility overlays actually are. Overlays are tools that use a snippet of JavaScript to change a website’s code. They often come in the form of toolbars, plugins, apps, or widgets. These overlays claim to detect and fix accessibility problems on a website automatically. However, they don’t actually fix the website’s original source code. Instead, they identify basic accessibility issues, like color contrast and text size, and make adjustments. While these features are important for accessibility, the real issue is how overlays are used and depended upon.

The Legal Landscape: Recent Lawsuits and Challenges

Now that you know what overlays are and what they aim to do, let’s dive into the legal implications surrounding their use. In recent years, web accessibility overlays have faced growing scrutiny in U.S. courts. You might have heard about the recent class action lawsuit against accessiBe—one of the most popular accessibility widget providers. If you haven’t, this could be a game-changer for you.

Case Study: Tribeca Skin Care vs. accessiBe

On June 24, 2024, Tribeca Skin Care, a small dermatology practice in New York City, filed a class action lawsuit against accessiBe. Even though Tribeca used accessiBe’s overlay, a blind person still sued the practice, claiming their website didn’t meet ADA requirements. This case clearly shows the serious risks of relying solely on these tools for web accessibility.

Problems and Risks with Overlays

So, what’s the problem? Overlays like accessiBe promise to fix accessibility issues with just a few lines of code. But in reality, they can sometimes create new barriers instead of removing them. As we look at more legal cases, it becomes evident that courts are increasingly siding with plaintiffs who argue that these overlays aren’t a real substitute for having accessibility built directly into a website’s code. By mid-2024, over 20% of web accessibility lawsuits were filed against companies using these widgets. This raises a big question: Can overlay vendors really deliver the protection from lawsuits or the ADA compliance they promise?

Copycat Lawsuits: A Growing Threat

To make things even more challenging, businesses using overlays are now facing a new wave of copycat lawsuits. These lawsuits come from a new wave of ambulance chasers targeting companies that rely on third-party overlays. They know these tools often fall short of providing true accessibility. Tools like BuiltWith make it easy for anyone to see what a website is built with. With just a click, you can access a full list of websites using a specific tool—like AccessiBe or another accessibility overlay.

Exploitation of Overlay Data

What are the chances that these serial lawsuit-filing firms are using data like this to find new targets? Especially when they see success in filing lawsuits or sending demand letters against websites using overlays.

The legal argument is straightforward: if an overlay doesn’t fully meet accessibility standards, then the website is still not compliant with the Americans with Disabilities Act (ADA) and other regulations. As a result, businesses that thought they were protecting themselves with an overlay end up in court, dealing with expensive settlements and damage to their reputation.

Why Overlays Aren’t a Solution

So, why are overlays so problematic? The answer lies in their limitations. Overlays are designed to be a one-size-fits-all solution, but accessibility needs are diverse and complex. No single tool can address every issue, especially when it comes to accommodating users with different types of disabilities. For instance, while an overlay might help someone with mild visual impairments by adjusting contrast, it can’t add quality alt-text to images, or ensure that you’re using descriptive link text, for example.

Additionally, overlays are often implemented as a quick fix rather than a comprehensive solution. This can lead to a false sense of security, where businesses believe they are fully compliant with accessibility laws when, in reality, they are not. This false confidence can backfire when a lawsuit reveals the shortcomings of the overlay, leading to financial and legal repercussions.

What Can Business Owners Do Instead?

Given the risks associated with overlays, what should business owners do instead to ensure their websites are accessible? The answer lies in taking a proactive and comprehensive approach to web accessibility. Here are some steps to consider:
1. Understand Web Accessibility Guidelines: The Web Content Accessibility Guidelines (WCAG) are a set of standards designed to make web content more accessible. Familiarize yourself with these guidelines to understand what needs to be done. They cover aspects like text readability, alternative text for images, and keyboard navigation.
2. Conduct a Website Audit: Regularly audit your website for accessibility issues. There are tools available online that can help you identify problems, such as missing alt text for images or issues with color contrast. Consulting with a specialist firm like 216digital to conduct a thorough audit can also be a wise investment.
3. Implement Ongoing Training: Train your staff, especially those involved in website management and content creation, about web accessibility. This helps create a culture of inclusivity and ensures that accessibility remains a priority.
4. Stay Informed and Up-to-Date: Web accessibility standards and best practices can evolve over time. Stay informed about any changes and make updates to your website as necessary to remain compliant.
5. Ongoing Monitoring: Compliance is not a one-time task with 216digital’s a11y.Radar service provides ongoing monitoring of your website or app to detect any new accessibility issues that may arise over time. This proactive approach helps prevent potential violations before they lead to costly lawsuits.
Overlays Are Not a Shortcut

Web accessibility overlays might appear to be a quick solution, but they come with significant legal risks. Recent lawsuits have demonstrated that these tools often fall short of meeting the required standards, leaving businesses exposed to potential legal issues. Instead of opting for an overlay, invest in a comprehensive approach to web accessibility. By integrating accessibility from the ground up, you can avoid the pitfalls of overlays and ensure that your site is genuinely welcoming and usable for all visitors.

True accessibility is about more than just sidestepping legal troubles—it’s about creating a web experience that everyone can use and enjoy. Don’t settle for a temporary fix. Invest in building a fully accessible website that serves all users effectively.

Team Up with 216digital

Ready to take the next step? Whether you want to protect against a frivolous ADA accessibility lawsuit or become WCAG 2.1 AA compliant, 216digital has you covered. Our team of accessibility experts can also develop strategies to integrate WCAG 2.1 compliance into your development roadmap on your terms.

Don’t wait for a lawsuit to push you into action. Schedule a complimentary ADA strategy briefing with 216digital to take the first step toward website accessibility.
Greg McNeil

September 3, 2024

Legal Compliance

ADA Compliance, digital accessibility, Overlay, Overlay widgets, Web Accessibility
Top 9 Web Accessibility Issues and Fixes
Imagine trying to explore a website but not being able to get the information you need because the site wasn’t made with you in mind. For many people with disabilities, this is a frustrating reality.

Web accessibility isn’t just a technical requirement—it’s about making sure everyone can use your website. Whether you’re a developer, IT director, or content manager, making your website accessible is essential. By fixing common accessibility problems, you not only meet legal standards but also make your site better for everyone.

Let’s dive into the top 10 web accessibility issues and how to fix them.

1. Missing Alt Text for Images

Alt text, or alternative text, is a brief description added to images on a website. It helps people who can’t see the images understand what they are about, as the alt text is read aloud by screen readers or displayed if the image doesn’t load. When alt text is missing, people with visual impairments miss out on important information, making the website less accessible. This can lead to frustration for users and might even cause legal issues, as websites are expected to be accessible to everyone.

According to WCAG 2.1 SC 1.1.1 (Non-text Content), all non-text content, like images, needs a text alternative that serves the same purpose or provides the same information.

How to Fix:
- Add Descriptive Alt Text: For each image, write meaningful alt text that clearly describes what it’s showing or its purpose. For example, instead of just saying “Image of a dog,” say “Golden Retriever playing in a park.”
- Use Empty Alt Attributes for Decorative Images: If an image is just decorative, use an empty alt attribute (alt=””). This way, screen readers skip over these images, making navigation easier for users.
- Review and Update Regularly: Regularly check your alt text to make sure it’s still relevant, especially if you update the images or content on your site.
For more information about Alt text for images, check out our article Understanding Image Alt Text Descriptions.

2. Web Accessible Forms

Forms that are not web accessible can be a big problem for people with disabilities. When forms are not designed with web accessibility in mind, they may be hard to understand or use with assistive technologies like screen readers. For example, if a form doesn’t have clear labels or instructions, someone using a screen reader might not know what information to put in the fields. This can make it difficult or even impossible for them to complete the form.

WCAG 2.1 SC 1.3.1 (Info and Relationships)requires that the information and relationships between form elements be clear and properly coded so that assistive technologies can read and interpret them correctly.

How to Fix:
- Label Form Elements Clearly: Use the <label> tag to connect labels with each form field. This helps screen readers explain each field’s purpose. For example, use <label for=”email”>Email Address</label> with <input type=”email” id=”email”>.
- Provide Accessible Error Messages: Make sure error messages are clear and easy to understand. Use ARIA attributes like aria-live to alert users to errors and make sure screen readers can easily read the messages.
- Include Clear Instructions: Give clear instructions for filling out the form, especially for fields with specific requirements like date format or password criteria.
3. Poor Color Contrast

Low color contrast between text and background can make content hard to read, especially for users with visual impairments or color blindness. For example, light gray text on a white background is hard for many users to see.

WCAG SC 1.4.3 (Contrast – Minimum) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text to meet web accessibility standards.

How to Fix Color Contrast:
- Check Contrast Ratios: Use online tools like WebAIM’s Contrast Checker to make sure the color contrast between text and background meets accessibility guidelines. Aim for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
4. Missing Keyboard Navigation

Web keyboard navigation is a way for people to use a website just by pressing keys on their keyboard, instead of using a mouse. This is important for people who can’t use a mouse, like those with certain disabilities.

When a website doesn’t support keyboard navigation, it means that users who rely on keyboards might not be able to access all parts of the site. This is a problem because it makes the website more challenging to use for people with disabilities.

According to WCAG SC 2.1.1 Keyboard, websites need to be fully navigable using just a keyboard. This means that all buttons, links, and forms should be reachable and usable without a mouse. If a site doesn’t meet this standard, it can exclude many users and make it less accessible.

How to Fix:
- Enable Keyboard Navigation: Ensure that all interactive elements, such as links, buttons, and menus, can be accessed using only a keyboard. This includes allowing users to tab through items and activate them using the Enter or Space keys.
- Implement Proper Tab Order: Use the tabindex attribute to manage the order in which elements receive focus when tabbing. Avoid skipping focusable elements or creating confusing navigation paths.
- Use Focus Management: When interactive elements like modal dialogs or dropdown menus open, move the focus to the first interactive element within the component, and return it to the triggering element when the component closes.
5. Video and Audio Captions

Videos and audio content that lack captions or transcripts are inaccessible to users who are deaf or hard of hearing. Without captions or transcripts, these users miss out on the audio information provided in multimedia content.

WCAG SC 1.2.2 Captions (Pre-recorded) mandates that videos and audio content include captions to assist users who are deaf or hard of hearing. Without captions, these users may miss crucial information, making it more challenging for them to grasp or engage with the content fully.

How to Fix:
- Provide Captions: Make sure your videos include captions that match what people say. Start with tools like YouTube’s automatic captions, but edit them manually to ensure accuracy.
- Create Transcripts: Give users transcripts for your audio content. A transcript is a written version of what’s said in a video or audio file, including important sounds. Users can read these transcripts or use them with text-to-speech tools.
- Make Captions and Transcripts Available: Allow users to turn captions on or off and offer transcripts for download. This gives people the choice to use captions or read the text in a way that works best for them.
6. Missing Skip Links

Web accessible skip links are special links on a website that let people quickly jump past repetitive content, like navigation menus, to get to the main part of the page. This is especially helpful for people using screen readers or keyboard navigation.

If a website is missing these skip links, it can make it much harder for users to navigate, which goes against WCAG SC 2.4.1 Bypass Blocks.” This helps users quickly get to the content they need, reducing the effort required to access important content.

How to Fix Skip Links:
- Add Skip Navigation Links: Place “skip to content” links at the top of your web pages. These links should be one of the first elements in the tab order, allowing users to bypass repetitive navigation and go directly to the main content.
- Make Skip Links Visible: Ensure that skip navigation links are visible when focused. Use CSS to make them visually prominent when selected by a keyboard, so users know where they are skipping to.
7. Unclear Headings and Structure

Poorly structured headings can make it difficult for users with screen readers to understand the organization of the content. For example, if headings are not used correctly or if they are missing, users may struggle to comprehend the hierarchy and flow of the information.

WCAG SC 1.3.1 Info and Relationships requires that content structure and relationships be programmatically determined or available in text. Proper use of headings and a clear content structure ensure that users can navigate and understand the content more easily.

How to Fix:
- Use Proper Heading Tags: Implement <h1>, <h2>, <h3>, etc., in a logical order to reflect the content’s structure. The <h1> tag should represent the main title, with subsequent headings breaking down the content into logical sections.
- Ensure Headings Are Descriptive: Headings should clearly describe the content that follows, helping users understand what each section covers. For example, instead of a generic heading like “Details,” use “Product Specifications.”
- Maintain a Consistent Structure: Consistently apply heading tags across your website to create a predictable and accessible content structure, making it easier for users to navigate.
8. Inconsistent Link Text

Links with vague or repetitive text like “click here” or “read more” can be confusing for screen reader users as they lack context about the link’s destination or purpose. For example, if several links are labeled “read more,” users may not know which topic they are referring to.

WCAG SC 2.4.4 Link Purpose (In Context) requires that the purpose of each link be clear from the link text alone or from the surrounding context. This helps users understand where a link will take them and ensures that all users can navigate effectively.

How to Fix:
- Use Descriptive Link Text: Ensure that the link text clearly indicates what the link will do or where it will take the user. For instance, instead of saying “click here,” use “Download our accessibility guide.”
- Avoid Repetition: Ensure that each link’s text is unique, especially if links are close to each other. This helps users distinguish between different links and understand their destinations.
- Provide Context in Surrounding Text: If necessary, add context around the link text to clarify its purpose. However, the link text itself should still be sufficiently descriptive on its own.
9. No Focus Indicators

Web accessible focus indicators are visual cues that show which part of a website a user is currently interacting with, like when using a keyboard or a screen reader.

According to WCAG SC 2.4.7 Focus Visible, “Focus Visible,” these indicators are crucial for making websites easy to navigate. Without them, users might struggle to see where they are on the page, which can make the site hard to use, especially for people with disabilities. Proper focus indicators help everyone use a website more effectively and inclusively.

How to Fix Focus Indicators:
- Ensure Visible Focus: Use CSS to create clear, visible focus indicators for all interactive elements. For example, you can use outline: 2px solid #000; to ad a solid black outline when an element is focused.
- Customize Focus Styles: Enhance default focus styles to make them more visible, especially if the default outline blends into the background. Consider using a contrasting color or a thicker border.
How to Test for Web Accessibility Issues

Testing for web accessibility can be done using a combination of manual checks and automated tools. Let’s take a look at a quick guide:
1. Manual Testing: Use a keyboard to navigate your site and check all interactive elements. Utilize screen readers to ensure that content is read out correctly and that forms, buttons, and links are accessible.
2. Automated Tools: Use tools like WAVE, Axe, or Lighthouse to perform automated accessibility audits. These tools can quickly identify many common issues, but manual testing is still essential for thorough accessibility checks.
3. User Testing: If possible, involve users with disabilities in your testing process. They can provide valuable feedback on real-world accessibility issues that automated tools might miss.
Building a Path to Web Accessibility

Making sure your website is accessible goes beyond just checking off boxes—it’s about creating a welcoming space where everyone can connect with your content. By tackling common accessibility issues, you not only improve how people experience your site but also protect your organization from potential legal problems and open up new audience opportunities.

If you want to learn more about improving your website’s accessibility initiative, schedule a complimentary ADA strategy briefing with the experts at 216digital. We make web accessibility simple and achievable, helping you develop a strategy to integrate WCAG 2.1 compliance into your development roadmap on your terms.

Don’t let your website fall behind on accessibility. Let’s work together to make sure everyone can fully experience your site.
Greg McNeil

August 22, 2024

How-to Guides

Accessibility, ADA Compliance, digital accessibility, Web Accessibility, web development, Website Accessibility

What Are Closed Captions?

Who Benefits From Closed Captions?

Closed Captions vs. Subtitles: What’s the Difference?

What are the Differences Between “Closed Captions” and “Open Captions”?

What Are the Legal Obligations for Closed Captioning?

The ADA’s Requirements for Closed Captions

FCC Requirements for Closed Captions

What Are the Benefits of Using Closed Captioning?

Best Practices for Closed Captioning

How to Add Captions to Videos

What If My Video Service Doesn’t Support Closed Captions?

Conclusion

Why Accessibility Matters for Slideshows and Carousels

Key Considerations for Accessible Slideshows

Keyboard Navigation

Best Practices:

Descriptive Labels and Alt Text

Best Practices:

Pause/Play Buttons

Best Practices:

Using ARIA Roles for Screen Reader Compatibility

Best Practices:

Poor Color Contrast

Best Practices:

Testing for Accessibility

Ways to Test:

Final Thoughts

The Rise of ADA Lawsuits Against Restaurant Websites

What is the ADA?

The ADA’s Impact of Online Interactions

The Growing Trend of Lawsuits

Why Are Restaurants Being Targeted for ADA Lawsuits?

High Online Traffic

Common Accessibility Issues

Lack of Awareness

Automated Tools for Testing

Common Accessibility Issues on Restaurant Websites

Menus That Aren’t Accessible

No Keyboard Navigation

Unlabeled Form Fields

Color Contrast Issues

Missing Alt Text for Images

What Can You Do to Avoid a ADA Lawsuit?

Get an Accessibility Audit

Use Accessibility Tools

Make Your Menus Accessible

Train Your Team

Work With a Developer Who Understands Accessibility

Stay Informed

Update Your Website Regularly

Wrapping Up

Why It’s Important to Ensure Your Agency Understands Digital Accessibility

When Is the Best Time to Ask Your Agency About Accessibility?

Key Web Accessibility Questions to Ask Your Digital Agency

What Is the Current State of Web Accessibility on Our Website?

What Is Your Approach to Web Accessibility?

How well do you know WCAG 2.1 guidelines?

Do you integrate accessibility into every stage of development?

Do you use both automated and manual testing methods?

How Will You Ensure Accessibility Is Maintained?

Do you offer ongoing accessibility monitoring?

Can you train our team to maintain accessibility?

What is your process for updating the site to stay compliant with new regulations?

How Do You Prioritize Web Accessibility Issues?

How do you determine which issues need immediate attention?

How long will it take to resolve accessibility issues?

What’s Your Experience with Similar Projects?

Have you worked with other companies in our industry?

Can you show us examples of websites you’ve made accessible?

Prioritize Accessibility from the Start

Contact 216digital for Your Accessibility Needs

Why Web Accessibility Matters

Understanding Device-Specific Accessibility Challenges

Web Accessibility on Desktops

Web Accessibility Challenges:

Mobile Devices

Accessibility Challenges:

Web Accessibility on Tablets

Accessibility Challenges:

Effective Testing Methods and Tools