Accessibility Archives - Page 12 of 18/Tag

Accessibility Tips for Post-Remediation Success
Hey, content creators! Now that you’ve made great strides in remediating your website for accessibility, it’s time to consider how to keep that momentum going. Creating accessible content isn’t just a one-time effort—it’s an ongoing process. Let’s dive into some best practices that will help your team consistently produce accessible content and ensure your website is welcoming to everyone.

Why Accessibility Matters

Let’s take a moment to understand why digital accessibility is so important. Accessibility means making your content usable for people with disabilities. This can include those who are blind, deaf, or have mobility challenges. When you prioritize accessibility, you’re not just meeting legal requirements but also reaching a wider audience and showing that you care about all your users. This can lead to increased engagement, better SEO, and a positive brand image.

Training Your Team

The first step in creating accessible content is training your team. Everyone involved in content creation needs to understand the basics of accessibility. Consider hosting regular workshops or training sessions to cover key topics. Here are some essential areas to focus on:

Writing Alternative Text

Alternative text, or alt text, is a crucial part of accessibility. It describes images for people who can’t see them. When creating content, ensure your team knows how to write compelling alt text. Here are some tips:
- Be Descriptive: Alt text should describe the image accurately. Instead of saying, “A dog,” say, “A golden retriever is playing fetch in the park.”
- Keep It Concise: Aim for around 125 characters. Be descriptive, but don’t overwhelm the reader.
- Skip Decorative Images: If an image is purely decorative and doesn’t add value to the content, it’s best to leave the alt text blank.
Ensuring Proper Heading Structures

Proper heading structures not only help with readability but are also vital for screen readers. When creating web content, remind your team to use headings hierarchically. Here’s how:
- Use H1 for Titles: The main title of your page should always be an H1 tag.
- H2 for Subheadings: Use H2 tags for major sections and H3 tags for subsections. This creates a clear outline for users and helps them navigate your content.
- Avoid Skipping Headings: Don’t jump from H1 to H4 without using H2 and H3. This can confuse users and screen readers.
Creating Accessible Documents

When creating downloadable content like PDFs or Word documents, keep accessibility in mind as well. Here are some tips:
- Use Headings and Styles: Just like web content, use headings in documents to help structure the information.
- Add Descriptive Links: Ensure that links are descriptive. Instead of saying “click here,” use phrases like “read our accessibility guide.”
- Check Reading Order: In PDFs, the reading order matters. Use accessibility features in your document software to ensure the content reads logically.
Ongoing Review and Feedback

Creating accessible content doesn’t stop once you’ve trained your team. It’s essential to implement an ongoing review process. Here’s how to keep improving:
- Peer Reviews
  - Encourage team members to review each other’s content for accessibility. A fresh set of eyes can catch mistakes that might have been missed. Create a checklist for peer reviews that includes items like alt text, heading structure, and color contrast.
- Feedback from Users
  - If possible, seek feedback from users with disabilities. Their insights can help you identify areas for improvement that you might have yet to consider.
- Stay Updated
  - Digital accessibility guidelines can evolve, so it’s essential to stay informed about best practices. Consider subscribing to accessibility blogs or joining professional organizations that focus on digital accessibility.
Wrapping Up

Accessibility isn’t a one-and-done task—it’s an ongoing commitment that helps you maintain a more inclusive and user-friendly website for everyone. Keeping your content accessible means continually refining your approach, training your team, and staying proactive with the latest best practices. But don’t worry, you don’t have to do it alone! Tools like a11y.Radar make it easier to stay on top of accessibility long after your initial remediation. With real-time monitoring, you can catch issues as they arise, ensuring your website remains compliant and welcoming to all users. So, keep the momentum going and know that you’re building not just a compliant site, but a better experience for every visitor.
Greg McNeil

October 24, 2024

How-to Guides, Web Accessibility Monitoring

a11y.Radar, Accessibility, Accessibility monitoring, Accessibility Remediation, Web Accessibility Remediation
ADA Compliance: What You Can and Can’t Control

Let’s be honest—navigating ADA compliance can feel like a lot, especially when you’re managing a busy website. But the good news? There are plenty of things you can control that will make your site more accessible to everyone. By taking a few simple steps, you’ll create a better experience for users, expand your audience, and avoid potential legal issues.

In this guide, we’ll break down what ADA compliance is, explore some actionable steps you can take, and cover ways to handle the parts that might be out of your control. So, let’s roll up our sleeves and dive in!

What is ADA Compliance?

ADA compliance refers to following the guidelines set by the Americans with Disabilities Act (ADA), which was established to protect the rights of individuals with disabilities. While the ADA initially focused on physical spaces, it now extends to digital spaces like websites.

In simple terms, ADA compliance ensures that your website is usable for everyone—including people with visual, auditory, physical, or cognitive disabilities. The ADA works hand-in-hand with the Web Content Accessibility Guidelines (WCAG), which outline best practices for creating accessible digital content. Meeting these guidelines is not just about following the law; it’s about making your website open and welcoming to all users.

Website Design and Development

Making your website accessible starts with thoughtful design and smart development choices. Here’s how you can set the stage:

Use Semantic HTML

Think of HTML as your website’s blueprint. When it’s organized logically, it makes it easier for assistive technologies (like screen readers) to guide users through your site. Use clear headings, lists, and tags like <h1> for main headings and <h2> for subheadings. This way, your content isn’t just well-organized—it’s also easy for everyone to navigate.

Enable Keyboard Navigation

Not everyone uses a mouse to get around online, so make sure users can tab through your site smoothly. All interactive elements—buttons, forms, menus—should be accessible via keyboard alone. To test this, try navigating your site using only your keyboard. If you hit a dead end, that’s a sign something needs fixing.

Ensure Sufficient Color Contrast

Nobody wants to squint to read your content, especially users with visual impairments. Use strong color contrast between text and background, so everything is easy to read. The minimum recommended contrast ratio is 4.5:1 for regular text and 3:1 for larger text. Not sure if your colors are cutting it? Tools like WebAIM’s Contrast Checker can help you out.

Provide Descriptive Alt Text for Images

Images are great for grabbing attention, but if they’re not described properly, they can be a barrier for screen reader users. Make sure every image has alt text that explains what’s in the picture and why it’s there. Be descriptive—something like “Red winter coat with a 30% off discount tag” tells a much more straightforward story than just a “sale image.”

Ongoing Monitoring and Testing

Getting your website accessible isn’t a “set it and forget it” deal. It’s more of an ongoing process that keeps your site up to standard:

Conduct Regular Accessibility Audits

Use tools like WAVE or Lighthouse to scan your site regularly for potential accessibility issues. These tools are like your website’s personal trainers—they’ll point out areas that need improvement, like missing alt text or insufficient color contrast.

Engage in User Testing

Automated tools are great, but there’s no substitute for feedback from real users—especially those with disabilities. Invite them to test your site and pay close attention to what they say. Their insights can reveal accessibility gaps that you might not have noticed.

Content Management and Regular Updates

Content is a big part of ADA compliance. Here’s how to keep it accessible and user-friendly:

Provide Content in Accessible Formats

PDFs and Word files are common on websites, but they’re not always easy for assistive technologies to read. Try converting documents to HTML or using accessible PDF tools to ensure everyone can engage with your content.

Keep Content Updated

Just like fashion, accessibility standards change over time. Make a habit of revisiting older content—blog posts, documents, even videos—to ensure they still meet current accessibility standards.

Avoiding Overlays

It can be tempting to install a quick-fix accessibility overlay, especially if you’re short on time. But here’s the thing: overlays often don’t solve the real issues. In fact, they can create more problems for users who rely on assistive technology. The better approach? Make direct changes to your website’s code, design, and structure for more meaningful accessibility improvements.

What You Can’t Control: Third-Party Content and Vendors

Even if you make your website as accessible as possible, certain elements are out of your direct control. But don’t worry—there are still ways to manage these challenges:

Third-Party Plugins and Widgets

Plugins and widgets can boost your site’s functionality, but they can also introduce accessibility barriers. Before installing any third-party tools, check their accessibility features and look for compliance documentation.

Content Management Systems (CMS)

Depending on the CMS you’re using—like WordPress, Shopify, or Squarespace—you might run into accessibility limitations. Whenever possible, choose accessible themes and templates, and use plugins that enhance rather than hinder site accessibility.

Outsourced Web Development and Content Creation

If you hire developers or content creators, make sure ADA compliance is part of your project requirements. Set clear expectations and conduct follow-up audits to ensure everything meets accessibility standards.

User-Generated Content

Comments, reviews, and user-generated content are valuable for your site but can pose accessibility challenges. Moderate content when possible and encourage users to follow basic accessibility guidelines, like adding alt text to images they post.

Strategies for Managing What You Can’t Control

While some aspects are beyond your control, there are ways to work around them:

Vetting and Selecting Accessible Vendors

When choosing third-party vendors or services, go with those that have a reputation for accessibility. Look for vendors that provide compliance documentation and are willing to help with accessibility support.

Adding Disclaimers and Providing Alternatives

If you have third-party content that might not be fully accessible, consider adding a disclaimer to inform users. Offer alternatives, like accessible document formats or a contact method for users who need assistance.

Foster Communication and Collaboration

ADA compliance works best when everyone’s on the same page. Encourage open dialogue about accessibility with your team, developers, and third-party partners. When everyone understands its importance, it’s easier to make your site truly inclusive.

Conclusion

Making your website accessible doesn’t have to be intimidating. By focusing on what you can control and actively managing third-party elements, you can create a site that’s welcoming to everyone. Plus, it’s not just about avoiding legal risks—it’s about building a better experience for all your users.

So, take it one step at a time. As you make improvements, you’ll reach a wider audience and create a more inclusive online space. And if you’re unsure about where your site stands, don’t hesitate to reach out to experts like 216digital for a free accessibility review. You’ve got this!

Greg McNeil

October 23, 2024

How-to Guides, Testing & Remediation

Accessibility, ADA Compliance, ADA Website Compliance, Website Accessibility
Shifting the Mindset Around Website Accessibility
When you think of “website accessibility,” what immediately comes to mind? For many, it may sound like a checkbox to mark off. But what if we transformed that mindset from an obligation to a valuable opportunity? Let’s delve into how shifting our perspective on accessibility can lead to enhanced experiences for all and generate significant value for businesses.

The Current Mindset Around Website Accessibility

Many website owners and content creators now think of web accessibility as something they “have to do.” It’s often seen as a set of rules to follow—like ensuring websites meet legal requirements or comply with the Americans with Disabilities Act (ADA). While meeting these standards is important, viewing accessibility solely as a legal obligation misses the bigger picture.

Accessibility isn’t just about rules; it’s about making digital spaces welcoming for all. This includes people with disabilities who may use screen readers or other assistive technologies. When we think of it this way, we can start to see how accessibility can enhance the overall user experience, benefiting everyone—not just those with disabilities.

The Value of Accessibility for All Users

Imagine visiting a website that’s easy to navigate, with clear text and helpful features. Sounds great, right? That’s what accessibility brings—it makes online experiences better for everyone. When websites are designed with accessibility in mind, they become more user-friendly. This means people of all ages and abilities can find what they need quickly and easily.

Think about a busy parent holding a baby in one arm and trying to use your site with one hand. Designs that make it easier to navigate with a keyboard or have larger buttons help them, just like they help users with motor difficulties.

By embracing accessibility, you’re improving the experience for everyone. This leads to happier users, longer visits to your site, and more people doing what you hope they will—like making a purchase or signing up for a newsletter. When customers find your website easy to use, they’re more likely to come back and tell others about it.

So, accessibility isn’t just about helping people with disabilities; it’s about enhancing the experience for everyone who visits your site.

Accessibility as a Business Opportunity

Now, let’s talk business. Making your website accessible isn’t just the right thing to do; it’s also a smart move. When you make your site easy for everyone to use, you show that your brand cares about inclusivity. This can boost your reputation and attract more customers.

Market Potential

Consider the market potential. People with disabilities have significant spending power. In the United States alone, they have an estimated $490 billion to spend. Globally, when you include their friends and families, this amount rises to an astounding $8 trillion, according to the Return on Disability Group. By making your website accessible, you’re reaching a market that’s often overlooked.

Search Engine Optimization

Accessibility also helps with search engine optimization (SEO), meaning your site can rank higher in search results. Many accessibility best practices—like using alt text for images, clear link texts, and well-structured content—also make your site easier for search engines to understand. This can lead to more people visiting your site, which can turn into increased sales and sign-ups.

Mitigate Legal Risk

Lawsuits related to web accessibility are on the rise. In the U.S., the number of ADA Title III lawsuits filed in federal court increased by over 100% from 2018 to 2023, according to Useablenet. By proactively addressing accessibility, you not only avoid potential legal costs but also demonstrate corporate responsibility, appealing to a broader audience and opening doors to new partnerships.

Accessibility, Innovation, and Creativity for Problem Solving

When we focus on accessibility, we often think about making things easier for people with disabilities. But what if we turned that around? Working on accessibility can spark new ideas and creativity within your team. This can lead to solutions that help all users and make your brand stand out.

Some of today’s most popular technologies, like voice assistants and text messaging, were first developed to help people with disabilities but are now used by everyone. Designing with accessibility in mind encourages teams to think outside the box. For example, adding captions to videos not only helps those with hearing impairments but also makes your content more engaging and improves SEO.

In a competitive market, new ideas are crucial to staying ahead. Accessibility challenges your team to consider different perspectives and needs. This can lead to fresh ideas and solutions that set your business apart.

Connecting Accessibility with Corporate Social Responsibility

Today’s consumers care about more than just the products they buy—they also care about the impact companies have on society. By focusing on web accessibility, you can strengthen your company’s commitment to social responsibility. It shows that you value diversity and inclusion, which can connect with customers who want to support businesses that share their values.

A study by Cone Communications found that 87% of consumers would buy from a company that supports an issue they care about, and 76% would stop buying if they found out a brand acted against their beliefs. By making accessibility a priority, you’re showing a commitment to inclusion, which resonates with values-driven consumers.

Accessibility isn’t just the right thing to do; it’s an important part of modern business ethics. It sends a message that your company wants to make a positive difference.

From “Why” to “How”: Putting Website Accessibility into Action

Changing how we view accessibility—from a duty to an opportunity—requires a new approach. By prioritizing web accessibility, your business can create better digital experiences for everyone while boosting your reputation and expanding your reach.

So, how do you begin? Start small but think big:
- Share Real-Life Stories: Use videos or testimonials that show how people with disabilities interact with digital content. Real stories have a way of making abstract concepts tangible. Seeing the difference their work makes can inspire your team to think creatively about building more accessible features.
- Foster Cross-Department Collaboration: Accessibility should be a shared responsibility. Bring together designers, developers, marketers, and content creators to ensure accessibility is part of every stage of a project. This holistic approach helps create a seamless, inclusive experience for users.
- Integrate Accessibility Into Your Core Strategy: Make accessibility a crucial part of your business strategy and product development. Don’t treat it as an add-on or afterthought. Prioritize accessibility from the beginning of your planning process—whether it’s for a website redesign, a new product launch, or a marketing campaign.
- Keep Accessibility Up to Date: Accessibility isn’t a one-time effort. Schedule regular audits to review your website, apps, and other digital content. Stay informed about changing accessibility standards and emerging best practices to make sure you’re continually improving.
Ready to take the next step? Schedule an ADA briefing with 216digital today. Our experts will walk you through the essentials of web accessibility, help identify gaps, and show you how it can become a key driver of growth for your business. Let’s turn this obligation into a lasting opportunity!
Greg McNeil

October 17, 2024

The Benefits of Web Accessibility

Accessibility, ADA Compliance, SEO, UX, WCAG, Website Accessibility
Retail Accessibility: Avoiding Common Pitfalls
The internet is overflowing with retail opportunities, but one crucial element often gets overlooked: accessibility. For online retailers, making your website accessible isn’t just about complying with legal requirements—it’s about expanding your customer base and delivering a better shopping experience for everyone. So, how can you ensure your online store is open to all shoppers and avoid common accessibility pitfalls? Let’s dive into the essentials.

Why Accessibility Matters for Online Retailers

Web accessibility means making sure everyone, including people with disabilities, can easily use and navigate your site. In the world., about 15% of the population lives with some form of disability. By ensuring your website is accessible, you’re tapping into a market with immense buying power—people with disabilities control over $6 trillion in spending globally!

But beyond opening your business to a broader audience, accessibility is also about staying compliant with laws like the Americans with Disabilities Act (ADA). In 2023, 82% of ADA lawsuits were related to web accessibility issues in the retail industry, affecting both large and small businesses alike. If your website isn’t accessible, you’re not just missing out on customers—you could also be facing legal risks.

The Web Accessibility Guidelines

The Web Content Accessibility Guidelines (WCAG) are the foundation for creating an accessible website. These guidelines revolve around four main principles, often referred to as POUR:
- Perceivable: Content must be presented in a way that all users can perceive, whether visually or audibly.
- Operable: Your site should be fully navigable, whether users are using a mouse, keyboard, or assistive technologies.
- Understandable: Your content should be easy to comprehend and navigate.
- Robust: Your website should work well with a variety of assistive tools, like screen readers.
For retailers, aiming for WCAG 2.1 Level AA compliance is a great starting point, and it’s the level referenced by most legal frameworks for web accessibility.

Steps for Online Retailers to Improve Accessibility Right Now

Improving your website’s accessibility might sound like a big task, but it’s more manageable than you think. Here are some quick and effective steps to make your site web accessible:

Auditing Retail Sites for Accessibility Issues

The first step is knowing where your site stands. Start with automated tools like Lighthouse or WAVE to flag common issues, such as missing image descriptions or poor color contrast. Then, dive deeper with manual testing, working with accessibility experts to uncover more subtle barriers, like challenges with forms or navigation.

Make Visual Content Accessible

People with visual impairments rely on alt text to understand images, so be sure to include detailed alt descriptions for all meaningful visuals. For example, instead of a vague description like “product,” use something more specific like “Blue ceramic coffee mug with a handle.” This simple change helps users with screen readers understand what’s being shown.

Don’t forget about video content! WCAG guidelines require captions for pre-recorded audio in videos. Ensure that auto-generated captions, like those from YouTube, are accurate, and provide transcripts for podcasts to make all media accessible.
```
<img src="coffee-mug.jpg" alt="Blue ceramic coffee mug with a handle">
<video controls>
  <track kind="captions" src="captions_en.vtt" srclang="en" label="English">
</video>
```
Optimize Website Navigation and Structure

Some users navigate your site without a mouse, relying solely on their keyboard. Make sure your site can be fully navigated using just a keyboard, with elements like menus, buttons, and forms accessible through “tab” key navigation. Also, ensure every interactive element has a visible focus indicator, like a border around buttons or links, so users can easily see where they are on the page.
```
button:focus, a:focus {
  outline: 2px solid #ffcc00; /* Provides a visible focus indicator */
}
```
Improve Form Accessibility

Checkout forms can be a stumbling block for accessibility, especially if they aren’t screen reader-friendly. Make sure all form fields have clear labels and that error messages don’t rely solely on color. For example, instead of just using a red outline to indicate a required field, include a text message like “This field is required” to make the error clear for all users.
```
<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <span class="error" role="alert">This field is required</span>
</form>
```
The Retail Shopping and Checkout Process

Imagine trying to check out but not knowing where you are in the process—frustrating, right? Break your checkout process into clear, labeled steps and ensure it’s compatible with assistive technologies. Also, consider adding alternative payment methods like PayPal, Google Pay, or Apple Pay to improve usability for all customers.

To meet WCAG SC 2.4.4 standards, you can use visual breadcrumbs or progress indicators to let users know where they are in the checkout process.
```
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/cart">Cart</a></li>
    <li><a href="/shipping">Shipping</a></li>
    <li aria-current="page">Payment</li>
  </ol>
</nav>
```
Implement ARIA Landmarks and Roles

ARIA (Accessible Rich Internet Applications) landmarks and roles help assistive technologies identify key sections of your page. For instance, wrapping your site’s header in a role="banner" helps screen readers identify it as the main header, making it easier for users to navigate through your site.
```
<header role="banner">
  <nav role="navigation">
    <ul>
      <li><a href="/home">Home</a></li>
      <li><a href="/products">Products</a></li>
    </ul>
  </nav>
</header>
```
Testing and Ongoing Monitoring for Retailers

Web accessibility isn’t a one-time fix—it’s an ongoing process. Retail websites are constantly changing. Regular testing and monitoring are essential to ensuring that those updates or changes to your site don’t introduce new accessibility barriers. Tools like 216digital’s a11y.Radar can help you stay on top of accessibility issues with automated scans and detailed reports, making it easier to maintain a compliant and user-friendly website as new content is added.

Partnering with Accessibility Experts

If all of this sounds overwhelming, you don’t have to go it alone. Partnering with accessibility experts can fast-track your progress. Whether you need a thorough audit, code remediation, or ongoing support, companies like 216digital specialize in helping retail sites meet web accessibility standards. They can ensure your site is not only compliant but also delivers a seamless, enjoyable shopping experience for all users.

Accessibility Overlays: A Quick Fix or a Long-Term Solution?

You might have heard about accessibility overlays—tools that promise a quick fix for all your accessibility needs. While these overlays might sound tempting, they often fall short. Overlays can miss deeper, underlying issues with your website’s code and design, leaving you vulnerable to ADA lawsuits. In fact, 933 companies were sued last year after installing overlay solutions and many accessibility experts caution against relying on them as a long-term solution.

Instead, focus on making meaningful changes to your website’s design and functionality. Overlays might be a temporary patch, but they shouldn’t replace a full accessibility strategy.

Check Accessibility Off Your Shopping List

By making your website accessible, you’ll not only increase your customer base but also create a better shopping experience for everyone. Accessibility is a journey, and it’s one worth taking. Follow the steps outlined above, test your site regularly, and don’t hesitate to partner with experts to ensure your site stays compliant and user-friendly.

To help you get started on the right path, consider scheduling an ADA briefing with 216digital. Our team of experts can walk you through the latest accessibility guidelines, provide actionable insights, and show you how to ensure your site complies with ADA standards.

Online shopping should be for everyone, so let’s make it happen together!
Greg McNeil

October 16, 2024

How-to Guides, Legal Compliance, WCAG Compliance

Accessibility, ADA Compliance, ADA Website Compliance, ecommerce website, Retail, WCAG
The Dos and Don’ts of Using Tabindex
Running a website, whether for an online store or a blog, means thinking about your users—including making your site accessible to everyone. You want as many people as possible to engage with your site, and that includes those who rely on keyboard navigation or assistive technologies.

One minor but powerful way to improve web accessibility is by using the tabindex attribute. Let’s take a closer look at the tabindex attribute, how it works, and why it’s essential for making your website more user-friendly and accessible.

What Is the Tabindex Attribute?

The tabindex attribute is an HTML attribute that helps control the order in which users can move between interactive elements—like links, buttons, and form fields—using just the keyboard. For users who either can’t or prefer not to use a mouse, the ability to navigate a site using the “Tab” key is essential. This group includes people with motor disabilities, vision impairments, or even people using devices where a mouse isn’t an option.

When you press the Tab key, your focus (i.e., where your keyboard inputs go) jumps to the next interactive element on the page. By default, browsers follow a logical order based on the structure of the page’s HTML, starting from the top of the page and moving down. But sometimes, you’ll want to fine-tune that order, and this is where the tabindex attribute comes into play.

How Does Tabindex Work?

There are a few different values you can assign to the tabindex attribute, each of which affects how elements are navigated:
- tabindex= "0": This means the element will follow the natural tab order as defined by the document’s structure, but it ensures that the element is focusable.
- tabindex= "-1": This removes an element from the tab order, making it not focusable via the keyboard, but it can still be focused by other methods (like using JavaScript). This is useful for things like modal windows, which you only want to be accessible in specific scenarios.
- Positive tabindex values (e.g., tabindex= "1" ): Using positive values lets you create a custom tab order. Only use positive tabindex values if you know what you’re doing!
Best Practices for Using Tabindex

If you’re new to using the tabindex attribute, it might seem simple at first glance, but there are a few essential best practices to follow. These will help you avoid common pitfalls and ensure your site remains accessible and easy to navigate.

Stick to tabindex= "0" for Most Cases

When you want to make an element focusable, it’s almost always best to use tabindex= "0". This keeps the element in the natural tab order, ensuring users can move through the page logically. Using higher positive values to create a custom order can confuse users, especially those using assistive technologies like screen readers.

Here’s an example of how to use tabindex= “0”:
```
<div role="button" tabindex="0">Submit</div>
<a tabindex="0">Learn more</a>
```
Use tabindex= "-1" for Hidden or Conditional Elements

Some elements shouldn’t be part of the regular tab order until they’re needed. For example, if you have a modal that opens up after a button is clicked, it doesn’t make sense for a modal to be focusable before it’s visible. This is where tabindex= "-1" is useful.

Here’s how you might use it for a modal:
```
<div id="myModal" tabindex="-1">
  <p>This is a modal window.</p>
  <button>Close</button>
</div>
```
When the modal is triggered (through JavaScript), you can set focus to it programmatically:
```
document.getElementById('myModal').focus();
```
This ensures the modal is accessible when needed without cluttering the tab order when it’s not.

Test Your Website with Keyboard-Only Navigation

A simple but effective way to check if your tabindex usage is on point is to navigate your site using only the keyboard. Press the Tab key to move forward through the interactive elements, and use Shift+Tab to go backward. Does everything flow smoothly? If you find yourself jumping around the page or missing critical elements, it might be time to revisit your tab order.

Common Mistakes to Avoid

While the tabindex attribute is incredibly useful, it’s also easy to misuse. Here are some common mistakes you’ll want to steer clear of:

Overusing Positive Tabindex Values

It might be tempting to assign custom tab orders everywhere, but overdoing it can lead to a confusing and inconsistent experience. Stick with the natural tab order unless you have a compelling reason to change it.

Skipping Interactive Elements

Make sure that all essential interactive elements—like buttons, form fields, and links—are keyboard-focusable. You don’t want users who rely on keyboard navigation to miss important parts of your site because they’ve been removed from the tab order.

Using Tabindex Instead of Proper HTML

It’s always best to use semantic HTML first. Instead of creating a clickable div with a tabindex= "0", use an actual <button> or <a> element. Not only does this help with accessibility, but it also provides better browser support and consistency across devices.

How Does Tabindex Relate to Web Accessibility Guidelines?

You’ve probably heard of the Web Content Accessibility Guidelines (WCAG) if you’ve been reading up on accessibility. These guidelines are designed to make web content more accessible to people with disabilities, and they’re the foundation of legal requirements like the Americans with Disabilities Act (ADA).

When it comes to keyboard navigation, WCAG has some specific guidelines that tabindex helps address:
- WCAG 2.1.1 Keyboard: All site functionality should be operable through a keyboard interface.
- WCAG 2.4.3 Focus Order: Navigating through content should follow a logical order that doesn’t confuse the user.
Using tabindex correctly is a step toward ensuring that your website meets these standards, helping you create a more inclusive and legally compliant experience.

Tabbing It All Together

The tabindex attribute is a powerful yet often overlooked tool in web accessibility. When used correctly, it not only aids users with visual or motor impairments but also enhances the overall user experience for everyone navigating your site. Ensuring that your website is accessible isn’t just about compliance with standards like WCAG and ADA—it’s about making your content reachable and usable for all.

Ready to make your website more inclusive and user-friendly? Schedule an ADA briefing with 216digital today. Our team of experts will guide you through the nuances of web accessibility, helping you implement best practices like proper tabindex usage. Let us help you create a more inclusive and legally compliant digital space.
Bobby

October 15, 2024

How-to Guides

Accessibility, ADA Compliance, How-to, tabindex, WCAG, web development
Why ‘Click Here’ Hurts Your Website’s Accessibility
If you’ve spent any time browsing the web, you’ve probably come across links like “click here” or “read more.” While these phrases seem simple enough, they can actually be confusing or even frustrating—especially for people using screen readers to navigate a site. That’s where descriptive link text comes in. It’s essential for making websites more accessible to everyone, including those with disabilities. So, let’s dive into why using meaningful link text is so important and how you can write it to improve both web accessibility and overall user experience.

What is Descriptive Link Text?

Descriptive link text is just what it sounds like—clickable text that clearly explains what the link is for. Instead of generic phrases like “click here” or “read more,” a good descriptive link gives enough context so users know exactly where the link will take them. This is a win for all users but especially important for people with disabilities who rely on screen readers to navigate the web.

Imagine trying to navigate a website where every link says “click here.” For someone using a screen reader, that’s a frustrating experience because they have no clue where any of those links will lead. Descriptive link text fixes that by making sure all users, no matter how they access the web, have a clear, easy-to-understand experience.

Why “Click Here” and “Read More” Are Problematic

Using generic phrases like “click here” or “read more” might seem harmless, but they can actually create confusion. When someone using a screen reader encounters a page full of links that all say “click here,” they’re left with no context about where the links go or what they do. It’s like being handed a bunch of blank signposts with no labels.

Let’s take a look at an example:
- Bad Link: Click here to read more.
- Better Link: Learn more about our services.
In the second example, the user knows exactly what they’re clicking on, which makes the experience more apparent and more helpful, especially for people using screen readers.

Empty Links and Their Impact on Accessibility

Another issue when it comes to web accessibility is empty links. An empty link is one that has no text or meaningful content for a screen reader to announce. For people using screen readers, these links are useless—they navigate to them but get no information about what they do. And for those using keyboard navigation, empty links can be frustrating roadblocks.

To avoid this, always make sure your links contain text, or if you’re using an image as a link, ensure there’s alternative text (alt text) that clearly describes what the link does.

How Descriptive Link Text Boosts Accessibility

One of the best things about the web is its potential to be accessible to everyone. But if we don’t put some thought into how we design and label things like links, we end up excluding a lot of people. Descriptive link text makes websites more accessible and improves the overall user experience in a few key ways:
- Clarity for Screen Reader Users: Screen readers read links out loud. If the link text is too vague, it isn’t very clear. Descriptive text helps users know exactly what to expect before they click.
- Better Navigation: Clear, simple language helps everyone, especially users with cognitive disabilities or learning differences, by reducing the mental effort needed to figure out what a link does.
- Faster Browsing: Descriptive links let users quickly scan a page and understand where each link will take them. This makes it easier for everyone to find what they’re looking for without guessing.
WCAG Guidelines for Descriptive Links

The Web Content Accessibility Guidelines (WCAG) provide a set of best practices for making the web usable by everyone. According to WCAG SC 2.4.4 Link Purpose, each link should make its purpose clear, either from the link text itself or from its surrounding context.

Here are a few essential tips from WCAG on how to write compelling link text:
- Be Concise and Relevant: Your link text should be short but informative. Don’t go overboard, but include enough detail so users know where they’re headed.
  - Example: Instead of “click here for more,” try “Learn more about accessible landmarks.“
- Skip the Redundancies: You don’t need to add words like “link” or “website” to your link text. Screen readers already announce that it’s a link, so saying “click here to visit the website” is unnecessary. Just say, “Visit our website.“
- Avoid Empty Links: Every link should have meaningful content. Empty links are confusing and serve no functional purpose for users navigating with keyboards or screen readers.
Examples of Effective and Ineffective Link Text
- Ineffective Link Text:
  - Click here
  - Read more
  - Learn more
  - Here
- Effective Link Text:
  - Download the 2024 Annual Report
  - Explore our upcoming events.
  - Read more about creating accessible web links.
In these examples, the goal is to make it crystal clear where the link will take the user, leaving no room for confusion.

Best Practices for Writing Descriptive Link Text
- Think About Context: Consider what the user needs to know about the link’s destination. This is especially important for screen reader users who may jump between links without reading the surrounding text. Make sure the link text alone provides enough information.
- Keep It Short and Sweet: Your link text should be informative but not too long. For example, “Contact Us for Support” is much clearer than “Click here if you need to get in touch with our support team.“
- Use Natural Phrasing: Don’t feel like you always need to add a “click here” to your sentence. Sometimes, the best link text is already part of your content. For instance, instead of “click here to learn more about our programs,” use the “learn more about our programs” link.
- Avoid URLs as Links: Long URLs are difficult for screen readers to interpret, especially if they contain numbers and special characters. Instead of linking a URL directly, use descriptive text like “Visit 216digital’s a11y.Radar Monitoring Page.”
- Alt Text for Image Links: If an image serves as a link, make sure the alt text conveys the purpose of the link. For example, if a shopping cart icon leads to the cart page, use alt text like “View Cart” rather than just “Cart.”
Linking It All Together

Incorporating descriptive link text is a small change that can have a significant impact on your website’s web accessibility. By ditching generic phrases, using clear and concise language, and following WCAG guidelines, you’ll make your site more navigable for everyone—especially users who rely on screen readers.

Creating an inclusive web experience doesn’t have to be complicated, but it does take attention to detail. If you’re unsure whether your website’s accessibility measures, including your link text, are up to standard, it might be time to seek expert advice. At 216digital, we offer ADA briefings that help you identify areas for improvement and ensure your site meets accessibility requirements.

Take the next step towards a more accessible web presence and schedule a complimentary ADA briefing with 216digital today. We’re here to guide you through the process and help you create a site that’s welcoming and usable for everyone.
Greg McNeil

October 14, 2024

How-to Guides, Legal Compliance, WCAG Compliance

Accessibility, Alt text, descriptive link text, WCAG, WCAG Compliance, Web Accessibility
Digital Accessibility Lawsuit Targets Contractors
The recent case of Bryan Bashin vs. ReserveCalifornia.com has opened the door to a new type of accessibility lawsuit. It’s not just website owners being held accountable—government contractors who build and maintain websites are now in the spotlight too.

This case is important for developers, designers, and accessibility experts working on government websites, as it sets a strong example of what can happen when accessibility isn’t prioritized. More importantly, it serves as a wake-up call for businesses and contractors alike to understand that accessibility is not just an option but a legal necessity. Failure to comply with accessibility standards could result in costly lawsuits and reputational damage.

In today’s digital world, ensuring that everyone, including people with disabilities, can use your website is not just good practice—it’s the law.

Case Overview: A New Direction

Bryan Bashin, who is visually impaired, sued ReserveCalifornia.com, claiming the site was inaccessible to people with disabilities. This violated both the Americans with Disabilities Act (ADA) and California’s Unruh Civil Rights Act. What made this case different? Bashin didn’t go after the website owner, California State Parks—he targeted the contractors who created and managed the site.

ReserveCalifornia.com is a key website for booking campsites and other outdoor activities in state parks. Because it wasn’t fully accessible, users who depend on assistive technologies, like screen readers, had trouble navigating it. By focusing on the developers, Bashin’s lawsuit sends a clear message: if you’re responsible for public websites, you must meet digital accessibility standards—or you could face legal action.

The Laws: Unruh Act and ADA Title II

This case relies on two important laws: California’s Unruh Civil Rights Act and the updated ADA Title II rules for government websites.
- Unruh Act: This California law allows people with disabilities to sue organizations that don’t make their services accessible. Bashin used this law to seek damages, which gave him additional legal options beyond the federal ADA.
- ADA Title II: This part of the ADA focuses on making sure government services, programs, and activities—including websites—are accessible. Recent updates have strengthened these rules, making it clear that public websites must meet accessibility standards. Bashin’s lawsuit shows how these laws are evolving, putting contractors in the spotlight.
What It Means for Web Developers: Widespread Impacts

While this lawsuit happened in California, its effects could reach across the country. The Unruh Act may be specific to California, but ADA Title II applies nationwide. Developers working on public sector projects need to understand that ignoring accessibility could lead to serious risks, especially as more governments crack down on non-compliance.

Developers and contractors are expected to follow the Web Content Accessibility Guidelines (WCAG), the international standard for digital accessibility. Not meeting these standards puts them at risk of lawsuits like Bashin’s, and the $2 million settlement in this case shows that courts are willing to hold developers accountable.

What is the WCAG?

WCAG is the go-to guide for making websites accessible to people with disabilities, such as those who are blind, deaf, or have cognitive challenges. It focuses on making content:
- Perceivable: Users must be able to experience content, whether through text, images, or other formats like captions.
- Operable: Users should be able to navigate the site with different tools like a mouse, keyboard, or voice commands.
- Understandable: The site’s information and operations should be clear and easy to use.
- Robust: The site should work with current and future assistive technologies.
For developers, following WCAG not only ensures legal compliance but also opens websites to a wider audience and improves overall user experience.

Why WCAG Matters

You might ask yourself, “Why should I care about WCAG compliance?” First and foremost, it helps make your website accessible to a wider audience. If your site isn’t usable for people with disabilities, you could be missing out on potential customers. In a digital age where online shopping and information-seeking are essential, excluding anyone based on accessibility is not just unfair—it’s bad for business.

Moreover, the Bashin case shows that failing to meet accessibility standards can lead to legal consequences. As more digital accessibility lawsuits arise, companies that don’t prioritize compliance could face significant financial penalties. By adhering to WCAG guidelines, you protect yourself from legal issues and show that you care about your users.

Best Practices for Developers and Digital Accessibility Experts

Bashin’s case is a reminder that developers and consultants must make digital accessibility a priority from the start. It’s no longer enough to just create a good-looking or functional website—it has to work for everyone, including people with disabilities.

Here’s what developers and business owners should focus on:
- WCAG Knowledge: Work with developers who understand WCAG standards and have experience making accessible sites.
- 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.
- Implement Ongoing Training: Train your staff, especially those involved in website management and content creation, about digital accessibility.
- Ongoing Monitoring: Accessibility isn’t a one-time job. Websites need regular testing to stay compliant. This proactive approach helps prevent potential violations before they lead to costly lawsuits.
- Stay Informed and Up-to-Date: Digital accessibility standards and regulations change over time. Make any necessary updates to your website to remain compliant.
The Bigger Picture: Nationwide Repercussions

The Bryan Bashin vs. ReserveCalifornia.com case is a strong reminder for developers everywhere: accessibility is no longer optional. By holding government contractors accountable for digital accessibility violations, this case sets a powerful precedent. Developers and accessibility experts must be proactive and make sure all public-facing websites—especially those for government services—comply with WCAG and other accessibility standards. The future of digital accessibility enforcement is here, and developers need to stay ahead to avoid costly legal risks.

To avoid the risks of costly legal action and make sure your website is accessible to everyone, now is the time to act. Find out if your website is ADA compliant today by scheduling a 15-minute complimentary website audit and consultation with our experts at 216digital. We can help determine if your site is at risk of a lawsuit and provide fast, effective ADA compliance solutions so you can focus on what matters most: running your business.
Greg McNeil

October 10, 2024

Legal Compliance

Accessibility, ADA Compliance, ADA Website Compliance, Bryan Bashin vs. ReserveCalifornia.com, Unruh Civil Rights Act, web developers
What is Keyboard Navigation?
Have you ever tried navigating a website without a mouse, using only your keyboard? If not, it’s an eye-opening experience. For many users with disabilities, keyboard navigation isn’t just an option—it’s essential. Keyboard accessibility ensures that users who rely on keyboards can interact with your website effectively. Let’s dive into what keyboard accessibility is, why it matters, and how you can implement it on your website.

What is Keyboard Navigation?

Keyboard navigation allows users to interact with a website without the need for a mouse. Instead of pointing and clicking, users rely on keyboard keys—like the Tab, Enter, and arrow keys—to move through web content. This form of navigation is vital for individuals with mobility impairments, vision impairments, or anyone who cannot use a mouse due to injury or physical limitations.

For example, users can move from one link or button to the next using the Tab key and activate the selected item with Enter or Space. Think of it as a roadmap through your website, where each interactive element is a stop along the way. If your site isn’t set up for proper keyboard navigation, some users may get lost or, worse, be unable to use your site altogether.

Why Keyboard Accessibility is Important

Keyboard accessibility plays a crucial role in web usability, particularly for people with disabilities. Here’s why:
1. For Users with Disabilities: Many individuals rely on assistive technologies, like screen readers or alternative input devices, to access websites. These technologies are often keyboard-based. Without proper keyboard navigation, these users may be blocked from interacting with your site.
2. WCAG Guidelines: The Web Content Accessibility Guidelines (WCAG), which serve as the global standard for web accessibility, emphasize the need for keyboard accessibility. WCAG 2.1, for example, highlights explicitly that all functionality should be operable through a keyboard interface (SC 2.1.1 – Keyboard).
3. Compliance with Laws: In the U.S., legal frameworks like the Americans with Disabilities Act (ADA) can hold websites accountable for not being accessible to people with disabilities. Making your site accessible isn’t just good for your users—it can also help you avoid legal trouble.
Implementing Proper Keyboard Navigation

Keyboard navigation isn’t just about letting users “tab” through your site. It’s about ensuring a smooth, logical, and functional user experience. Let’s look at some key steps to making your site keyboard-friendly.

Make All Interactive Elements Accessible

Every element that a user can interact with—like buttons, links, forms, and dropdown menus—should be accessible by the keyboard. This means ensuring that as a user “tabs” through the page, they can reach these elements and activate them without needing a mouse.

Here are a few ways to achieve this:
- Use semantic HTML: Elements like <button>, <a>, and <input> are inherently keyboard-accessible. If you create custom interactive elements with <div> or <span>, ensure they are accessible by adding tabindex= "0" and using JavaScript to handle key events like pressing “Enter” or “Space” to activate them.
- Avoid tabindex misuse: While tabindex= "0” ensures elements are focusable in the tab order, using tabindex values other than 0 can cause issues with navigation. Elements should appear in the tab order based on their natural position in the document flow.
Example:
```

<button>Submit</button>
<a href="contact.html">Contact Us</a>

<div role="button" tabindex="0" onclick="alert('Button clicked')">Click me</div>
```
Ensure Logical Tab Order

When users navigate your website using the Tab key, they should move through the content in a logical order. If the tab order is confusing, users can miss important information or interactive elements. The order should generally follow the visual structure of the page, moving left to right and top to bottom.

Best Practices for Logical Tab Order:
- Check the natural tab order: Test your site by navigating with the Tab key. Does it follow the expected order? Are there elements that seem out of place or skipped entirely?
- Avoid skipping key elements: Ensure that every interactive element is included in the tab order. Hidden or inactive elements should not be focusable until they are visible or active.
Use Clear Focus Indicators

When a user navigates with their keyboard, they rely on focus indicators to know where they are on the page. Without a clear visual indicator, users may become lost.

What’s a Focus Indicator?

The focus indicator is a visible outline or highlight that shows which element is currently selected. For example, by default, most browsers add a visible outline to buttons, links, and form fields when they are focused.

Best Practices for Focus Indicators:
- Don’t disable default focus outlines: Some designers remove these outlines for aesthetic reasons, but this is a big no-no for accessibility.
- Customize focus styles: If the default outline doesn’t fit your design, you can customize it. Just make sure the indicator is clear and easy to see.
Example:
```
/* Customize focus outline */
button: focus, a: focus {
    outline: 2px solid #007BFF; /* High contrast color */
}
```
Avoid Keyboard Traps

A keyboard trap occurs when a user navigates into a section of the page but can’t get out using the keyboard. This can happen if a dialog box or modal window doesn’t allow the user to tab away or close it using keyboard commands.

Best Practices to Avoid Keyboard Traps:
- Ensure users can tab away: If a modal or popup appears, users should be able to close it or continue navigating the rest of the site with the Tab key.
- Provide a clear way to exit: Offer an accessible “Close” button or an “Esc” key option to dismiss popups.
Example:
```

<div role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description">
    <h2 id="modal-title">Modal Title</h2>
    <p id= "modal-description">This is a description of the modal.</p>
    <button onclick="closeModal()">Close</button>
</div>
```
Referencing WCAG Guidelines

To meet web accessibility standards, your site should align with the WCAG guidelines, particularly the following:
- WCAG 2.1.1 – Keyboard: Ensure all content and functionality can be accessed using a keyboard.
- WCAG 2.4.3 – Focus Order: Make sure users can navigate through the page in a logical sequence.
- WCAG 2.4.7 – Focus Visible: Provide a clear indicator of focus when keyboard navigation is used.
These guidelines are vital for ensuring that your site is accessible to all users, including those who depend on keyboard navigation.

Making Your Website Accessible for All

Keyboard navigation is not just about compliance—it’s about ensuring that every visitor can use your site, regardless of their physical abilities. By focusing on proper keyboard navigation, logical tab order, clear focus indicators, and avoiding keyboard traps, you’re creating an inclusive experience that benefits all users. Whether it’s improving the experience for users with disabilities or meeting the legal requirements of the ADA, the rewards of accessibility are significant.

Implementing these changes might feel overwhelming, but you don’t have to go it alone. 216digital specializes in making websites accessible, ensuring they meet WCAG standards and ADA compliance. Our human-centered approach focuses on both the user experience and reducing legal risks.

Ready to make your site accessible? Schedule an ADA compliance briefing with 216digital today, and let us guide you through the process of creating a website that’s usable for everyone.
Greg McNeil

October 4, 2024

How-to Guides

Accessibility, How-to, Keyboard Navigation, WCAG, WCAG Compliance, Web Accessibility, web development
ADA Compliance vs Web Accessibility: What is the Difference
As more businesses move online, understanding web accessibility and ADA compliance becomes crucial. These terms are often used interchangeably but represent different aspects of making a website user-friendly for everyone, including individuals with disabilities. Knowing the distinction between web accessibility and ADA compliance can help protect your business from lawsuits while ensuring your site provides an inclusive experience.

In this article, we’ll examine the definitions of web accessibility and ADA compliance, explore their differences, discuss the legal risks associated with non-compliance, and explain how businesses can proactively address accessibility issues using services like 216digital’s Phase 1 remediation.

What is Web Accessibility?

Web accessibility involves designing and developing websites, tools, and technologies to ensure they are usable by people with a wide range of abilities and disabilities. This includes individuals who have visual, auditory, physical, speech, cognitive, or neurological disabilities. The goal of web accessibility is to ensure that everyone, regardless of their disability, can perceive, understand, navigate, and interact with the web.

Web Content Accessibility Guidelines (WCAG)

The primary standard for web accessibility is the Web Content Accessibility Guidelines (WCAG), created by the World Wide Web Consortium (W3C). The latest version, WCAG 2.1, provides a comprehensive set of guidelines aimed at making web content accessible. These guidelines are organized around four core principles, commonly known as POUR:
- Perceivable: Information and user interface components must be presented in ways that all users can perceive.
- Operable: User interface components and navigation must be operable for everyone, including those using assistive technologies like screen readers.
- Understandable: Information and the operation of the user interface must be understandable.
- Robust: Content must be strong enough to work with a wide range of technologies, including those used by people with disabilities.
While WCAG provides the framework for web accessibility, compliance with it is generally voluntary unless law or legal action requires otherwise.

What is ADA Compliance?

ADA compliance refers to meeting the requirements set forth by the Americans with Disabilities Act (ADA), which was enacted in 1990. The ADA mandates that businesses, public services, and other organizations provide equal access to individuals with disabilities. Although the ADA was passed before the internet became mainstream, courts have increasingly ruled that websites are considered public accommodation places, meaning they must be accessible to people with disabilities.

ADA compliance, specifically in the context of websites, refers to whether your site meets the legal requirements of the ADA as interpreted by courts and the Department of Justice (DOJ). No official legal mandate states that WCAG 2.1 must be followed to achieve ADA compliance, but it is widely accepted that adhering to WCAG is the best way to meet ADA requirements.

How Does It Differ From Web Accessibility?
- Web accessibility is the broader concept of ensuring that people of all abilities can use websites.
- ADA compliance is a legal requirement for businesses in the U.S. to provide equal access to individuals with disabilities, which includes making websites accessible.
Web accessibility is a best practice, while ADA compliance is a legal standard. Following web accessibility guidelines, like WCAG 2.1, helps businesses meet the requirements of ADA compliance, but the two terms are not identical.

Is It Possible to Achieve and Maintain Full WCAG 2.1 Compliance?

Yes, but it’s not always easy, especially for bigger, more complex websites. WCAG 2.1 covers a lot of areas—like how text shows up, how media is handled, how forms work, and more. As technology and user needs evolve, keeping up with compliance is an ongoing effort. Regular testing, monitoring, and updates are needed to ensure the site meets the latest accessibility standards.

If you’re worried about protecting yourself from ADA lawsuits, aiming for full WCAG 2.1 compliance is a smart move. It can help reduce your legal risks, but it is only legally required in some cases. Courts have ruled in favor of plaintiffs in ADA lawsuits when websites were not accessible, even if they didn’t meet every single WCAG criterion.

Does Your Website Need to Be Fully Web Accessible to Protect Your Business?

To protect your business from ADA compliance lawsuits, it’s crucial to address the most common accessibility barriers, even if full WCAG 2.1 compliance is not achieved. Many companies focus on making the most essential parts of their website accessible, such as navigation, forms, and checkout processes. This approach can reduce the risk of a lawsuit while allowing businesses to improve their site’s accessibility gradually.

It’s also worth noting that courts have yet to require businesses to meet every WCAG 2.1 guideline to comply with the ADA. However, companies that demonstrate they are actively working to make their sites more accessible—by following best practices and improving critical accessibility issues—are generally better positioned to defend against lawsuits.

The Risk of ADA Compliance Lawsuits

ADA compliance lawsuits have skyrocketed in recent years, especially against businesses with inaccessible websites. These lawsuits can be costly, both in terms of financial settlements and reputational damage. Predatory law firms have begun targeting businesses—tiny and mid-sized companies—that have websites with accessibility issues. These firms often file “copycat” lawsuits, sometimes targeting hundreds of companies with nearly identical complaints.

The financial risk is real. Businesses are often forced to settle the lawsuit or pay legal fees, which can run into tens or even hundreds of thousands of dollars. In addition, businesses may also have to invest in website remediation services to fix accessibility issues.

How Predatory Law Firms Target Websites

Predatory law firms often conduct automated scans of websites to identify accessibility violations, such as missing alt text, poor contrast ratios, or non-functional navigation for keyboard-only users. Once they identify these issues, they send demand letters or file lawsuits, typically hoping that the business will settle quickly to avoid costly litigation.

Unfortunately, even well-meaning businesses that are working on improving accessibility can be targeted. This is why it’s essential to address website accessibility proactively rather than waiting for a lawsuit to happen.

Is Full WCAG 2.1 Compliance Required to Mitigate Lawsuits?

While full WCAG 2.1 compliance is not explicitly required to avoid lawsuits, businesses should aim to make their websites as accessible as possible. The more barriers that are removed, the less likely it is that a website will be the target of a lawsuit.

In most cases, addressing key accessibility issues—such as ensuring all images have alt text, providing video captions, and making the site navigable by keyboard—will significantly reduce the risk of a lawsuit.

Protect Your Business with 216digital

To help businesses avoid the pitfalls of non-compliance, 216digital offers Phase 1 remediation services designed to address the most critical accessibility issues quickly. These services focus on mitigating the risk of ADA lawsuits by resolving common accessibility barriers that predatory law firms often target. By implementing these initial fixes, businesses can start protecting themselves while working toward broader web accessibility goals.

In addition to Phase 1 remediation, 216digital offers ongoing monitoring and testing services to ensure your site remains accessible over time. With a proactive approach, businesses can avoid costly lawsuits and provide a better user experience for all visitors.

Ready to Make Your Website ADA Compliant?

As the digital landscape continues to evolve, ensuring your website is both accessible and ADA-compliant is more important than ever. While full WCAG 2.1 compliance may not always be required, addressing key accessibility issues can significantly reduce your risk of lawsuits and enhance the user experience for all visitors.

Take the next step toward protecting your business and making your website more inclusive. Schedule a personalized ADA compliance briefing with 216digital today. Our team can guide you through Phase 1 remediation and ongoing strategies to keep your site accessible and compliant.
Greg McNeil

October 3, 2024

Legal Compliance, WCAG Compliance

Accessibility, ADA Compliance, ADA Website Compliance, WCAG, WCAG Compliance, Website Accessibility
Common Web Accessibility Pitfalls That Invite ADA Lawsuits
The Americans with Disabilities Act (ADA) requires businesses to make their websites accessible to everyone, including people with disabilities. When websites fail to meet accessibility standards, they risk facing lawsuits. In recent years, ADA lawsuits related to digital accessibility have surged, with businesses large and small getting sued for non-compliance. But what exactly are the most common issues that lead to these lawsuits?

This article will highlight the most common web accessibility barriers that lead to ADA lawsuits and provide real-world examples of lawsuits related to these issues.

1. Missing Alt Text

Alt text, or alternative text, provides a written description of an image on a webpage. Screen readers, which visually impaired users use to navigate the internet, read this description aloud.Without alt text, users with visual impairments have no way of knowing what an image represents.

For example, if a website has an image of a product for sale, the alt text might say, “Red shoe, size 8.” Without this text, screen reader users won’t know what the image shows, making it difficult to interact with the website.

Missing or incorrect alt text is one of the most common reasons for ADA lawsuits. Many businesses overlook this small but important step, leaving essential images without descriptions.

WCAG 2.1 Guideline: 1.1.1 – Non-text Content

All non-text content, such as images, must have a text alternative that serves the same purpose.

Example ADA Lawsuit: Fox News Network LLC

Fox News Network LLC was sued because its website didn’t provide proper alt text for many images. Luc Burbon, a visually impaired user, relied on screen readers to browse the internet. When trying to navigate Fox News’ website, he encountered images without alt text, leaving him unable to understand key content. The court agreed with Burbon, emphasizing that websites must be accessible to everyone, including people with disabilities.

2. Non-Descriptive Interactive Elements

Interactive elements, like buttons and links, are crucial for navigating a website. However, if these elements aren’t appropriately labeled, users who rely on screen readers won’t know what a button or link does. This leads to confusion, frustration, and can make essential parts of the website inaccessible to users with disabilities.

For example, a button labeled “Click Here” without explaining what it does will leave screen reader users guessing, especially if there’s more than one on a page. Adding contextually relevant content to the visual or accessible label, such as “Click here to learn more about our coffee” will differentiate the element while also giving users additional context.

WCAG 2.1 Guideline: 4.1.2 – Name, Role, Value

Interactive elements should have clear labels that explain their purpose.

Example ADA Lawsuit: NIKE, Inc.

Maria Mendizabal filed a class-action lawsuit against Nike, claiming that the website had many links that were either redundant or completely empty. Users with visual impairments couldn’t understand the purpose of these links, making it challenging to navigate the site. This lawsuit demonstrates the importance of appropriately labeling interactive elements so everyone can understand them.

3. Lack of Keyboard Navigation

Many users with disabilities rely on keyboards to navigate websites, especially those who can’t use a mouse. If a website doesn’t allow for keyboard-only navigation, or if drop-down menus can’t be accessed with a keyboard, it becomes unusable for people with mobility impairments.

For example, if a menu only opens when hovered over with a mouse, someone using only a keyboard won’t be able to open it, blocking their access to critical sections of the site.

WCAG 2.1 Guideline: 2.1.1 – Keyboard

All functionality should be accessible using a keyboard.

Example ADA Lawsuit: Parkwood Entertainment LLC

In 2019, a lawsuit accused Parkwood Entertainment because Beyoncé’s official website, Beyonce.com, did not provide accessibility for users relying on screen readers.. Mary Conner, the visually impaired plaintiff, couldn’t navigate the drop-down menus using her keyboard. This prevented her from accessing important content and services, leading to a lawsuit.

4. Inaccessible Forms

Forms are commonly used on websites—for everything from signing up for newsletters to making purchases. However, forms that are difficult for people with disabilities to fill out can create barriers. Missing labels on form fields, unclear error messages, or forms that don’t work with keyboard navigation are common accessibility issues that lead to lawsuits.

For instance, if a form field asks for a phone number but doesn’t have a proper label, a screen reader user won’t know what to enter. Or, if an error message isn’t clear about what went wrong, visually impaired users won’t be able to correct their mistakes.

WCAG 2.1 Guideline: 3.3.2 – Labels or Instructions

Ensure input fields have proper labels and instructions so users know what information is required.

Example ADA Lawsuit: H&R Block Lawsuit

A notable example of this issue is the lawsuit involving the National Federation of the Blind and H&R Block. In this case, visually impaired users discovered that H&R Block’s website did not correctly label the forms. When these users tried to input their contact information or create an account, they struggled because the screen readers failed to indicate what information they needed or where to enter it.

5. Inaccessible Pop-Ups and Modals

Pop-ups and modals (dialog boxes that appear on top of a page) are common features on websites for everything from newsletter sign-ups to product promotions. However, if they are not designed with accessibility in mind, they can disrupt the user’s experience.

Pop-ups cause confusion if they appear without warning or if users can’t close them using a keyboard. Users relying on screen readers or assistive devices may not even know that a pop-up has appeared, making it impossible for them to continue interacting with the page.

WCAG 2.1 Guideline: 1.3.1 – Info and Relationships

When new content, like a pop-up, appears on the screen, announce it to the user and explain how it connects to the rest of the website.

Example ADA Lawsuit: Five Guys Enterprises

In a lawsuit against Five Guys, a visually impaired customer couldn’t complete an online order because an inaccessible pop-up appeared when trying to add fries to her cart. Her screen reader didn’t recognize the pop-up, making it impossible for her to finish the purchase. This case highlights the importance of making pop-ups accessible to everyone.

How to Avoid ADA Lawsuits

Avoiding ADA lawsuits starts with a proactive approach to web accessibility. Making your website accessible is not only a legal obligation but also an opportunity to provide a better user experience for all visitors, regardless of ability. Here are key steps you can take to avoid common accessibility pitfalls:
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 iCompliance is not a one-time task. 216digital’s a11y.Radar service provides ongoing monitoring. It detects any new accessibility issues that may arise over time. This proactive approach helps prevent potential violations before they lead to costly lawsuits.”
Conclusion

Making sure your website is ADA-compliant is not just about avoiding lawsuits—it’s about ensuring that everyone, no matter their abilities, can access and enjoy your content. With the rise in ADA lawsuits, it’s more important than ever to take a proactive approach to web accessibility. Whether it’s fixing missing alt text or ensuring keyboard navigation, addressing these common issues can save your business time and money in the long run.

If you’re unsure where to start or need help maintaining compliance, 216digital is here to help. Through our years of experience analyzing these cases, we understand how ADA non-compliance lawsuit firms identify their targets. We can help you protect your business from these risks. At 216digital, we will develop a strategy to integrate WCAG 2.1 compliance into your development roadmap. This will allow you to focus on other tasks on your to-do list.

So don’t wait any longer; find out where you stand by scheduling a complementary ADA strategy briefing today.
Greg McNeil

September 25, 2024

Legal Compliance, WCAG Compliance

Accessibility, ADA Compliance, ADA Lawsuit, ADA Website Compliance, digital accessibility, WCAG, WCAG Compliance, Web Accessibility

Why Accessibility Matters

Training Your Team

Writing Alternative Text

Ensuring Proper Heading Structures

Creating Accessible Documents

Ongoing Review and Feedback

Wrapping Up

What is ADA Compliance?

Website Design and Development

Use Semantic HTML

Enable Keyboard Navigation

Ensure Sufficient Color Contrast

Provide Descriptive Alt Text for Images

Ongoing Monitoring and Testing

Conduct Regular Accessibility Audits

Engage in User Testing

Content Management and Regular Updates

Provide Content in Accessible Formats

Keep Content Updated

Avoiding Overlays

What You Can’t Control: Third-Party Content and Vendors

Third-Party Plugins and Widgets

Content Management Systems (CMS)

Outsourced Web Development and Content Creation

User-Generated Content

Strategies for Managing What You Can’t Control

Vetting and Selecting Accessible Vendors

Adding Disclaimers and Providing Alternatives

Foster Communication and Collaboration

Conclusion

The Current Mindset Around Website Accessibility

The Value of Accessibility for All Users

Accessibility as a Business Opportunity

Market Potential

Search Engine Optimization

Mitigate Legal Risk

Accessibility, Innovation, and Creativity for Problem Solving

Connecting Accessibility with Corporate Social Responsibility

From “Why” to “How”: Putting Website Accessibility into Action

Why Accessibility Matters for Online Retailers

The Web Accessibility Guidelines

Steps for Online Retailers to Improve Accessibility Right Now

Auditing Retail Sites for Accessibility Issues

Make Visual Content Accessible

Optimize Website Navigation and Structure

Improve Form Accessibility

The Retail Shopping and Checkout Process

Implement ARIA Landmarks and Roles

Testing and Ongoing Monitoring for Retailers

Partnering with Accessibility Experts

Accessibility Overlays: A Quick Fix or a Long-Term Solution?

Check Accessibility Off Your Shopping List

What Is the Tabindex Attribute?

How Does Tabindex Work?

Best Practices for Using Tabindex

Stick to tabindex= "0" for Most Cases

Use tabindex= "-1" for Hidden or Conditional Elements

Test Your Website with Keyboard-Only Navigation

Common Mistakes to Avoid

Overusing Positive Tabindex Values

Skipping Interactive Elements

Using Tabindex Instead of Proper HTML

How Does Tabindex Relate to Web Accessibility Guidelines?

Tabbing It All Together

What is Descriptive Link Text?

Why “Click Here” and “Read More” Are Problematic

Empty Links and Their Impact on Accessibility

How Descriptive Link Text Boosts Accessibility

WCAG Guidelines for Descriptive Links

Examples of Effective and Ineffective Link Text

Best Practices for Writing Descriptive Link Text

Linking It All Together

Case Overview: A New Direction

The Laws: Unruh Act and ADA Title II

What It Means for Web Developers: Widespread Impacts

What is the WCAG?

Why WCAG Matters

Best Practices for Developers and Digital Accessibility Experts

The Bigger Picture: Nationwide Repercussions

What is Keyboard Navigation?

Stick to `tabindex= "0"` for Most Cases

Use `tabindex= "-1"` for Hidden or Conditional Elements