Digital Marketing Tips and Strategies to Grow Your Business

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 Make Your Website’s Pop-Ups Accessible
Pop-ups are often used on websites to capture leads, promote special offers, or guide users through certain actions. However, while they can be powerful tools for engagement, they can also be a nightmare for users, especially those with disabilities. An inaccessible pop-up can frustrate users, prevent them from completing tasks, or even drive them away from your site.

To ensure your pop-ups enhance the user experience for everyone, including those using assistive technology, it’s essential to focus on accessibility. Let’s dive into the challenges of pop-ups and explore actionable steps and coding techniques to make them accessible.

Challenges of Website Pop-Ups for Accessibility

Hard to Close or Dismiss

One of the most common complaints about pop-ups is how difficult they can be to close. Whether it’s a tiny “X” button or a disappearing background overlay, some pop-ups seem almost impossible to dismiss without frustration. For users with mobility impairments, small targets like these can be especially problematic. Additionally, people who rely on keyboards or screen readers may not be able to easily navigate to the close button.

Improperly Labeled Pop-Ups

Screen reader users rely heavily on clear labels and descriptions to understand the content on a page. When a pop-up appears without proper labeling, it can be incredibly confusing. If there’s no clear announcement of what the pop-up is for or if the content isn’t properly described, these users may struggle to engage with the pop-up at all.

Focus Trap

A “focus trap” happens when a user is unable to move out of the pop-up window using their keyboard. This can cause frustration and make it difficult, if not impossible, to return to the main content. For users who rely on keyboard navigation, a focus trap can completely halt their browsing experience.

Disruption of Browsing Experience

A poorly timed or intrusive pop-up can disrupt the browsing experience for all users, but it’s especially challenging for people with disabilities. Imagine navigating a website with a screen reader, and a pop-up interrupts your flow. If the pop-up isn’t well integrated or easy to dismiss, it can leave users feeling lost or overwhelmed.

Now that we’ve identified the challenges, let’s explore how to address these issues and ensure your pop-ups are accessible to everyone.

Best Practices for Accessible Pop-Ups

Make Sure Pop-Ups Are Easy to Close

One of the easiest ways to make your pop-ups more user-friendly is to ensure they’re easy to close. Provide a large, clearly visible close button, and place it in a predictable spot, like the top-right corner of the pop-up. Avoid small, hard-to-click targets, especially for users with mobility issues.

Code Tip: Include a Keyboard Shortcut

Make sure the pop-up can be dismissed using the Esc key. Adding this functionality allows keyboard users to close the pop-up quickly, without needing to navigate to a specific button.
```
document.addEventListener('keydown', function(event) {
  if (event.key === "Escape") {
    closePopup();
  }
});
```
In this example, the Esc key is programmed to trigger the closePopup() function, providing an easy way to dismiss the pop-up.

Properly Label the Pop-Up for Screen Readers

When a pop-up appears, it should be immediately announced to users who rely on screen readers. This helps provide context so they can understand what’s happening on the page. You can do this by using ARIA (Accessible Rich Internet Applications) attributes.

Code Tip: Use ARIA Attributes for Accessibility
```
<div role="dialog" aria-labelledby="popupTitle" aria-describedby="popupDescription">
 <h2 id="popupTitle">Special Offer</h2>
  <p id="popupDescription">Get 20% off your next purchase when you sign up for our newsletter.</p>
</div>
```
In this code, the role="dialog” attribute lets screen readers know that a pop-up window (dialog box) has appeared. The aria-labelledby and aria-describedby attributes provide titles and descriptions that help users understand what the pop-up is about.

Prevent Focus Trapping

A common accessibility mistake with pop-ups is trapping focus within the pop-up window, which prevents keyboard users from returning to the main content. To avoid this, ensure that users can freely navigate between the pop-up and the rest of the page.

Code Tip: Manage Focus Correctly

When the pop-up opens, move the user’s focus to the first interactive element (like a form field or close button). When the pop-up closes, return focus to the element that triggered it, allowing users to continue where they left off.
```
const popup = document.getElementById("popup");
const triggerButton = document.getElementById("triggerPopup");
triggerButton.addEventListener('click', function() {
  popup.style.display = "block";
  popup.querySelector('input').focus(); // Move focus to the first element in the popup
});
function closePopup() {
  popup.style.display = "none";
  triggerButton.focus(); // Return focus to the triggering element
}
```
Avoid Disrupting the Browsing Experience

Pop-ups should never interrupt the user’s browsing experience unexpectedly. It’s important to trigger pop-ups at the right time and make them easy to interact with.
- Don’t use pop-ups on page load – This can be jarring for users, especially those using screen readers. Instead, trigger pop-ups based on user action, like clicking a button or scrolling to a specific section of the page.
- Use overlays carefully – Ensure that any background overlay that appears when a pop-up opens doesn’t obscure important content or make it difficult for users to navigate.
- Provide Accessible Text for Pop-Up Links and Buttons
You should clearly label and make the buttons and links in your pop-up easy to understand.Avoid generic text like “Click Here” or “Submit.” Instead, use descriptive text that explains the action.

Example:
- Good: “Sign Up for Our Newsletter”
- Bad: “Submit”
This helps all users, including those using screen readers, understand exactly what will happen when they click on a button.

Keep the Design Simple and Clear

Simplicity is key when it comes to accessible pop-ups. Avoid cluttering the pop-up with too much information or distracting animations. Use high-contrast colors and large, readable fonts to make the content easy to digest.

Test with Real Users and Assistive Technologies

The best way to ensure your pop-ups are truly accessible is to test them with real users, especially those who rely on assistive technologies. Tools like screen readers, voice commands, and keyboard-only navigation can help you understand how users will interact with your pop-up.

Tools for Testing Pop-Up Accessibility:
- Screen readers: Test your pop-up with screen readers like NVDA (NonVisual Desktop Access) or JAWS (Job Access With Speech).
- Keyboard navigation: Make sure all interactive elements in the pop-up can be accessed using only a keyboard.
- Accessibility checkers: Use automated tools like WAVE or Axe to scan your site for accessibility issues.
Make a Pop with 216digital

Making sure your website’s pop-ups are accessible isn’t just about ticking boxes—it’s about making sure everyone has a great experience on your site. Simple steps like ensuring your pop-ups are easy to close, clearly labeled, and don’t trap users can make a big difference in how people interact with your content.

Whether you’re a website owner, developer, or content creator, making your pop-ups accessible means more people can engage with what you have to offer. It also shows that you care about creating a web experience that everyone can enjoy.

To take your pop-ups from good to great, consider scheduling an ADA briefing with 216digital. We’ll help you make thoughtful adjustments and test your pop-ups with assistive technologies to ensure they enhance, rather than hinder, the user experience. Let’s work together to make sure your pop-ups are welcoming and accessible to all your visitors!
Greg McNeil

September 13, 2024

How-to Guides

digital accessibility, How-to, pop-ups, Web Accessibility, web development
Web Accessibility: The Legal Risks of Ignoring It
In recent years, web accessibility lawsuits have skyrocketed, jumping from around 2,285 cases in 2018 to over 4,605 in 2023.

Today, web accessibility isn’t just a matter of inclusivity—it’s a crucial legal requirement. Websites that fail to meet accessibility standards, including those set by the Americans with Disabilities Act (ADA), risk facing expensive fines and legal battles.

Regardless of whether you’re running a small business or managing a big company, implementing web accessibility isn’t optional—it’s crucial. We’ll explore the legal dangers of ignoring web accessibility, review recent cases, and provide guidance on how businesses can protect themselves by ensuring they comply with the ADA.

Why Web Accessibility Matters

Accessibility is not just a legal requirement—it’s a fundamental aspect of creating an inclusive digital world. For individuals with disabilities, web accessibility means the difference between being able to fully engage with a website or facing barriers that prevent them from accessing vital information, products, or services. This includes those who may be:
- Visually impaired (e.g., blind or low vision)
- Deaf or hard of hearing
- Individuals with mobility, cognitive, or neurological disabilities
For example, a visually impaired person relies on screen readers to navigate websites, while someone with a motor impairment might depend on keyboard navigation or voice commands. Without these adaptive measures, individuals with disabilities face exclusion from participating in the digital space, which can affect their ability to work, learn, shop, or connect socially.

Web Content Accessibility Guidelines (WCAG)

The World Wide Web Consortium (W3C) developed the Web Content Accessibility Guidelines (WCAG), which offer a set of standards to ensure that websites are accessible. The most commonly referenced standards are WCAG 2.1 Level A and AA, and they form the basis for many legal requirements, including those found in the ADA.

ADA and Web Accessibility

The ADA was initially drafted to apply to physical spaces, but courts have since interpreted it to include websites. When a website isn’t accessible, it can be viewed as discriminatory and may lead to the business violating Title III of the ADA, which prohibits discrimination against individuals with disabilities in public accommodations.

ADA Compliance and Legal Consequences

Failure to comply with web accessibility standards can lead to serious legal issues, particularly in ADA lawsuits. Many companies have faced litigation for not having accessible websites, which could lead to court-mandated accessibility updates, financial penalties, and legal fees.

ADA Lawsuits

If your website fails to meet web accessibility standards, you risk being sued. In 2023, federal and state courts saw 4,605 ADA-related digital lawsuits, and the trend continues to grow.Organizations of all sizes, from small businesses to Fortune 500 companies, are facing these lawsuits. Every year, thousands of businesses get sued because their websites are not accessible to people with disabilities, leading to costly legal fees and settlements.

Case Study: Robles v. Domino’s Pizza

For example, in 2016, Guillermo Robles sued Domino’s Pizza, arguing that the company violated Title III of the ADA because its website and mobile app were not accessible to screen readers. A district court initially dismissed the case, but Robles took it to the Ninth Circuit Court of Appeals, which disagreed with the earlier ruling. The court decided that the ADA did apply to websites and stated that Domino’s had “received fair notice” that its digital content needed to comply with the ADA. This case set a precedent for the applicability of the ADA to the digital space, reinforcing the legal obligations businesses have to ensure online accessibility.

In October 2019, the U.S. Supreme Court declined to review the Ninth Circuit’s decision. Later, in June 2021, a California federal court found that Domino’s was still in violation of both Title III of the ADA and California’s Unruh Act, as their website and mobile app remained inaccessible for ordering. As part of the settlement, Robles received $4,000 in statutory damages, and Domino’s was required to update its website to meet WCAG 2.0 guidelines.

These lawsuits often result in more than just legal fees. They can lead to significant financial penalties that can be just as damaging to a business’s bottom line.

Financial Penalties

Ignoring web accessibility can result in more than just lawsuits; businesses face hefty financial penalties that can disrupt their operations and tarnish their brand image. These penalties typically include settlement costs, attorney fees, and fines mandated by the courts. Moreover, non-compliant businesses often incur additional expenses for accessibility audits, website remediation, and ongoing maintenance to ensure compliance. The financial strain can be particularly overwhelming for small businesses, but even large corporations aren’t immune to the consequences.

Below are case studies that illustrate the severe financial penalties companies can face when ignoring web accessibility.

Case Study: Target Corporation Settlement

In 2008, Target Corporation faced a class-action lawsuit filed by the National Federation of the Blind (NFB).

The NFB claimed that Target’s website was not accessible to people who are visually impaired. Users with vision impairments couldn’t navigate the site or make purchases using screen readers. This was seen as a violation of the Americans with Disabilities Act (ADA), which protects people with disabilities from discrimination.

As part of the settlement, Target paid $6 million to those affected. This showed businesses that not following web accessibility rules could lead to big financial penalties. Target also had to update its website to make sure it worked with screen readers and other assistive technologies.

This case was a wake-up call for many companies, highlighting that failing to meet web accessibility standards can lead to expensive legal and business problems. It set a clear example that websites, like physical stores, must be accessible to everyone.

Case Study: Beyoncé’s Parkwood Entertainment

In 2019, a visually impaired person sued Beyoncé’s company, Parkwood Entertainment. The claim was that Beyonce.com was hard to use with screen readers. The lawsuit alleged the site lacked basic accessibility features. These included image descriptions and easy navigation for screen readers. This lack of accessibility went against the ADA. It also prevented people with disabilities from accessing Beyoncé’s products and services.

The settlement details are private. However, the case shows the risks of ignoring web accessibility, even for famous brands.

Mitigating Legal Risks: Proactive Steps for ADA Compliance

To avoid expensive legal issues and damage to your reputation from not following web accessibility rules, businesses should act proactively. Here are some key steps to help you meet accessibility standards and protect your organization from ADA lawsuits.
- Understand Web Accessibility Guidelines: WCAG provides rules to make web content more accessible. Learn about these guidelines to know what changes are needed. They cover things like making text easy to read, providing alternative text for images, and ensuring keyboard navigation is smooth.
- Conduct a Website Audit: Regularly check your website for accessibility problems. There are online tools that can help spot issues, such as missing alt text for images or color contrast problems. By leveraging the expertise of professionals like 216digital, you can ensure that every aspect of your website meets WCAG standards.
- Implement Ongoing Training: Train your team, especially those who manage and create content for your website, on web accessibility. This builds a culture of inclusivity and makes sure accessibility stays a priority.
- Stay Informed and Up-to-Date: Web accessibility standards and best practices can change over time. Keep up with any updates and make necessary changes to your website to stay compliant.
- Ongoing Monitoring: Compliance isn’t a one-time task. 216digital’s a11y.Radar service offers ongoing monitoring of your website or app to catch any new accessibility issues. This proactive approach helps prevent potential violations before they result in costly lawsuits.
Get Proactive about ADA Web Accessibility

Neglecting web accessibility can lead to serious legal troubles and hefty fines, especially with the rise in ADA lawsuits. Ensuring your website is accessible is crucial for protecting your business and avoiding potential risks.

To safeguard your business and ensure you’re meeting all accessibility standards, consider scheduling an ADA briefing with 216digital. We understand developing a strategy for ADA Website accessibility and liability can be a beast of a project. So, why let web accessibility hijack your development backlog?

We will help develop a strategy to integrate WCAG 2.1 compliance into your development roadmap on your terms. To learn more about how the ADA experts at 216digital can help build an ADA WCAG 2.1 compliance strategy on your terms, schedule an ADA Strategy Briefing.
Greg McNeil

September 12, 2024

Legal Compliance

ADA Lawsuits, digital accessibility, Web Accessibility, web accessibility lawsuits
WCAG: Web Accessible Coding 101
Creating an inclusive online experience is more important than ever in today’s digital world. Accessible coding isn’t just a nice-to-have; it’s a must-have. But what does accessible coding mean, and why should you care? In this article, we’ll dive into the basics of accessible coding, explore seven fundamental principles with examples, and explain why following these guidelines benefits everyone.

What is Web Accessibility?

Web accessibility means making websites usable by everyone, including people who rely on assistive technologies like screen readers, people who can’t use a mouse, or those with visual or cognitive impairments. The Web Content Accessibility Guidelines (WCAG) offer a framework for creating accessible content. Adhering to WCAG helps ensure that your site is user-friendly for all.

Why Accessible Coding is Important

Accessible coding is crucial for a variety of reasons:
- Wider Audience Reach: By making your site accessible, you expand your audience and enhance user experience for everyone.
- SEO Benefits: Accessibility often overlaps with good SEO practices, boosting your website’s visibility.
- Legal Requirements: Laws like the ADA in the U.S. require websites to be accessible, protecting you from potential legal issues.
Now let’s dive into seven core principles of accessible coding and see how you can implement them in your website’s code.

1.Provide Alt Text for Non-Text Components

Alt text (short for “alternative text”) is one of the most basic, yet essential, components of web accessibility. According to WCAG 2.1 SC 1.1.1 (Non-text Content), it serves as a textual description for images and non-text content, enabling users who rely on screen readers to understand what the visual content represents.

Why Alt Text is Important:
- Screen Reader Accessibility: People with visual impairments use screen readers that read aloud the alt text. If an image lacks alt text, the user will miss out on important information.
- SEO Benefits: Alt text improves SEO by giving search engines more information about the content of your images. Search engines can’t “see” images, but they can index alt text, helping your site rank better in image search results.
Best Practices for Writing Alt Text:
- Be Descriptive and Specific: Describe the content and purpose of the image. For example, instead of just saying “image of a tree,” say, “A large oak tree in a park during autumn.”
- Keep it Concise: Alt text should typically be no longer than 125 characters. This keeps the description brief while still conveying necessary information.
- Use Empty Alt Attributes for Decorative Images: For images that serve a purely decorative purpose (i.e., they don’t convey information or serve a functional purpose), use an empty alt attribute (alt=””). This prevents screen readers from wasting time on irrelevant content.
Example:
```
<img src="award-ceremony.jpg" alt="CEO receiving the 'Best Company Award' at the 2024 Business Awards" />
```
In this example, the alt text describes the image in a way that conveys its significance. This provides context for users who cannot see the image and helps them understand its role on the page.

For purely decorative images that don’t add meaning, you would use an empty alt attribute:
```
<img src="border-decoration.png" alt="" />
```
For more information about Alt text for images, check out our article Understanding Image Alt Text Descriptions.

2. No Keyboard Traps

Keyboard accessibility is critical for users who cannot use a mouse and instead rely on keyboard navigation. “Keyboard traps” occur when users get stuck in a particular interactive element (such as a form field or a modal window) and can’t navigate out using the keyboard alone.

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 Prevent Keyboard Traps:
- Ensure All Interactive Elements Are Focusable: Elements like buttons, form fields, and links must be easily accessible via the keyboard’s “Tab” key.
- Provide a Clear Way to Escape Modals: If using pop-ups or modal windows, ensure that users can exit using keyboard controls, typically the “Escape” key.
Example:
```
<a href="submit.html" id="submit-btn" tabindex="0">Submit</a>
```
This code ensures that the “Submit” button can be accessed via keyboard. The tabindex="0" attribute allows it to be included in the natural tab order of the page.

3. Allow Users to Resize Text

People with visual impairments often need to increase the text size on websites. Accessible websites allow users to resize text up to 200% without breaking the page layout or losing content.

How to Implement Text Resizing:
- Use Relative Font Sizes: Avoid using fixed units like px for font size. Instead, use relative units such as em or percentages (%). This ensures that text can scale properly.
- Test Text Scaling: After implementing relative font sizes, test your site by increasing text size to 200% in different browsers to ensure the content remains legible and the layout doesn’t break.
Example:
```
body {
font-size: 100%; /* Base font size that scales */
}
h1 {
    font-size: 2em; /* 200% of the body text size */
}
```
In this example, the body text is set at a flexible 100%, and the headings use a relative size (2em) that will scale based on the user’s settings.

4. Avoid Seizure Triggers

Flashing elements or rapid changes in brightness can trigger seizures in people with photosensitive epilepsy. The WCAG SC 2.3.1 recommends that content should not flash more than three times per second.

How to Prevent Seizure Triggers:
- Avoid Fast Animations: If you need animations, make sure they don’t flash rapidly or use extreme changes in brightness.
- Limit Flashing to Below 3 Hz: Ensure that any flashing or blinking elements do not exceed three flashes per second.
Example:
```
/* Safe animation with no rapid flashing */
@keyframes safe-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.flash-warning {
    animation: safe-flash 2s infinite;
}
```
This animation fades in and out at a safe pace, avoiding any rapid flashing that could trigger seizures.

5. Follow a Logical Reading and Code Order

Users who rely on screen readers navigate websites based on the underlying HTML code order, which means the structure of your code must match the logical flow of the content.

According to WCAG Success Criterion 2.4.3, websites should be designed to allow users to navigate easily using links, headings, and other navigation tools. This means your website should allow users to effortlessly find what they’re looking for without feeling lost.

How to Implement a Logical Code Order:
- Use Semantic HTML Elements: Elements like <header>, <nav>, <main>, and <footer> create a well-structured HTML document that is easy for screen readers to understand.
- Organize Content in a Meaningful Way: Ensure that headings, paragraphs, and sections appear in the correct order in your code, as this will directly impact the reading experience for users with assistive technology.
Example:

Here, the content is organized in a logical structure, making it easier for screen readers to understand and navigate.
```
  <header>
    <h1>Welcome to Our Store</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#shop">Shop</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>
    </nav>
</header>
<main>
    <section id="shop">
        <h2>Shop Our Latest Collection</h2>
        <p>Browse our new products for this season.</p>
    </section>
</main>
<footer>
    <p>&copy; 2024 Our Store</p>
</footer>
```
6. Use Headings Appropriately

Headings are critical for organizing content and allowing users to quickly scan and understand the page structure. Screen readers rely on headings to navigate through content, making proper heading hierarchy essential.

Best Practices for Headings:

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.
- Use Headings to Structure Content: Use <h1> for the main title of the page, <h2> for section titles, and so on. Don’t skip heading levels (i.e., don’t jump from <h1> to <h3>).
- Avoid Using Headings Solely for Styling: Headings should not be used just to make text look bigger or bolder. Use them to represent the content hierarchy.
Example:
```
<h1>Guide to Accessible Coding</h1>
<h2>Why Accessibility Matters</h2>
<h3>Legal Requirements</h3>
<h3>Improved User Experience</h3>
```
In this example, the headings follow a logical order, making the content easy to navigate for users with screen readers.

7. Use HTML Tags That Make Websites Accessible

HTML provides several built-in tags that make websites more accessible. Using these elements correctly ensures that assistive technologies can understand and interact with the content.

Key Accessible HTML Elements:
- <label>: Associates a form field with a text description, making it easier for screen readers to understand.
- <button>: Creates a clickable button that is accessible via keyboard and screen readers.
- ARIA Attributes: These attributes, such as aria-label and aria-required, provide additional context for assistive technologies.
Example:
```
<form>
    <label for="email">Email Address:</label>
    <input type="email" id="email" name="email" aria-required="true">
</form>
```
In this example, the <label> tag clearly associates the input field with its description, while the aria-required="true" attribute informs screen readers that the field is mandatory.

Don’t Just Code—Create a Welcome Mat for the Web

Creating accessible websites isn’t just about meeting guidelines—it’s about making sure everyone has equal access to information and services online. Accessible coding improves user experience for everyone and can even boost your site’s search engine ranking. Plus, it shows that you care about all your users.

By following these principles and using the resources provided, you can build websites that are welcoming and usable for everyone. Keep these guidelines in mind as you code, and your website will be a better place for all its visitors!

For more information on web accessibility and coding best practices, you can visit the WCAG website.
Greg McNeil

September 10, 2024

How-to Guides

digital accessibility, How-to, WCAG, WCAG Compliance, Web Accessibility, web development
Web Accessibility Overlays: Myths vs. Reality
You’ve just added a shiny new widget to your website, promising instant accessibility and compliance with laws like the Americans with Disabilities Act (ADA). Sounds too good to be true, right? That’s because it often is. Many companies market web accessibility overlays as the magic solution to all your accessibility problems. They promise that with just a quick install, your site will be fully compliant and accessible to everyone. It sounds like the easiest fix in the world—but is it really?

The truth is, while these overlays might seem like a simple answer, they don’t solve everything. From complex guidelines to ongoing legal risks, relying on an overlay alone can give you a false sense of security. In this article, we’ll dive into the real story behind these widgets and explore why genuine web accessibility requires more than just a quick fix. So, buckle up and let’s uncover the truth about web accessibility overlays and what it really takes to make your site inclusive for all users.

Myth #1: Web Accessibility Overlays Fully Automate Web Accessibility Compliance

One of the biggest misconceptions about web accessibility widgets is that they can fully automate compliance with web accessibility standards. Many companies selling these overlays promise that adding their widget to a site will instantly make it accessible and compliant with laws like the ADA or the Web Content Accessibility Guidelines (WCAG). This sounds great, right? A simple piece of code can fix all your accessibility problems in a matter of minutes!

The Truth: Overlays Can’t Fix Everything

Here’s the thing: overlays can’t fix everything. While they may assist with some accessibility needs—like text resizing or color contrast—they fall short of addressing complex issues that require thoughtful design and coding. Real accessibility involves:

Complexity of WCAG Standards

The WCAG guidelines cover a wide range of disabilities—visual, auditory, motor, and cognitive. Meeting these standards often requires more than what widgets can provide. For example, overlays might not solve issues such as:
- Navigation menus that aren’t keyboard-friendly
- Popups or modals that don’t properly capture focus
- Logical tab order problems
- Incorrectly labeled images, buttons, or form fields
- Buttons made with non-interactive HTML tags
While most of these issues are not visible to all users, these issues are significant barriers for users with disabilities. This means that while overlays might help with some parts of compliance, they can’t cover everything.

Surface-Level Changes

Many overlays offer features like enlarging text or adjusting color contrast. While these can be helpful, they only address surface-level issues. True compliance involves deeper changes to the website’s code and design—something they can’t provide.

Dynamic Content Challenges

Overlays may struggle with dynamic content like live updates or interactive features. These parts of a website that change often might not work well with overlays, leading to potential accessibility problems.

Myth #2: Overlays Are a One-Size-Fits-All Solution

Some believe that widgets are a one-size-fits-all solution for every website. The idea is that once you add an overlay, it will work for every visitor, no matter their needs. Marketing claims often suggest that they can solve accessibility issues for all types of disabilities.

The Truth: Overlays Aren’t Universal Fixes

Every website is unique, and so are its users’ needs. Here’s why overlays often fall short:

Different Needs for Different Sites

Websites come in various forms, from simple blogs to complex e-commerce sites. An overlay might offer basic features, but it might not be suitable for every site. For example, a shopping site with complex navigation might need specific accessibility adjustments that an overlay can’t provide.

Incompatibility Issues

Overlays can sometimes interfere with a site’s existing design or functions, especially for custom-built websites or those with complex interactive elements. Instead of helping, the overlay might cause problems or make the site less accessible.

User Preferences

Different users have different needs. While overlays might offer some customization options, like changing font size or color contrast, they can’t cater to all specific needs. For example, someone with a motor disability might need easy keyboard navigation, while someone with a cognitive disability might need simpler content. Overlays often lack the flexibility to address all these diverse needs.

Myth #3: Overlays Improve Accessibility for All Users

It’s easy to believe that if you add an overlay, you’ve made your website more accessible for everyone. This myth is particularly damaging because it can lead to a false sense of security. Site owners might think they’ve done enough and may not feel the need to make further efforts toward accessibility.

The Truth: Overlays Can Create Barriers

Overlays can actually create new barriers for some users. For example, screen readers—used by people who are blind or have low vision—might conflict with overlays, causing confusion or glitches. In some cases, users have reported that they make websites even harder to navigate. So, while widgets might help some users in certain situations, they can also cause new challenges for others.

Myth#4: Overlays Are a Substitute for Genuine Accessibility Practices

There’s a belief that adding an overlay is all you need to do for accessibility compliance. Some think this means they can skip the hard work of manual audits, coding standards, and user testing. After all, if the overlay claims to handle accessibility, why bother with anything else? But that’s far from the truth. Genuine accessibility takes more than just a quick fix.

The Truth: Real Accessibility Requires Real Effort

True web accessibility means creating an inclusive experience for everyone, which involves more than just using an overlay. Here’s why:

Genuine Accessibility Takes Effort

Accessibility involves a mix of automated tools and human effort. Overlays might be part of an accessibility strategy, but they aren’t a replacement for manual audits and user testing. Human testers, especially those with disabilities, can provide insights that automated tools can’t. Real accessibility requires following coding standards, testing with real users, and regularly updating the site based on feedback. It’s a continuous process, not a one-time fix.

Myth #5: Web Accessibility Overlays Decrease Legal Liability

There’s a common myth floating around that adding a web accessibility overlay to your website will reduce your legal liability for not meeting accessibility standards. The idea is that if you just slap on an overlay, you’re covered, and you won’t have to worry about being sued for accessibility issues. Sounds tempting, right? Especially if you’re looking for a quick fix to avoid legal trouble.

The Truth: Overlays Don’t Eliminate Legal Risks

Here’s the reality: using an overlay doesn’t guarantee you’re legally safe. While overlays might help with some features, they don’t always meet legal requirements or ensure full compliance with laws like the ADA.

Incomplete Compliance

Overlays might improve some aspects, but they often miss key parts of accessibility, like keyboard navigation or dynamic content. If your site doesn’t fully meet accessibility standards, it can still be considered non-compliant. Legal requirements ensure all users, including those with disabilities, can access and use your website properly.

Ongoing Legal Risk

There were 933 lawsuits last year against websites using these so-called “accessibility solutions,” and the number is growing. This year, we’re on track for over 1,100 lawsuits against sites with these ineffective widgets. In the first half of 2024 alone, 503 lawsuits targeted sites with active widgets, making up 20% of all accessibility-related lawsuits this year.

Overlays in Settlement Agreements

Recently, many settlement agreements have made it clear that using overlay solutions like AudioEye, AccessiBe, and Accessibility Spark doesn’t meet compliance standards. This shows the need for strong accessibility measures integrated into your site’s design.

Overlays Can Make You a Target

Businesses using overlays are facing a rise in copycat lawsuits. Lawyers target companies with third-party widgets, knowing these tools often fall short. Tools like BuiltWith can show which websites use specific tools, making it easy to target sites with these solutions.

Why Genuine Accessibility Practices Matter

Web accessibility is about more than just meeting legal requirements—it’s about making your site usable for everyone. Genuine accessibility practices, like following WCAG guidelines, conducting manual audits, and testing with real users, ensure your site is accessible to people with various disabilities. This not only helps avoid legal problems but also improves your website for all users.

To truly reduce legal risk and provide a better experience for all users:
- Adopt Comprehensive Accessibility Standards: Follow guidelines like WCAG to meet all user needs through thoughtful design and development.
- Conduct Regular Audits and Testing: Perform manual audits and usability testing with real users, especially those with disabilities, to find and fix issues that overlays might miss.
- Continuous Improvement: Regularly update your site and re-evaluate your accessibility practices to keep up with new standards and user needs.
Final Thoughts

While web accessibility overlays might seem like a quick and easy fix for making your website compliant with the ADA, they’re far from a complete solution. Overlays often fall short in addressing complex accessibility issues, and relying solely on them can lead to incomplete compliance and even create new barriers for users. Genuine web accessibility requires a thoughtful approach that includes adhering to comprehensive standards like WCAG, conducting manual audits, and testing with real users.

If you’re serious about making your website truly accessible and reducing legal risks, consider scheduling an ADA briefing with 216digital. Our experts can help you understand the full scope of accessibility requirements and develop a strategy that goes beyond quick fixes. With our guidance, you’ll ensure your site meets all necessary standards and provides an inclusive experience for everyone. Don’t leave your website’s accessibility to chance—contact 216digital today to get started on a path to genuine compliance and better user experience.
Greg McNeil

September 9, 2024

Legal Compliance

digital accessibility, Overlay, Overlay widgets, Web 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