Website Accessibility Archives - Page 15 of 22/Tag

Why Touch Targets Impacts Accessibility
Imagine this: a customer visits your website, excited to snag a deal on their holiday shopping list. They’re scrolling through your page on their phone, ready to click “add to cart,”—but then they hit a roadblock. The buttons are too small, links are crowded together, and navigating your site becomes a frustrating game of “tap and hope.” Now imagine if that customer has limited dexterity or relies on assistive technology. For them, those tiny buttons and cramped links aren’t just an inconvenience; they’re a barrier.

Accessibility issues like these don’t just affect your users’ experience—they impact your bottom line and even your legal compliance. Making sure your site’s touch targets are easy to interact with is one of the simplest yet most impactful changes you can make. In this guide, we’ll cover why large, accessible touch targets matter, how they boost usability for everyone, and what steps you can take to ensure your site is welcoming to all.

What Are Touch Targets and Why Are They Important?

Touch targets are interactive elements—such as buttons, links, and form controls—that users engage with as they navigate your website. The size and spacing of these elements can make or break the experience, especially for users on mobile devices or those with physical limitations. If touch targets are too small or closely spaced, users may struggle to click or tap accurately, leading to frustration and a poor experience. This can be particularly challenging for older adults and individuals with limited dexterity.

Making touch targets sufficiently large and spaced out allows everyone to navigate and interact with your site more easily, enhancing both usability and inclusivity. This is a foundational aspect of web accessibility that ensures your website works well for all.

WCAG Guidelines: Key Standards for Touch Target Size

To provide clear guidance on accessible touch target sizes, the Web Content Accessibility Guidelines (WCAG) have established several success criteria. WCAG 2.1 and the updated WCAG 2.2 outline standards to help developers make online content accessible, mainly through adequately sized touch targets.

Success Criterion 2.5.5 (Target Size)

In WCAG 2.1, Criterion 2.5.5 specifies that interactive elements should meet a minimum touch target size of 44×44 pixels, making it easier for users with limited motor skills or assistive technology to select the right element.

Success Criterion 2.5.8 (Target Size – Enhanced)

WCAG 2.2 expands on this with Criterion 2.5.8, recommending even larger touch targets when interactive elements are positioned close together. This helps users avoid accidentally tapping the wrong element, especially on mobile devices or when using screen readers.

These guidelines establish a foundation for accessible design, giving developers clear targets to create user-friendly, inclusive sites that reduce errors and improve the overall user experience.

Best Practices for Designing Accessible Touch Targets

With WCAG standards in mind, you can take steps to create touch targets that enhance usability. Here are some essential practices for implementing accessible interactive elements:

Use Adequate Padding and Margin

Padding and margins around buttons and links help ensure they meet minimum size requirements while maintaining a clean visual layout. For example:
```
button {
  padding: 12px 20px; /* Increases padding for larger touch target */
  font-size: 16px;
}
```
Ensure Minimum Width and Height

Using min-width and min-height properties guarantees that buttons and other elements stay at least 44×44 pixels, even when the element content is smaller. This maintains accessibility across different screen sizes.
```
button {
  min-width: 44px;
  min-height: 44px;
}
```
Space Out Interactive Elements

Placing enough space between buttons and links prevents mis-taps and ensures usability for all users, especially those on mobile devices or using assistive technologies.
```
button, a {
  margin: 10px;
}
```
Add ARIA Attributes for Enhanced Accessibility

ARIA attributes (Accessible Rich Internet Applications) add context to interactive elements for users relying on assistive devices. For instance, using aria-expanded or aria-haspopup on a menu button helps screen reader users understand its function.
```
<button aria-expanded="false" aria-haspopup="true">Menu</button>
```
Responsive Design: Ensure Touch Target Size Across Devices

Since many users rely on mobile devices for browsing, it’s essential to make touch targets easily accessible on smaller screens. Using responsive CSS ensures that touch targets adapt to various screen sizes:
```
@media (max-width: 600px) {
  button {
    padding: 15px 25px; /* Larger padding on smaller screens */
  }
}
```
Testing Touch Target Accessibility

Once you’ve optimized your touch targets, testing is essential to ensure they’re functional and accessible. Here are a few testing strategies to confirm usability:
- Manual Testing: Test your site on various devices (desktop, tablet, mobile) to ensure touch targets are easy to access and use.
- Accessibility Tools: Tools like Google Lighthouse or WAVE can check WCAG compliance, including touch target sizes.
- User Testing: Feedback from real users, particularly those with disabilities, is invaluable for assessing how accessible and user-friendly your touch targets are.
Wrapping Up

Improving touch target accessibility is just one of many steps toward making your website genuinely inclusive and user-friendly. By focusing on accessible design, you not only enhance the experience for users with mobility challenges and those using assistive technologies but also build a site that’s welcoming and intuitive for everyone. Following WCAG guidelines, using best coding practices, and regular testing are essential—but navigating these standards alone can be overwhelming.

If you’re ready to take accessibility seriously and want to ensure your site is fully ADA-compliant, consider scheduling an ADA briefing with 216digital. Our team of accessibility experts can help you identify potential compliance issues, create actionable solutions, and guide you through the process of building a more accessible and inclusive website. Reach out today to learn how we can help safeguard your site and open new opportunities with ADA compliance.
Greg McNeil

November 8, 2024

How-to Guides

Accessibility, How-to, touch targets, web developers, web development, Website Accessibility
Using NVDA to Test Web Accessibility
Making your website accessible isn’t just a checkbox to tick—it’s about creating a space where everyone feels welcome. Imagine trying to browse a site only to hit wall after wall because it wasn’t designed with all users in mind—that’s the reality for millions of people with disabilities. One of the most effective ways to understand and improve your site’s accessibility is by testing it with tools like NVDA (NonVisual Desktop Access). NVDA is a free, open-source screen reader for Windows that provides audio feedback, enabling users who are blind or visually impaired to explore and interact with digital content.

If you’re a developer or designer aiming to make your website user-friendly for everyone, testing with NVDA can be a real eye-opener. This guide will walk you through everything you need to get started—from setting up NVDA to identifying common accessibility barriers. We’ll also compare NVDA with other screen readers and share tips on integrating accessibility checks into your workflow.

Why Testing with a Screen Reader Matters

Testing with a screen reader is crucial for building websites that everyone can use and enjoy. Did you know that over 8 million people in the United States have a visual disability? Worldwide, an estimated 2.2 billion people are affected by some form of visual impairment. That’s a considerable number of users who rely on screen readers like NVDA to navigate the web. Yet, despite this need, studies show that 95.9% of the world’s top million homepages still have detectable accessibility issues, many of which directly impact screen reader users.

Common Accessibility Barriers

While standards like the Web Content Accessibility Guidelines (WCAG) exist to help ensure content is accessible, there’s still a gap between ticking the compliance boxes and actual usability. Some common accessibility barriers impacting screen reader users include:
- Missing or Incorrect Alt Text: Without alt text, images lack context, making it hard for users to understand what’s on the page.
- Improper Heading Structure: Jumping from an H1 to an H3 heading (and skipping H2) can make navigating a page disorienting.
- Inadequate Link Descriptions: Using link text like “Click here” doesn’t tell users where the link will take them.
- Lack of Keyboard Navigation: If elements aren’t reachable by the keyboard, users may not be able to navigate away from certain sections.
By testing your site with a screen reader like NVDA, you can spot and fix these barriers directly, ensuring your content is genuinely usable—not just technically accessible. This step is vital for engaging a wide audience, including customers who rely on screen readers for equal access.

Plus, by prioritizing screen reader accessibility, you’re not just meeting legal requirements; you’re showing that your brand values inclusivity, which can resonate with customers and build loyalty.

Getting Started with NVDA

Ready to dive in? First, you’ll need to install NVDA on a Windows computer. Just head over to its official website and follow the straightforward instructions. Once it’s installed, take a few minutes to explore the settings. NVDA lets you adjust things like speed, voice pitch, and how much information it reads out loud. Tweaking these settings can make your screen reader testing smoother and help you catch all the essential details without getting distracted.

Understanding the Basics of NVDA

At first glance, NVDA might seem a bit overwhelming, but don’t worry—once you get the hang of a few essential controls, you’ll be navigating like a pro. The main control is the Insert key, which you use along with other keys to execute commands. For example, pressing Insert + Spacebar toggles between browse and focus modes, showing how users move between different sections and interact with elements on your site.

Key Shortcuts to Know
- Tab: Move through interactive elements like buttons and links.
- Shift + Tab: Go back through items, helping you check the flow of navigation.
- H: Navigate through headings in sequence (Shift + H moves backward), which is crucial for accessibility.
- K for links or G for graphics: Jump to specific content, helping you quickly assess if important items are accessible.
Testing for Accessibility Barriers with NVDA

Once you’re comfortable with NVDA, it’s time to put your website to the test. The goal is to see how easy (or difficult) it is for a screen reader user to find and understand information on your site.

Check Your Navigation Structure

Screen reader users rely heavily on clear navigation. Headings should be marked in a logical order, and the Tab key should move through items sensibly. As you use NVDA, please pay close attention to how it announces headings, links, and interactive elements. For instance, links labeled “Read More” can be confusing, while “Learn More About Our Services” is much more straightforward. Descriptive link text is vital to helping screen reader users navigate confidently.

Confirm Image Descriptions

Proper alt text is a must for images. Use the G key to move through images and listen to the descriptions NVDA reads aloud. The alt text doesn’t need to be lengthy—just informative enough to give users an idea of the image’s purpose.

For additional information about alt text, read our article “Understanding Image Alt Text Descriptions.”

Test Interactive Elements Like Forms

Forms can be tricky for screen reader users if they’re not labeled well. As you move through form fields, listen to the labels NVDA reads. Each field should have a clear label, and error messages should be accessible, too. Testing with NVDA can reveal unlabeled fields or hidden error messages that might make filling out forms difficult.

Common Accessibility Barriers to Watch For

Using NVDA can help you spot common barriers that affect accessibility:
- Keyboard Traps: These occur when users get stuck in one part of the page. Use the Tab and Shift + Tab keys to move around; if you find yourself stuck, it’s likely a keyboard trap.
- Focus Indicators: Screen reader users (and keyboard users in general) need a visible marker to show where they are on the page. Test this by tabbing through your site to see if each interactive element has a clear indicator.
- Content Flow: Listen to your site in linear order, from top to bottom. Does it make sense as you go? Unclear structure or skipped headings can confuse users trying to navigate the content in a meaningful order.
Documenting What You Find

As you test, it’s helpful to document any issues you come across. Be specific: note where each issue happens, what the problem is, and why it’s an accessibility issue. For example, if a button lacks a label, describe which button it is, where it’s located, and how this impacts screen reader users. Including step-by-step details on how you tested (like key sequences or what NVDA readout) can also help your team quickly recreate and fix the issue.

Trying Out Other Screen Readers

While NVDA is a fantastic tool, remember that users rely on different screen readers like JAWS or VoiceOver on Apple devices. Testing with more than one screen reader can uncover accessibility issues that one tool might miss. NVDA is particularly good with dynamic content and ARIA (Accessible Rich Internet Applications) attributes. So, if you can, try testing with multiple screen readers to get a fuller picture of your site’s accessibility.

Making Accessibility Part of Your Process

Accessibility testing with NVDA shouldn’t be a one-time thing—it works best when it’s part of your development process from the start. By catching issues early, you’ll avoid significant fixes later and create a better experience for everyone. During design, consider accessibility-friendly patterns like high-contrast colors and adjustable font sizes. During development, use NVDA to test as you go and do a final check once your site is live.

And if possible, getting feedback from users with disabilities can be incredibly valuable. While NVDA can help you simulate a screen reader experience, real users bring real-world insights that can highlight usability issues you might not think of.

Wrapping Up

Using NVDA to test your website’s accessibility is a powerful step toward creating a more inclusive online experience, but there’s so much more to accessibility than just technical adjustments—it’s about making your site welcoming to everyone, including customers who rely on assistive technology.

To help you navigate the broader world of ADA compliance and web accessibility, consider scheduling a briefing with 216digital. Our team can walk you through key accessibility requirements, share insights into your site’s current compliance level, and guide you on building a sustainable, accessible web presence. Let’s work together to make your website an inclusive, welcoming space for all users. Schedule your ADA briefing with 216digital today, and take the next step toward true digital accessibility.
Kayla Laganiere

November 5, 2024

How-to Guides

Accessibility, Accessibility testing, ADA Compliance, NVDA, web developers, Website Accessibility
Are ADA Lawsuits Truly Addressing Web Accessibility Concerns or Financial Motives?

The Americans with Disabilities Act (ADA) was enacted in 1990 to prohibit discrimination and ensure equal opportunities for people with disabilities, promoting accessibility in physical spaces, employment, transportation, and communication. Its core intent was, and still is, to remove barriers, offering individuals with disabilities equitable access to spaces, services, and information. Yet, as technology evolved, so did the legal landscape.

Today, ADA lawsuits increasingly target digital spaces, focusing on web accessibility. However, many argue that many of these cases may be financially motivated rather than genuinely aimed at improving user accessibility.

This article will explore whether ADA lawsuits in the digital realm truly address accessibility concerns or have become vehicles for profit, disproportionately affecting small businesses and often failing to create meaningful accessibility changes.

ADA’s Original Purpose: Accessibility for All

Digital spaces were in their infancy when the ADA was introduced, and web accessibility wasn’t yet a primary focus. Over time, however, the need for digital accessibility became apparent as websites and apps became essential tools for daily life. The ADA’s promise of equal access naturally extended into these new spaces, with courts ruling that websites should be accessible to individuals with disabilities. In principle, these lawsuits aimed to push businesses toward compliance, making the digital world as accessible as the physical one.

However, the sharp increase in web accessibility lawsuits has sparked debates. While some argue that these lawsuits hold businesses accountable, others claim they’ve strayed from the ADA’s purpose and are instead exploited for financial gain.

The Surge in Web Accessibility Lawsuits: Financial Motives or Accessibility Goals?

Data shows a dramatic increase in ADA-related digital accessibility lawsuits. According to a report from UsableNet, over 4,000 digital accessibility lawsuits were filed in 2023 alone, with the majority in industries like retail, food service, and e-commerce. Many of these lawsuits are part of what some legal experts call “drive-by” or “surf-by” suits, where plaintiffs—or law firms—quickly identify accessibility issues, sometimes without ever attempting to use the site.

A well-known case involves Domino’s Pizza, which was sued by a visually impaired man who claimed the company’s website and mobile app were incompatible with his screen reader, making ordering food online impossible. In this instance, the lawsuit gained national attention, ultimately resulting in the Ninth Circuit Court ruling in favor of the plaintiff. While this case had an accessibility-focused outcome, it highlighted the complexities of web accessibility requirements under the ADA. Smaller businesses, however, often lack the resources to navigate lengthy litigation, and settlements can be a quicker option.

High-Profile Examples and “Drive-By” Suits

Certain plaintiffs and legal firms have been linked to hundreds, if not thousands, of ADA lawsuits. These “drive-by” or “surf-by” suits are often filed in large batches across multiple jurisdictions, targeting businesses with minor web accessibility issues. In these cases, it’s common for plaintiffs and attorneys to demand settlements without requiring that accessibility issues be addressed. This approach raises questions about the true intention behind these cases: Are they serving individuals with disabilities or simply a means to extract settlements?

High-profile cases aside, small businesses bear the brunt of such lawsuits. For example, a local bakery or a small online retailer with limited technical knowledge and budget may unknowingly operate a website that needs to be fully ADA-compliant. When targeted by a lawsuit, they often find the cost of defending themselves too high, pushing them toward a settlement which rarely requires accessibility improvements.

The Disproportionate Impact on Small Businesses

Due to limited resources and awareness, small businesses are especially vulnerable to ADA lawsuits. Unlike large corporations, small business owners often lack dedicated legal or compliance departments, making it difficult for them to implement and maintain accessible websites. The financial strain can be significant; they face legal fees, potential settlements, and the cost of redesigning their websites for compliance.

For many small businesses, even the threat of an ADA lawsuit is enough to cause financial stress. Paying legal fees and settlements can exhaust their budgets, sometimes leading to layoffs or even closures. While larger businesses may view these costs as part of risk management, small businesses face disproportionate consequences despite representing a smaller fraction of the digital marketplace.

Are ADA Lawsuits Leading to Real Accessibility Improvements?

With the increase in ADA lawsuits, one might assume that digital accessibility has improved dramatically. However, evidence suggests otherwise. Many cases settle out of court without requiring the business to make its website accessible. In these instances, settlements may address plaintiffs’ demands but leave broader accessibility issues unresolved.

While larger companies might use settlements to improve accessibility, smaller businesses often struggle to implement changes even after legal action. Without clear guidelines from the ADA on web accessibility standards, businesses are left in a legal gray area, leading to inconsistent and often inadequate improvements. For meaningful change, legal actions would need to enforce accessibility upgrades as part of their resolutions. Unfortunately, in many cases, financial gain appears to take precedence over accessibility outcomes.

How to Protect Yourself from Frivolous ADA Lawsuits

Despite the challenges, businesses can proactively mitigate the risk of ADA lawsuits and ensure their websites are accessible. Here are several strategies:

Conduct Regular Accessibility Audits

Regularly assessing your website for accessibility compliance is essential. Automated tools and manual testing can help you catch and fix issues that may otherwise go unnoticed. While automated tools can identify many technical problems, manual testing is often necessary to ensure a website is accessible.

Follow WCAG Guidelines

The Web Content Accessibility Guidelines (WCAG) 2.1 are the global standard for web accessibility. While not legally binding under the ADA, adhering to these guidelines demonstrates a commitment to accessibility and can help businesses defend themselves against lawsuits.

Partner with Accessibility Experts

Hiring an external firm with expertise in web accessibility can provide invaluable insights and help you develop a compliance strategy. Accessibility experts like 216digital understand the nuances of ADA and WCAG compliance, making them well-equipped to help businesses avoid common pitfalls.

Stay Informed on Legal Trends

ADA compliance in the digital space is rapidly evolving, and staying informed on relevant lawsuits and rulings can help businesses understand potential risks. Engaging with industry groups or associations that focus on digital accessibility can also provide guidance and resources.

Maintain Documentation and Accessibility Policies

Documenting your efforts to comply with accessibility standards can help demonstrate a proactive approach. Maintaining a web accessibility policy and records of improvements can strengthen your defense if faced with a lawsuit.

Moving Toward Meaningful Change in Web Accessibility

For ADA lawsuits to truly serve their intended purpose, they need to result in real accessibility improvements rather than financial settlements alone. While some cases serve as important reminders for businesses to make their websites accessible, the prevalence of drive-by suits highlights the need for more explicit standards and legal reform. Small businesses, in particular, require more guidance and support to achieve compliance without facing financial ruin.

A Call for a Balanced Approach

In conclusion, ADA lawsuits can be a powerful tool for advancing web accessibility, but only if they prioritize access over profit. For meaningful progress, lawsuits should focus on enforcing change rather than leveraging settlements. By adopting proactive accessibility strategies, businesses can protect themselves from frivolous lawsuits and contribute to a more inclusive digital landscape for all users.

By taking steps to prioritize accessibility, companies can reduce their exposure to ADA lawsuits and ensure that their websites are accessible to all users, fulfilling the original purpose of the ADA. For any organization, compliance is a legal obligation and an opportunity to create an inclusive and user-friendly digital experience.

Ready to get started? Schedule a complimentary ADA strategy briefing with 216digital today. Let’s work together to protect your online business!

Greg McNeil

November 4, 2024

Legal Compliance

Accessibility, ADA Compliance, ADA Website Compliance, Web Accessibility, Website Accessibility
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
5 Accessibility Mistakes to Dodge This Holiday Season
Many eCommerce businesses make most of their income during the holiday shopping season, so your website must perform to the best of its ability during the Black Friday and Cyber Monday promotions. Web Accessibility is probably the last thing on your mind when you’re already in a frenzy to ensure you’re maximizing every visit to your website. However, you may be leaving money on the table or making yourself vulnerable to expensive litigation if you don’t stay diligent with your digital inclusivity.

For many customers—especially those with disabilities—shopping online is their primary option. If your website isn’t accessible, you’re alienating a significant portion of your audience (up to 20%) and potentially violating the Americans with Disabilities Act (ADA).

To help you prepare for the holiday rush, let’s go over five common web accessibility mistakes businesses make during holiday promotions and how you can avoid them.

Insufficient Alt Text for Images

Holiday promotions often rely on eye-catching images, banners, and product displays. However, if those images lack appropriate alt text, customers using screen readers won’t be able to understand their content. Alt text (short for alternative text) provides a textual description of an image that’s accessible to screen reader users.

Why It Matters

Alt text is essential for individuals with visual impairments. If a visually impaired customer is browsing your site and encounters an image without a proper description, they’ll have no idea what’s being displayed. Imagine running a huge Black Friday sale, but your best deals are hidden from a portion of your audience simply because your images aren’t described.

How to Fix It

As you add promotional banners and products to the website, always make sure you’re adding alt text to the images. Here’s an example:
```
<img src=" winter-sale-banner.jpg" alt=" Banner for Winter Sale - Up to 50% off jackets and coats">
```
Do not use image file names or vague text such as “sale-img” or “Sale Image”. Make sure the alt text contains enough information that the user understands the purpose of the image and contains any words that appear on the image.

Poor Color Contrast

With holiday promotions comes festive design—bright colors, eye-catching buttons, and themed decorations. While these designs may look great, they often fail color contrast standards. Having adequate color contrast is not only good for color-blind users, but it also makes the website easier for everyone to navigate.

Why It Matters

According to WCAG, the minimum contrast ratio between text and background should be at least 4.5:1 for normal text and 3:1 for larger text. When the contrast is too low, customers with low vision or color blindness may struggle to read important information, such as product details or discount codes.

How to Fix It

Use tools like the WebAIM Contrast Checker to ensure your color choices meet the WCAG contrast ratio guidelines. For example, a light gray text on a white background will likely fail the contrast test, but switching to a darker gray or black can make a big difference.

Here’s an example of a common mistake and how to correct it:
```

<p style="color: #cccccc; background-color: #ffffff;">50% off all products!</p>

<p style="color: #000000; background-color: #ffffff;">50% off all products!</p>
```
Pay attention to your text color, button colors, and even the contrast of smaller elements like icons.

InaccessibleNavigation and Controls

Most store owners don’t consider that some users do not navigate their website with a mouse. Even some users without disabilities prefer to use other input methods to quickly navigate some sections of your website.

Why It Matters

Blind and motor-impaired users rely on the keyboard, gestures, or voice commands to navigate your website. If your navigation, contact forms, category filters, and product pages are not properly coded to support these input methods, these users will be denied equal access to the website and may not be able to make a purchase with you at all, losing you a valuable customer and potentially damaging your reputation.

How to Fix It

Regularly test the functional portions of your website with a keyboard. Attempt to start at the homepage, navigate to a category page, use the category filters, add/remove product quantities, and select product options without your mouse. If you encounter a problem with an element, it’s likely not coded using the correct element. You can force an element to receive keyboard focus using the tabindex attribute. The role="button" attribute will help users navigating with assistive technology better understand the purpose of the control:
```
<span class="swatch-button" tabindex="0" role="button">Beige</span>
```
Better yet, use the correct semantic HTML tag to accomplish this:
```
<button class="swatch-button">Beige</button>
```
Semantic HTML helps users relying on assistive technology understand the purpose of controls and also helps Google better understand the structure of your website:
```
<nav>
	<a href="/products">All products</a>
	<a href="/products/sale">Sale products</a>
	<a href="/contact">Contact Us</a>
</nav>
```
Missing Captions on Promotional Videos

Videos are an excellent way to showcase products, promote deals, or explain services during the holiday season. However, many businesses forget to include captions, making the content inaccessible to users who are deaf or hard of hearing.

Why It Matters

Videos contain a lot of important information in the form of spoken words and visual cues. Both blind and deaf users rely on accessible closed captions (not just subtitles) to understand the content of the video. Also, some users may be in noisy environments and are unable to hear the video.

How to Fix It

Most popular video platforms have auto-captioning features, but these tend to just subtitle the video rather than create truly accessible closed captions. There are many cheap and easy closed captioning services, such as Rev.com, that have quick turnarounds.

Here’s how you implement closed captions from an external service:
```
 <video controls>
  <source src="promo-video.mp4" type="video/mp4">
  <track kind="captions" src="captions_en.vtt" srclang="en" label="English">
  Your browser does not support the video tag.
</video>
```
Always test the captions to make sure they sync properly with the video and cover both spoken dialogue and important sound effects.

Over-reliance on Automated Accessibility Overlays

It might seem tempting to use automated accessibility overlays, especially during the hectic holiday season. These are often marketed as one-click solutions to make your website accessible. The Department of Justice has issued clear guidance that these solutions are inadequate in addressing web accessibility, and they may get you targeted with litigation.

Why It Matters

Automated accessibility overlays claim to fix all accessibility issues on a website, but they usually fail to address the root problems. Blind users are outspoken that they dislike these solutions as they tend to interfere with the assistive technologies they’re already comfortable with. We’ve also seen these solutions specifically called out in lawsuits as a reason for being targeted.

How to Fix It

The best way to ensure your site is accessible is by addressing the core issues in your code and design. Automated tools can help identify problems, but manual reviews and fixes are essential. Invest in manual audits and focus on meeting the WCAG guidelines through thoughtful design and coding practices.

Here’s an example of using a reliable method instead of relying on an
```

<img src= "holiday-product.jpg" alt= "Red winter coat with a 30% off discount tag">
```
Automated tools tend to use AI to label images and controls and often misrepresent content on the website, leading to a potentially overtly harmful experience.

Conclusion

As you gear up for holiday promotions, make sure accessibility is at the top of your checklist. By avoiding these common mistakes—insufficient alt text, poor color contrast, inaccessible navigation, missing captions, and over-reliance on automated tools—you’ll ensure that your website is welcoming and easy to use for everyone.

Not only does improving web accessibility help you reach a wider audience, but it also protects your business from legal risks and ensures compliance with WCAG and ADA standards. Taking the time to implement these changes now will pay off during the holiday rush and beyond.

If you’re unsure about the accessibility of your site, reach out to 216digital using the contact form below for a free evaluation.
Bobby

October 21, 2024

How-to Guides, Legal Compliance

holiday promotions, How-to, web development, 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
Debunking Common WCAG Myths
When it comes to digital accessibility, misconceptions can lead businesses astray, leaving them vulnerable to compliance issues and missed opportunities. From believing that automated tools can handle everything to thinking that accessibility compromises design, these myths often create unnecessary hurdles. The truth? Achieving web accessibility is not only possible but it can also be seamlessly integrated into your existing processes.

Let’s debunk some of the most common myths about the Web Content Accessibility Guidelines (WCAG) so your business can take the right steps toward an accessible and inclusive online experience.

Myth 1: Conformance with WCAG = Compliance with Accessibility Laws

One of the most prevalent misconceptions is that adhering to WCAG automatically means compliance with all accessibility laws. While WCAG is widely recognized and often used as a benchmark for accessibility, it is important to note that WCAG conformance is not the same as legal compliance.

The Reality

Different countries have varying legal standards for accessibility, and while WCAG is used as a framework, laws such as the Americans with Disabilities Act (ADA) in the U.S. or the European Accessibility Act (EAA) in Europe may have their interpretations and requirements. For example, the ADA doesn’t explicitly mention WCAG, but U.S. courts frequently use WCAG as the gold standard for determining accessibility in lawsuits.

Therefore, WCAG conformance is essential to achieving legal compliance, but it’s not the only factor. Businesses must stay informed about relevant accessibility laws in their jurisdiction to ensure full compliance.

Myth 2: Automated Tools are All I Need to Conform with WCAG Guidelines

Many organizations believe that using automated tools is enough to ensure compliance with WCAG. Automated testing can catch many accessibility issues, but relying solely on these tools is a mistake.

The Reality

Automated tools are a valuable first step in identifying accessibility issues, such as missing alt text or incorrect HTML elements. However, they cannot fully capture the complexity of human interactions with a website. Accessibility involves factors such as the ability to navigate a site using a keyboard, how intuitive the content is, and whether assistive technologies like screen readers can interpret the content correctly. These are challenges that require manual testing by actual users with disabilities.

Automated testing, manual audits, and user testing with people who rely on assistive technologies are essential to achieving WCAG compliance.

Myth 3: WCAG is a ”One-and-Done”Checklist

Some businesses think that WCAG is a static checklist that, once completed, guarantees permanent accessibility.

The Reality

Digital accessibility is an ongoing process. Websites are living entities that change over time—content updates, new features, or design overhauls. Each change presents the possibility of new accessibility barriers. Furthermore, the WCAG evolves, with updates to reflect new technologies and user needs (e.g., the transition from WCAG 2.0 to WCAG 2.2 with WCAG 3.0 in development).

To maintain compliance, businesses must regularly audit their digital products and ensure that any updates meet the latest WCAG standards. Accessibility should be baked into your organization’s development workflow and continuously revisited.

Myth 4: Only Businesses Who Serve the Disability Community Need to Follow WCAG

A common misconception is that only organizations that cater specifically to people with disabilities need to worry about WCAG compliance.

The Reality

Every business with an online presence should ensure digital accessibility. Over 1 billion people worldwide have some form of disability, which means that nearly every industry has potential customers who need accessible digital experiences. Additionally, in many jurisdictions, accessibility laws apply to many businesses, not just those explicitly serving the disability community.

Web accessibility also benefits a broader audience. For instance, captions on videos can help non-native speakers and accessible forms can improve the experience for all users, regardless of ability.

Myth 5: WCAG Guidelines Will Decrease My Site’s Visual Appeal

There’s a lingering belief that making a website accessible according to WCAG guidelines will compromise its design and visual appeal.

The Reality

Accessibility and good design go hand in hand. WCAG guidelines promote clarity, simplicity, and ease of use—principles that enhance a website’s user experience. Accessible design doesn’t mean dull or unattractive; it means that the site is intuitive and easy to navigate for all users.

Elements like sufficient color contrast, straightforward typography, and intuitive navigation are central to accessibility and aesthetics. Many visually stunning websites are entirely WCAG compliant by incorporating a design that benefits all users without sacrificing creativity or brand identity.

Myth 6: Implementing WCAG Guidelines is Expensive, Time-Consuming, and Resource-Intensive

Some businesses fear that conforming to WCAG guidelines will be a costly, laborious process that demands a complete overhaul of their digital properties.

The Reality

While achieving compliance requires time and resources, it can mean something other than a complete redesign or massive financial outlay. Many accessibility fixes—like adding alt text to images or improving color contrast—are relatively straightforward and inexpensive. Additionally, non-compliance costs, such as legal fees, lost customers, and reputational damage, far outweigh the costs of becoming compliant.

Moreover, integrating accessibility into your development process early on can make future compliance more accessible and cost-effective. Accessibility becomes much more expensive when treated as an afterthought or an add-on rather than part of the core design and development strategy.

How to Make Accessibility Achievable for Every Business

Debunking these myths is essential to understanding that WCAG compliance and digital accessibility are achievable for businesses of all sizes. Here are a few practical ways to approach accessibility:
1. Start Small, Scale Up: If you’re overwhelmed by the scope of WCAG guidelines, start with the most critical aspects and gradually expand your efforts. Begin by addressing the most common accessibility barriers, such as text alternatives and keyboard navigation.
2. Leverage External Expertise: Consider partnering with a digital accessibility expert. External accessibility consultants like 216digital bring specialized knowledge of WCAG guidelines and accessibility testing methods. They can help identify issues, prioritize fixes, and provide ongoing monitoring to ensure your site remains accessible.
3. Use a Hybrid Testing Approach: Combine automated tools with manual and user testing by people with disabilities. Automated tools can handle repetitive checks, but manual testing is vital for uncovering issues that require human judgment and assistive technology testing.
4. Plan for Accessibility from the Start: Integrate accessibility into your design and development process early on. This proactive approach reduces the time and cost of retrofitting accessibility into a live product.
5. Commit to Continuous Improvement: Remember, digital accessibility isn’t a one-time project—it’s an ongoing commitment. Regular audits, training for your team, and staying informed about the latest WCAG updates will ensure you remain compliant over time.
Accessibility is Within Reach

Understanding these common misconceptions about WCAG and digital accessibility is just the beginning. The path to compliance and creating a truly accessible digital experience requires a tailored, proactive approach. At 216digital, we help businesses not only meet WCAG standards but also navigate the complexities of accessibility laws to protect themselves from costly litigation and better serve all users.

Ready to take the next step? Schedule an ADA briefing with our team to ensure your digital presence is compliant, inclusive, and future-proof. Together, we can make accessibility achievable for your business.
Greg McNeil

October 11, 2024

WCAG Compliance

ADA Compliance, WCAG, WCAG Compliance, Web Accessibility, Website Accessibility
Web Accessibility Tips for Restaurants in 2024
As a restaurant owner, creating an accessible and welcoming environment doesn’t just apply to your physical space—it’s equally important online. In 2024, web accessibility is no longer optional. With more diners relying on digital services like online menus and reservation systems, it’s crucial that everyone, regardless of ability, can easily navigate and interact with your website. This guide will walk you through some key ways to make your restaurant’s digital experience accessible for all, including compliance with the latest Web Content Accessibility Guidelines (WCAG).

What is Web Accessibility?

Web accessibility is the practice of creating digital content that can be easily used by individuals with disabilities. This means ensuring that people with visual, auditory, motor, or cognitive disabilities can easily access and interact with your content.

For restaurants, this means making sure that your digital menu and reservation systems are easy to use for everyone, whether they navigate with a mouse, keyboard, or screen reader. But making your website accessible isn’t just about being inclusive—it also helps you meet legal requirements like the Americans with Disabilities Act (ADA).

WCAG Guidelines for Restaurants

WCAG is the global standard for web accessibility. To ensure your restaurant’s website is accessible, you should aim for compliance with WCAG 2.1 at Level AA. Some of the key WCAG principles to keep in mind include:
- 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 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.
Let’s break down how these principles apply to specific elements of your restaurant’s website, such as menus and reservation systems.

How to Share Your Menu Accessibly

Your menu is the core of your restaurant’s website, and making it accessible can open up your business to more customers. Start by ensuring that your menu is coded properly so that all users can access it. Avoid using PDF formats, which can be difficult for screen readers to interpret.

Use Semantic HTML

Semantic HTML is the building blocks for an accessible website. By using proper HTML tags, you provide structure and meaning to your content, making it easier for users to understand the structure of your content. For a menu, you can use <div> to separate menu items and <span> or <p> for the item’s name, price, and description.

Here’s a sample code snippet for a restaurant menu using semantic HTML:
```
<div class="menu-item-text">
   <h3 class="menu-item-heading">
      <span class="menu-item-name">Bruschetta</span>
      <span class="menu-item-price">$12.90</span>
   </h3>
   <p class= "menu-item-desc">Crispy toasted bread topped with fresh tomatoes, garlic, basil, and a drizzle of balsamic glaze.
   </p>
</div>
```
Provide Text Alternatives for Images

If your menu includes images of dishes, be sure to include alternative text (alt attributes) to describe them. Screen readers use this alt text to inform users what is in the image.

For example:
```
<img src= "grilled-salmon.jpg" alt= "Grilled salmon with mashed potatoes and steamed vegetables"/>
```
Alt text should describe the content of the image in a way that makes sense contextually. In this case, it’s about what the dish looks like and what ingredients are included.

How to Describe Your Menu Items

When writing descriptions for menu items, keep in mind that clear, concise descriptions benefit everyone, especially people with cognitive disabilities. Use simple language and avoid jargon or overly complex phrases. If you have menu items that cater to specific dietary restrictions (e.g., gluten-free or vegan options), make sure these are clearly labeled.

You could add a label like this:
```
<p><strong>Gluten-Free:</strong> Yes</p>
<p><strong>Vegan:</strong> No</p>
```
By making your menu easy to read and accessible, you’re not only helping users with disabilities but also improving the overall user experience.

How to Improve Reservation Booking Accessibility

Online reservations are convenient for both customers and restaurants, but it’s important to make sure your booking system is accessible to all users. Whether you’re using a third-party booking platform or a custom-built system, accessibility should be a top priority.

Use Accessible Form Controls

Forms are a key part of most reservation systems, and making sure these are accessible is essential. First, ensure that every form element has an associated <label> tag. This allows screen readers to correctly identify form fields.

Here’s an example:
```
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
```
Also, be sure that all form controls can be navigated using only a keyboard. According to WCAG, all interactive elements should be operable through keyboard commands alone. This is important for people with mobility impairments who may not use a mouse.

ARIA Roles and Live Regions

Accessible Rich Internet Applications (ARIA) roles help make dynamic content more accessible. For example, you can use ARIA attributes to alert users of changes in the reservation system, such as confirming their booking.

Here’s an example of using ARIA for a live region that confirms a reservation:
```
<div aria-live="polite" id="confirmation-message">
  Your reservation has been confirmed.
</div>
```
The aria-live= “polite” attribute ensures that screen readers announce updates to the user without disrupting the current interaction.

Timeouts and Error Handling

When implementing a reservation system, make sure that users are given enough time to complete their forms. WCAG 2.1 guidelines recommend providing a way to extend time limits if necessary.

Additionally, clear and helpful error messages should be provided when users make mistakes while filling out forms. Use ARIA to ensure that these messages are communicated to users with assistive technology:
```
<div aria-live="assertive" class="error-message">
  Please enter a valid phone number.
</div>
```
By following these steps, you make it easier for all customers to book a table at your restaurant, ensuring they have a positive experience.

Keyboard Navigation

Make sure that all interactive elements, like buttons and links, can be accessed using a keyboard. This is crucial for people with mobility issues. A logical tab order should guide users through your site efficiently, moving from the main content areas to interactive elements like forms and buttons.

To test this, try navigating your site using only the “Tab” key and see if you can access all functions.

Accessible Calendar Widgets

If your reservation system includes a date picker, make sure it is keyboard-accessible. Some date pickers are difficult to navigate with a keyboard or screen reader, so consider providing users with an accessible alternative, like allowing manual date entry in addition to the calendar.

Here’s an example of a keyboard-friendly date input:
```
<input type="date" id="reservation-date" name="reservation-date">
```
Going Beyond Compliance: User Experience Matters

Meeting WCAG standards is important, but don’t stop there. Think about the overall user experience. For instance, ensuring text contrast is high enough for readability, using large touch targets for buttons, and testing your website on multiple devices can significantly improve accessibility.

An accessible website isn’t just for compliance—it’s a way to expand your customer base and create a better experience for everyone.

A Taste of Accessibility

Web accessibility is the secret ingredient to running a successful restaurant in 2024. By aligning your website with WCAG guidelines, you can ensure that everyone—from loyal customers to new diners—enjoys a smooth and inclusive experience, whether they’re browsing your menu or making a reservation. Beyond just compliance, an accessible site reflects your commitment to every guest, enhancing your reputation and widening your customer base.

At 216digital, we can help you navigate the world of web accessibility, from ADA compliance to optimizing your user experience. Schedule a free ADA briefing with us today and discover how your restaurant’s website can cater to every customer, no matter their abilities. Let’s make your digital presence as inviting as your dining room!
Greg McNeil

October 9, 2024

How-to Guides

ADA Website Compliance, How-to, Restaurants, WCAG, WCAG Compliance, web development, Website Accessibility
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
Accessibility Remediation: Definitions & Guidelines

When you’re getting started with digital accessibility, it’s easy to feel overwhelmed by all the technical jargon to wrap your head around. However, getting familiar with these key concepts is the first step toward making your website more accessible for everyone to use. In this guide, we’ll break down some of the most important terms you’ll come across in accessibility remediation. Whether it’s ensuring your site works well with keyboard navigation or understanding how assistive technologies come into play, we’ve got you covered. This quick rundown will help you get comfortable with the basics and take meaningful steps toward a more accessible site.

Key Terminology in Accessibility Remediation

When it comes to making your website accessible, there are a few key terms you’ll want to get familiar with. Here’s a quick breakdown of the essential terms you’ll encounter as you work to ensure your site is welcoming and usable for everyone.

Usability

Usability is all about how easy it is for people to navigate and interact with your website. The goal is to make sure that no one—regardless of their abilities—struggles to find what they’re looking for or complete tasks. It’s not just about making things functional, but about making them simple, intuitive, and frustration-free for all users.

Remediation

Remediation is just a fancy way of saying “fixing accessibility issues.” These are problems uncovered during an audit or assessment. This could mean tweaking your code, updating content, or adding features to make your site easier for people with disabilities. The idea is to go beyond patching things up and ensure your site works smoothly in the long run.

Compliance

Compliance refers to meeting specific legal guidelines and standards, like the Americans with Disabilities Act (ADA) or the Web Content Accessibility Guidelines (WCAG). Following these rules isn’t just about staying out of legal trouble—it’s about making sure your site is usable by people with disabilities. By staying compliant, you protect your business and ensure an inclusive online space.

Auditing

An accessibility audit is a deep dive into your website to identify any barriers that might prevent people with disabilities from using it fully. These barriers can range from missing image descriptions to confusing layouts. Auditing is the first step in figuring out what needs to be fixed, giving you a clear roadmap to improving your site’s accessibility.

User Testing

User testing is a hands-on way to see how real people—especially those with disabilities—interact with your website. While automated tools can catch some issues, real users can point out things machines might miss, like tricky navigation or features that don’t work well with assistive technologies. It’s like getting an inside scoop on how to make your site better for everyone.

Assistive Technologies

Assistive technologies are tools that help people with disabilities use the web. These include screen readers, voice control software, and alternative keyboards. Knowing how your site interacts with these tools is key to ensuring that all users can access your content.

Screen Reader

A screen reader is software that converts the text on a website into spoken words, allowing visually impaired users to “hear” the content. It’s a vital tool for those who can’t see the screen, helping them access everything from written text to image descriptions.

Keyboard Navigation

Not everyone uses a mouse to browse a website—many people rely on their keyboard to move through a site. That’s why it’s crucial to make sure that all site functions can be accessed using keyboard shortcuts. This includes things like filling out forms, clicking buttons, and navigating menus without needing a mouse.

Alternative Content

Alternative content refers to substitutes for visual or interactive elements that some users can’t access. For example, adding descriptive text (alt text) for images helps visually impaired users understand what’s in the picture. It’s not just about including something—it’s about making sure the alternative content adds value for those who need it.

Accessibility Overlay

An accessibility overlay is a quick-fix tool that can be added to your site to address specific accessibility problems. While it might provide some immediate help, it often doesn’t get to the root of the issues. True accessibility needs to be built into your site’s design and code rather than relying on these temporary fixes.

Accessibility Monitoring

Digital accessibility isn’t something you do once and forget about—it’s an ongoing effort. Monitoring means regularly checking your site to ensure it continues to meet accessibility standards as you make updates or add new content. This way, you can catch any new issues early and make sure your site stays user-friendly for everyone over time.

Compliance Standards and Laws

When it comes to making sure your website is both accessible and legally compliant, there are a few essential standards and laws you need to be aware of. Understanding these helps you avoid potential legal issues and ensures your site is inclusive.

W3C (World Wide Web Consortium)

The W3C is the leading organization that sets the rules and standards for how the web functions. They’re responsible for creating protocols that guide the future of the web, and one of their most important contributions is the Web Content Accessibility Guidelines (WCAG). These guidelines are the go-to standards for digital accessibility, ensuring that online content is usable for people of all abilities.

Web Content Accessibility Guidelines (WCAG)

WCAG is a comprehensive set of recommendations to make web content more accessible to everyone, especially people with disabilities. These guidelines are built around four main principles—Perceivable, Operable, Understandable, and Robust (often called POUR).

In short, these principles ensure that all users can perceive and interact with content, understand how to use the site and that the content works reliably across different technologies and platforms. Following WCAG isn’t just good practice—it’s often a legal requirement.

Americans with Disabilities Act (ADA)

The ADA is a prominent civil rights law in the U.S. that protects people with disabilities from discrimination in various areas of life, including employment, public services, and, now, digital spaces. While the ADA doesn’t specifically mention websites, courts have increasingly ruled that digital accessibility falls under its umbrella. This means your website must be accessible, or you could be at risk of legal action for not complying with the ADA.

Section 508

Section 508 is a law that specifically applies to federal agencies and any organization working with them. It requires that all electronic and information technology, including websites, be accessible to people with disabilities. The good news is that Section 508 closely aligns with the WCAG standards, so if you’re following WCAG, you’re likely on the right track for Section 508 compliance, too.

IDEA (Individuals with Disabilities Education Act)

IDEA ensures that students with disabilities receive a free and appropriate education, and in today’s world, that includes access to digital learning materials. Whether it’s a website, software, or other digital resource used in schools, it must be accessible to all students, including those with disabilities. If you’re involved in the education sector, this law is critical for ensuring digital accessibility in the classroom.

Accommodation Approaches

Making digital content accessible takes a variety of approaches. Here are some essential methods to ensure your website can be used by everyone, regardless of their abilities.

Alt Text

Alt text, or alternative text, is a short description you add to images on your website. This ensures that people using screen readers can understand what the image is showing, even if they can’t see it. Alt text is essential for making visual content accessible to everyone.

Captions and Closed Captioning

Captions provide a text alternative for the spoken content in videos, which is helpful for people who are deaf or hard of hearing. Closed captions take it a step further, including descriptions of non-verbal sounds like music or laughter, so users get the full experience of the video.

Video Description

Video descriptions offer a spoken narration of the visual elements in a video. This allows visually impaired users to understand what’s happening on screen, beyond just the dialogue, by hearing descriptions of actions, settings, or critical visual cues.

Color Contrast

Good color contrast between text and its background makes it easier to read, especially for people with visual impairments or color blindness. By ensuring your site has good contrast, you improve readability and make sure that everyone can engage with your content.

Headings and Landmarks

Using proper headings and landmarks on your website helps users navigate more easily, especially those relying on screen readers. These tools allow users to quickly jump between sections or locate specific content without having to scroll through the entire page.

Text-to-Speech

Text-to-speech technology can convert written text into spoken words, offering another way for users to access content. This is especially helpful for users with learning disabilities, visual impairments, or even those who prefer listening over reading.

Inclusive Design

Inclusive design means thinking about a wide range of user needs from the very beginning of the design process. By considering accessibility from the start, you can build a website that works for as many people as possible, without needing to retrofit fixes later.

Text Resize and Screen Magnification

Some users need to increase text size or zoom in on parts of your website to see them clearly. By allowing for easy text resizing and screen magnification, you’re giving users with visual impairments more control over how they view your content.

Why Accessibility Remediation is Critical

Accessibility remediation isn’t just about checking boxes for legal compliance—it’s about creating an inclusive, user-friendly digital space that welcomes everyone. Let’s dive into why making your website accessible is so important:

1. Inclusivity

At its core, digital accessibility is about inclusivity. Making sure your website is accessible means that people of all abilities can engage with your content, products, or services. This enhances the user experience for everyone, whether they have a disability or not. When your site is easy to use and navigate, you’re creating a welcoming space where everyone can participate equally in the digital world.

2. Legal Protection

Compliance with accessibility standards like WCAG and laws like the ADA isn’t optional—it’s a legal requirement. Failing to meet these standards can result in lawsuits, hefty fines, and serious damage to your brand’s reputation.

3. Improved SEO

Here’s a bonus: many of the same practices that make your site accessible also happen to be great for SEO. For example, providing descriptive alt text for images not only helps visually impaired users but also helps search engines better understand your content. Structured content, clear headings, and easy navigation improve both accessibility and your search rankings. In short, making your site accessible can help you get noticed by more users—including search engines.

4. Market Reach

By ensuring your site is accessible, you’re opening your business up to a much larger audience. About 16% of the global population lives with some form of disability, and when your site is accessible, you’re making sure they can engage with your brand. This isn’t just a moral win—it’s good for business. More accessibility means more customers, which can directly lead to a boost in your customer base and your bottom line.

Take the First Step Toward Accessibility

Now that you’re more familiar with the key terms and concepts behind accessibility remediation, you’re in a great position to start making meaningful changes to your website. From ensuring proper keyboard navigation to creating alt text for images, every step you take improves the experience for users of all abilities—and keeps you on the right side of compliance.

But you don’t have to tackle this alone. At 216digital, we specialize in helping businesses create accessible websites that meet legal standards and enhance user engagement and reach. If you’re ready to make your site more inclusive and avoid potential legal risks, we’re here to guide you through the process.

Schedule a complimentary ADA strategy briefing with our team today. Together, we’ll map out a plan tailored to your business, helping you integrate WCAG 2.1 compliance into your development roadmap. Let’s start creating a digital space that welcomes everyone and sets your business up for long-term success.

Greg McNeil

September 26, 2024

Legal Compliance, Testing & Remediation, WCAG Compliance, Web Accessibility Training

accessibility Definitions & Guidelines, Accessibility Remediation, ADA Compliance, Web Accessibility Remediation, Website Accessibility

What Are Touch Targets and Why Are They Important?

WCAG Guidelines: Key Standards for Touch Target Size

Success Criterion 2.5.5 (Target Size)

Success Criterion 2.5.8 (Target Size – Enhanced)

Best Practices for Designing Accessible Touch Targets

Use Adequate Padding and Margin

Ensure Minimum Width and Height

Space Out Interactive Elements

Add ARIA Attributes for Enhanced Accessibility

Responsive Design: Ensure Touch Target Size Across Devices

Testing Touch Target Accessibility

Wrapping Up

Why Testing with a Screen Reader Matters

Common Accessibility Barriers

Getting Started with NVDA

Understanding the Basics of NVDA

Key Shortcuts to Know

Testing for Accessibility Barriers with NVDA

Check Your Navigation Structure

Confirm Image Descriptions

Test Interactive Elements Like Forms

Common Accessibility Barriers to Watch For

Documenting What You Find

Trying Out Other Screen Readers

Making Accessibility Part of Your Process

Wrapping Up

ADA’s Original Purpose: Accessibility for All

The Surge in Web Accessibility Lawsuits: Financial Motives or Accessibility Goals?

High-Profile Examples and “Drive-By” Suits

The Disproportionate Impact on Small Businesses

Are ADA Lawsuits Leading to Real Accessibility Improvements?

How to Protect Yourself from Frivolous ADA Lawsuits

Conduct Regular Accessibility Audits

Follow WCAG Guidelines

Partner with Accessibility Experts

Stay Informed on Legal Trends

Maintain Documentation and Accessibility Policies

Moving Toward Meaningful Change in Web Accessibility

A Call for a Balanced Approach

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

Insufficient Alt Text for Images

Why It Matters

How to Fix It

Poor Color Contrast

Why It Matters

How to Fix It

InaccessibleNavigation and Controls

Why It Matters

How to Fix It

Missing Captions on Promotional Videos

Why It Matters

How to Fix It

Over-reliance on Automated Accessibility Overlays

Why It Matters

How to Fix It

Conclusion

The Current Mindset Around Website Accessibility

The Value of Accessibility for All Users