216digital.
Web Accessibility

Phase 1
Web Remediation for Lawsuit Settlement & Prevention

Phase 2
Real-World Accessibility

a11y.Radar
Ongoing Monitoring and Maintenance

Consultation & Training

Is Your Website Vulnerable to Frivolous Lawsuits?
Get a Free Web Accessibility Audit to Learn Where You Stand
Find Out Today!

Web Design & Development

Marketing

PPC Management
Google & Social Media Ads

Professional SEO
Increase Organic Search Strength

Interested in Marketing?
Speak to an Expert about marketing opportunities for your brand to cultivate support and growth online.
Contact Us

About

Blog

Contact Us

  • Is Your Restaurant Website ADA Compliant?

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

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

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

    The Rise of ADA Lawsuits Against Restaurant Websites

    What is the ADA?

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

    The ADA’s Impact of Online Interactions

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

    The Growing Trend of Lawsuits

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

    Why Are Restaurants Being Targeted for ADA Lawsuits?

    Restaurants are a prime target for several reasons:

    High Online Traffic

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

    Common Accessibility Issues

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

    Lack of Awareness

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

    Automated Tools for Testing

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

    Common Accessibility Issues on Restaurant Websites

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

    Menus That Aren’t Accessible

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

    No Keyboard Navigation

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

    Unlabeled Form Fields

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

    Color Contrast Issues

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

    Missing Alt Text for Images

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

    What Can You Do to Avoid a ADA Lawsuit?

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

    Get an Accessibility Audit

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

    Use Accessibility Tools

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

    Make Your Menus Accessible

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

    Train Your Team

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

    Work With a Developer Who Understands Accessibility

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

    Stay Informed

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

    Update Your Website Regularly

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

    Wrapping Up

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

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

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

    Greg McNeil

    September 20, 2024
    Legal Compliance
    ADA, ADA Compliance, ADA Lawsuits, digital accessibility, Restaurants, Web Accessibility

  • Web Accessibility: What to Ask Your Digital Agency

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

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

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

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

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

    The short answer? As early as possible.

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

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

    Key Web Accessibility Questions to Ask Your Digital Agency

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

    Before diving into solutions, it’s essential to assess where your website currently stands in terms of accessibility. Your digital agency should conduct an accessibility audit to identify any existing issues. Here are a few questions you can ask:

    • Do you offer an initial accessibility audit?
    • Can you provide examples of accessibility issues that have been flagged?
    • What tools or methods do you use to test for accessibility?

    A comprehensive audit should highlight potential barriers on your site, like empty headers, missing alt text for images, or lack of keyboard navigation. Starting with an audit gives you a clear picture of where improvements are needed.

    What Is Your Approach to Web Accessibility?

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

    How well do you know WCAG 2.1 guidelines?

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

    Do you integrate accessibility into every stage of development?

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

    Do you use both automated and manual testing methods?

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

    How Will You Ensure Accessibility Is Maintained?

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

    Do you offer ongoing accessibility monitoring?

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

    Can you train our team to maintain accessibility?

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

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

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

    How Do You Prioritize Web Accessibility Issues?

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

    How do you determine which issues need immediate attention?

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

    How long will it take to resolve accessibility issues?

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

    What’s Your Experience with Similar Projects?

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

    Have you worked with other companies in our industry?

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

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

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

    Prioritize Accessibility from the Start

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

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

    Contact 216digital for Your Accessibility Needs

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

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

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

    Greg McNeil

    September 19, 2024
    How-to Guides, Legal Compliance
    ADA Compliance, ADA Web Accessibility, digital accessibility, digital agency, Web Accessibility

  • Making Your Website Accessible Across All Devices

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

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

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

    Why Web Accessibility Matters

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

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

    Understanding Device-Specific Accessibility Challenges

    Web Accessibility on Desktops

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

    Web Accessibility Challenges:

    • Missing or improper use of semantic HTML.
    • Lack of focus indicators for interactive elements.
    • Insufficient contrast between the text and background colors.

    Mobile Devices

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

    Accessibility Challenges:

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

    Web Accessibility on Tablets

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

    Accessibility Challenges:

    • Orientation changes that disrupt layout.
    • Inconsistent behavior between touch and keyboard navigation.
    • Complications with zoom functionality affect users with visual impairments.

    Effective Testing Methods and Tools

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

    1. Manual Testing for Web Accessibility

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

    Tips for Manual Testing:

    • Navigate your site using only the keyboard (Tab, Enter, Arrow keys).
    • Test with various screen readers (like JAWS, NVDA, or VoiceOver).
    • Attempt to use your site on different devices and in different orientations.

    2. Automated Testing Tools

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

    Recommended Tools:

    • Lighthouse: Built into Chrome Developer Tools for performance and accessibility audits.
    • WAVE: A visual feedback tool that shows you accessibility issues directly on your site.

    3. User Testing for Web Accessibility

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

    How to Conduct User Testing:

    • Recruit participants with different abilities and device preferences.
    • Observe them as they navigate your site.
    • Collect qualitative feedback on their experience.

    Final Thoughts

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

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

    Greg McNeil

    September 18, 2024
    Legal Compliance
    ADA Compliance, digital accessibility, responsive web design, User Experience, user testing, Web Accessibility

  • How to Make Your Website’s Pop-Ups Accessible

    Pop-ups are often used on websites to capture leads, promote special offers, or guide users through certain actions. However, while they can be powerful tools for engagement, they can also be a nightmare for users, especially those with disabilities. An inaccessible pop-up can frustrate users, prevent them from completing tasks, or even drive them away from your site.

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

    Challenges of Website Pop-Ups for Accessibility

    Hard to Close or Dismiss

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

    Improperly Labeled Pop-Ups

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

    Focus Trap

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

    Disruption of Browsing Experience

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

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

    Best Practices for Accessible Pop-Ups

    Make Sure Pop-Ups Are Easy to Close

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

    Code Tip: Include a Keyboard Shortcut

    Make sure the pop-up can be dismissed using the Esc key. Adding this functionality allows keyboard users to close the pop-up quickly, without needing to navigate to a specific button.

    document.addEventListener('keydown', function(event) {
  if (event.key === "Escape") {
    closePopup();
  }
});

    In this example, the Esc key is programmed to trigger the closePopup() function, providing an easy way to dismiss the pop-up.

    Properly Label the Pop-Up for Screen Readers

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

    Code Tip: Use ARIA Attributes for Accessibility

    <div role="dialog" aria-labelledby="popupTitle" aria-describedby="popupDescription">
 <h2 id="popupTitle">Special Offer</h2>
  <p id="popupDescription">Get 20% off your next purchase when you sign up for our newsletter.</p>
</div>

    In this code, the role="dialog” attribute lets screen readers know that a pop-up window (dialog box) has appeared. The aria-labelledby and aria-describedby attributes provide titles and descriptions that help users understand what the pop-up is about.

    Prevent Focus Trapping

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

    Code Tip: Manage Focus Correctly

    When the pop-up opens, move the user’s focus to the first interactive element (like a form field or close button). When the pop-up closes, return focus to the element that triggered it, allowing users to continue where they left off.

    const popup = document.getElementById("popup");
const triggerButton = document.getElementById("triggerPopup");
triggerButton.addEventListener('click', function() {
  popup.style.display = "block";
  popup.querySelector('input').focus(); // Move focus to the first element in the popup
});
function closePopup() {
  popup.style.display = "none";
  triggerButton.focus(); // Return focus to the triggering element
}

    Avoid Disrupting the Browsing Experience

    Pop-ups should never interrupt the user’s browsing experience unexpectedly. It’s important to trigger pop-ups at the right time and make them easy to interact with.

    • Don’t use pop-ups on page load – This can be jarring for users, especially those using screen readers. Instead, trigger pop-ups based on user action, like clicking a button or scrolling to a specific section of the page.
    • Use overlays carefully – Ensure that any background overlay that appears when a pop-up opens doesn’t obscure important content or make it difficult for users to navigate.
    • Provide Accessible Text for Pop-Up Links and Buttons

    You should clearly label and make the buttons and links in your pop-up easy to understand.Avoid generic text like “Click Here” or “Submit.” Instead, use descriptive text that explains the action.

    Example:

    • Good: “Sign Up for Our Newsletter”
    • Bad: “Submit”

    This helps all users, including those using screen readers, understand exactly what will happen when they click on a button.

    Keep the Design Simple and Clear

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

    Test with Real Users and Assistive Technologies

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

    Tools for Testing Pop-Up Accessibility:

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

    Make a Pop with 216digital

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

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

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

    Greg McNeil

    September 13, 2024
    How-to Guides
    digital accessibility, How-to, pop-ups, Web Accessibility, web development

  • Web Accessibility: The Legal Risks of Ignoring It

    In recent years, web accessibility lawsuits have skyrocketed, jumping from around 2,285 cases in 2018 to over 4,605 in 2023.

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

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

    Why Web Accessibility Matters

    Accessibility is not just a legal requirement—it’s a fundamental aspect of creating an inclusive digital world. For individuals with disabilities, web accessibility means the difference between being able to fully engage with a website or facing barriers that prevent them from accessing vital information, products, or services. This includes those who may be:

    • Visually impaired (e.g., blind or low vision)
    • Deaf or hard of hearing
    • Individuals with mobility, cognitive, or neurological disabilities

    For example, a visually impaired person relies on screen readers to navigate websites, while someone with a motor impairment might depend on keyboard navigation or voice commands. Without these adaptive measures, individuals with disabilities face exclusion from participating in the digital space, which can affect their ability to work, learn, shop, or connect socially.

    Web Content Accessibility Guidelines (WCAG)

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

    ADA and Web Accessibility

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

    ADA Compliance and Legal Consequences

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

    ADA Lawsuits

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

    Case Study: Robles v. Domino’s Pizza

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

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

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

    Financial Penalties

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

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

    Case Study: Target Corporation Settlement

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

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

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

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

    Case Study: Beyoncé’s Parkwood Entertainment

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

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

    Mitigating Legal Risks: Proactive Steps for ADA Compliance

    To avoid expensive legal issues and damage to your reputation from not following web accessibility rules, businesses should act proactively. Here are some key steps to help you meet accessibility standards and protect your organization from ADA lawsuits.

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

    Get Proactive about ADA Web Accessibility

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

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

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

    Greg McNeil

    September 12, 2024
    Legal Compliance
    ADA Lawsuits, digital accessibility, Web Accessibility, web accessibility lawsuits

  • WCAG: Web Accessible Coding 101

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

    What is Web Accessibility?

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

    Why Accessible Coding is Important

    Accessible coding is crucial for a variety of reasons:

    • Wider Audience Reach: By making your site accessible, you expand your audience and enhance user experience for everyone.
    • SEO Benefits: Accessibility often overlaps with good SEO practices, boosting your website’s visibility.
    • Legal Requirements: Laws like the ADA in the U.S. require websites to be accessible, protecting you from potential legal issues.

    Now let’s dive into seven core principles of accessible coding and see how you can implement them in your website’s code.

    1.Provide Alt Text for Non-Text Components

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

    Why Alt Text is Important:

    • Screen Reader Accessibility: People with visual impairments use screen readers that read aloud the alt text. If an image lacks alt text, the user will miss out on important information.
    • SEO Benefits: Alt text improves SEO by giving search engines more information about the content of your images. Search engines can’t “see” images, but they can index alt text, helping your site rank better in image search results.

    Best Practices for Writing Alt Text:

    • Be Descriptive and Specific: Describe the content and purpose of the image. For example, instead of just saying “image of a tree,” say, “A large oak tree in a park during autumn.”
    • Keep it Concise: Alt text should typically be no longer than 125 characters. This keeps the description brief while still conveying necessary information.
    • Use Empty Alt Attributes for Decorative Images: For images that serve a purely decorative purpose (i.e., they don’t convey information or serve a functional purpose), use an empty alt attribute (alt=””). This prevents screen readers from wasting time on irrelevant content.

    Example:

    <img src="award-ceremony.jpg" alt="CEO receiving the 'Best Company Award' at the 2024 Business Awards" />

    In this example, the alt text describes the image in a way that conveys its significance. This provides context for users who cannot see the image and helps them understand its role on the page.

    For purely decorative images that don’t add meaning, you would use an empty alt attribute:

    <img src="border-decoration.png" alt="" />

    For more information about Alt text for images, check out our article Understanding Image Alt Text Descriptions.

    2. No Keyboard Traps

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

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

    How to Prevent Keyboard Traps:

    • Ensure All Interactive Elements Are Focusable: Elements like buttons, form fields, and links must be easily accessible via the keyboard’s “Tab” key.
    • Provide a Clear Way to Escape Modals: If using pop-ups or modal windows, ensure that users can exit using keyboard controls, typically the “Escape” key.

    Example:

    <a href="submit.html" id="submit-btn" tabindex="0">Submit</a>

    This code ensures that the “Submit” button can be accessed via keyboard. The tabindex="0" attribute allows it to be included in the natural tab order of the page.

    3. Allow Users to Resize Text

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

    How to Implement Text Resizing:

    • Use Relative Font Sizes: Avoid using fixed units like px for font size. Instead, use relative units such as em or percentages (%). This ensures that text can scale properly.
    • Test Text Scaling: After implementing relative font sizes, test your site by increasing text size to 200% in different browsers to ensure the content remains legible and the layout doesn’t break.

    Example:

    body {
font-size: 100%; /* Base font size that scales */
}
h1 {
    font-size: 2em; /* 200% of the body text size */
}

    In this example, the body text is set at a flexible 100%, and the headings use a relative size (2em) that will scale based on the user’s settings.

    4. Avoid Seizure Triggers

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

    How to Prevent Seizure Triggers:

    • Avoid Fast Animations: If you need animations, make sure they don’t flash rapidly or use extreme changes in brightness.
    • Limit Flashing to Below 3 Hz: Ensure that any flashing or blinking elements do not exceed three flashes per second.

    Example:

    /* Safe animation with no rapid flashing */
@keyframes safe-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.flash-warning {
    animation: safe-flash 2s infinite;
}

    This animation fades in and out at a safe pace, avoiding any rapid flashing that could trigger seizures.

    5. Follow a Logical Reading and Code Order

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

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

    How to Implement a Logical Code Order:

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

    Example:

    Here, the content is organized in a logical structure, making it easier for screen readers to understand and navigate.

      <header>
    <h1>Welcome to Our Store</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#shop">Shop</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>
    </nav>
</header>
<main>
    <section id="shop">
        <h2>Shop Our Latest Collection</h2>
        <p>Browse our new products for this season.</p>
    </section>
</main>
<footer>
    <p>&copy; 2024 Our Store</p>
</footer>

    6. Use Headings Appropriately

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

    Best Practices for Headings:

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

    • Use Headings to Structure Content: Use <h1> for the main title of the page, <h2> for section titles, and so on. Don’t skip heading levels (i.e., don’t jump from <h1> to <h3>).
    • Avoid Using Headings Solely for Styling: Headings should not be used just to make text look bigger or bolder. Use them to represent the content hierarchy.

    Example:

    <h1>Guide to Accessible Coding</h1>
<h2>Why Accessibility Matters</h2>
<h3>Legal Requirements</h3>
<h3>Improved User Experience</h3>

    In this example, the headings follow a logical order, making the content easy to navigate for users with screen readers.

    7. Use HTML Tags That Make Websites Accessible

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

    Key Accessible HTML Elements:

    • <label>: Associates a form field with a text description, making it easier for screen readers to understand.
    • <button>: Creates a clickable button that is accessible via keyboard and screen readers.
    • ARIA Attributes: These attributes, such as aria-label and aria-required, provide additional context for assistive technologies.

    Example:

    <form>
    <label for="email">Email Address:</label>
    <input type="email" id="email" name="email" aria-required="true">
</form>

    In this example, the <label> tag clearly associates the input field with its description, while the aria-required="true" attribute informs screen readers that the field is mandatory.

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

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

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

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

    Greg McNeil

    September 10, 2024
    How-to Guides
    digital accessibility, How-to, WCAG, WCAG Compliance, Web Accessibility, web development
  • Web Accessibility Overlays: Myths vs. Reality

    Web Accessibility Overlays: Myths vs. Reality

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

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

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

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

    The Truth: Overlays Can’t Fix Everything

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

    Complexity of WCAG Standards

    The WCAG guidelines cover a wide range of disabilities—visual, auditory, motor, and cognitive. Meeting these standards often requires more than what widgets can provide. For example, overlays might not solve issues such as:

    • Navigation menus that aren’t keyboard-friendly
    • Popups or modals that don’t properly capture focus
    • Logical tab order problems
    • Incorrectly labeled images, buttons, or form fields
    • Buttons made with non-interactive HTML tags

    While most of these issues are not visible to all users, these issues are significant barriers for users with disabilities. This means that while overlays might help with some parts of compliance, they can’t cover everything.

    Surface-Level Changes

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

    Dynamic Content Challenges

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

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

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

    The Truth: Overlays Aren’t Universal Fixes

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

    Different Needs for Different Sites

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

    Incompatibility Issues

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

    User Preferences

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

    Myth #3: Overlays Improve Accessibility for All Users

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

    The Truth: Overlays Can Create Barriers

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

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

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

    The Truth: Real Accessibility Requires Real Effort

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

    Genuine Accessibility Takes Effort

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

    Myth #5: Web Accessibility Overlays Decrease Legal Liability

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

    The Truth: Overlays Don’t Eliminate Legal Risks

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

    Incomplete Compliance

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

    Ongoing Legal Risk

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

    Overlays in Settlement Agreements

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

    Overlays Can Make You a Target

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

    Why Genuine Accessibility Practices Matter

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

    To truly reduce legal risk and provide a better experience for all users:

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

    Final Thoughts

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

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

    Greg McNeil

    September 9, 2024
    Legal Compliance
    digital accessibility, Overlay, Overlay widgets, Web Accessibility

  • How to Implement ARIA Landmarks and Roles for Better Accessibility

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

    What Is ARIA and Why Is It Important?

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

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

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

    ARIA Landmarks: What Are They?

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

    The major ARIA landmarks include:

    • <header>: Identifies the top section of the webpage.
    • <main>: Indicates the main content of the page.
    • <nav>: Points to the area that contains navigational links.
    • <footer>: The bottom section of the webpage.

    Why Are ARIA Landmarks Important?

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

    How to Implement ARIA Landmarks Step-by-Step

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

    Adding the Header Landmark

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

    <header>

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

    The Main Landmark

    The <main> element is crucial because it defines the primary content of the page. The <main> element, along with a skip link, can allow users of assistive technology to skip past repetitive content such as the navigation:

    <main role="main">
  <h2>Main Content</h2>
  <p>This is the most important part of the page.</p>
</main>

    By using role=”main”, you’re ensuring that screen readers can quickly identify and jump to the core content of your page. Only one main landmark should be used per page.

    Using the Navigation Landmark

    The navigation area of your website should be easy to identify and skip if necessary. You can use the <nav> element or the ARIA role, but you do not need to use both:

    <nav>
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
  </ul>
</nav>
<div role="navigation">
  <ul>
    <li><a href="/products">Products</a></li>
    <li><a href="/about">About Us</a></li>
  </ul>
</div>

    With the navigation region, you’re clearly marking the section of the page that contains links for navigating to other parts of the site.

    Adding the Footer Landmark

    Finally, the <footer> element typically contains secondary content, such as copyright information or additional links. Adding a landmark here helps screen reader users know when they’ve reached the end of the page:

    <footer role="contentinfo">
  <p>&copy; 2024 Your Company</p>
</footer>

    In this case, role= "contentinfo" tells screen readers that this section provides supplementary information about the website.

    ARIA Roles: What Are They?

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

    Some commonly used ARIA roles include:

    • “button”: Makes non-biased elements like <div> behave like a button.
    • “dialog”: Defines a pop-up dialog window.
    • “alert”: Marks an element as an important alert that needs immediate attention.

    Why Are ARIA Roles Important?

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

    How to Implement ARIA Roles Step-by-Step

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

    Creating a Custom Button

    If you have a custom button element (like a <div> styled as a button), you can add the role="button" to make sure it’s recognized as an interactive button by screen readers:

    <div role="button" tabindex="0" onclick="submitForm()">Submit</div>

    The ARIA role “button” tells assistive technology to announce this element as a button, and the “tabindex” attribute makes the element focusable via the keyboard. However, it’s always best to use the correct semantic HTML5 <button> tag whenever possible.

    Adding a Dialog Role

    For models or pop-up windows, you can use the role= "dialog" to make them accessible:

    <div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDescription">
  <h2 id="dialogTitle">Confirmation</h2>
  <p id="dialogDescription">Are you sure you want to delete this file?</p>
  <button onclick="closeDialog()">Cancel</button>
</div>

    The aria-labelledby and aria-describedby attributes help give context to the dialog box for users relying on assistive technologies.

    Creating an Alert

    If you need to display important, time-sensitive information—like an error message or form feedback—you can use the role= "alert":

    <div role="alert">
  <p>Error: The "password" field is required.</p>
</div>

    This role makes sure that screen readers announce the alert immediately, ensuring the user doesn’t miss critical information.

    Going Beyond ARIA: Continue Your Accessibility Journey

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

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

    Team Up with 216digital

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

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

    Bobby

    September 6, 2024
    How-to Guides
    Accessibility, ADA Compliance, ARIA, How-to, WCAG, Web Accessibility, web development
  • How to Make Your Blog Accessible to All Readers

    How to Make Your Blog Accessible to All Readers

    Creating a blog that’s accessible to everyone isn’t just good for your readers—it’s also a win for your website’s success. When we talk about web accessibility, we mean making sure that people of all abilities can access and understand your content. This includes individuals with disabilities who may use assistive technologies like screen readers. And there’s an added bonus: making your blog accessible can also improve your SEO (Search Engine Optimization), boosting your site’s visibility in search engines.

    In this guide, we’ll explore several steps to ensure your blog is accessible to everyone, with a focus on improving usability and optimizing it for search engines. Whether you’re a website owner, developer, or content creator, these practical tips will help you reach a wider audience and provide a better experience for all users.

    How Accessible Content Helps SEO

    Let’s start with the big question: How does making your blog accessible help with SEO? Search engines, like Google, favor websites that provide a better user experience, and accessibility plays a big role in this.

    When your blog is accessible, it’s easier for search engines to understand the content. Things like descriptive image alt text, structured headings, and meaningful links all give search engines more information about what’s on your page. This helps your content rank higher in search results. And since more people (including those with disabilities) can interact with your site, you’ll have a broader audience—another positive signal for SEO.

    By making your blog accessible, you’ll not only help people who rely on assistive technology, but you’ll also make your content easier to find for everyone. It’s a win-win!

    Use Headings to Convey Meaning and Structure

    One of the easiest ways to make your blog more accessible is by using headings properly. Headings help break up your content and make it easier to follow. But they’re more than just big, bold text—they’re essential for screen readers to understand the structure of a page (per WCAG 1.3.1).

    When you use headings (H1, H2, H3, etc.), you’re telling both readers and search engines what’s important on the page. Your main title should be an H1, and any subtopics should be in descending order of importance using H2s and H3s. For example, in this article, “Use Headings to Convey Meaning and Structure” is an H2 because it’s a main section, while smaller points could be H3s.

    Headings allow users to skim your blog and quickly find the information they’re looking for. This is especially helpful for readers using assistive technology, as screen readers rely on heading tags to navigate a webpage.

    Keep Content Clear and Concise

    Nobody likes wading through long, complicated paragraphs. Most people scan online content rather than reading it word-for-word. That’s why it’s important to keep your writing clear, concise, and easy to digest (per WCAG 3.1.5).

    Simple, straightforward language isn’t just good for accessibility—it’s good for your readers in general. If someone lands on your blog and can quickly understand the point you’re making, they’re more likely to stick around.

    This is especially true for people with cognitive disabilities who may have difficulty processing complex information. Break up your text into short paragraphs, use bullet points or numbered lists where appropriate, and avoid using jargon unless absolutely necessary.

    Remember: the clearer your content, the more accessible it is to everyone.

    Describe Your Images

    Images add visual interest to your blog posts, but they can create barriers if not handled properly. For people who are blind or have low vision, images need to be described in a way that makes sense with the content (per WCAG 1.1.1).

    That’s where alt text comes in. Alt text is a short description of an image that is read aloud by screen readers. It should be clear and concise, describing the image’s purpose in the context of your blog post. For example, if you have a picture of a dog in a blog about pet care, your alt text might say “Golden retriever lying on grass” rather than just “dog.”

    Good alt text is essential for both accessibility and SEO. Search engines can’t “see” images, but they can read alt text. By describing your images accurately, you’re helping both users and search engines understand your content better.

    Make Link Text Meaningful

    “Click here” is a common phrase you’ll see in blogs, but it’s not very helpful for accessibility or SEO. Instead, make your link text descriptive and relevant to the page it’s pointing to (per WCAG 2.4.4).

    For instance, instead of writing “Click here for more information,” you could write “Learn more about web accessibility.” This is more meaningful for readers and screen readers alike because it gives them an idea of what they’ll find when they click the link.

    Meaningful link text also helps with SEO because it gives search engines more context about the linked content. It’s another small tweak that can make a big difference in accessibility and search visibility.

    Check the Comment Form—Is It Labeled Properly?

    If you allow comments on your blog, it’s important to make sure your comment form is accessible. Many standard comment forms aren’t labeled properly, which can be a problem for people using screen readers (per WCAG 1.3.1).

    Check that each field (like “Name,” “Email,” and “Comment”) has a label that screen readers can read aloud. This will make it easier for everyone to interact with your blog, and it shows that you care about your entire audience’s experience.

    If you’re using a popular blogging platform like WordPress, there are plugins that can help ensure your forms are accessible. But it’s always a good idea to double-check that everything is labeled correctly.

    Use Flexible Font Sizes

    Another way to make your blog accessible is by using flexible font sizes. Not everyone has perfect vision, and some users may need to increase the font size to read your content comfortably (per WCAG 1.4.4).

    Make sure your blog’s text can be resized without breaking the layout or making the page hard to navigate. You can do this by using relative units like “em” or percentages instead of fixed pixel sizes. This way, readers can adjust the font size according to their preferences.

    In addition, choose fonts that are easy to read. Avoid overly decorative fonts and make sure there’s enough contrast between your text and background.

    Put Your Blogroll on the Right-Hand Side

    Placing your blogroll or navigation bar on the right-hand side of the page can improve accessibility. Many users with screen readers or keyboard navigation tools scan content from left to right. By placing the most important content (your actual blog post) on the left side and your blogroll or other navigation elements on the right, you make it easier for people to access what they came for (per WCAG 2.4.3).

    It’s a small change, but it can significantly enhance the usability of your blog for people using assistive technology.

    Conclusion

    Making your blog accessible isn’t just about being inclusive—it also helps with SEO and makes your site easier to use. By using clear headings, adding alt text to images, writing simply, and making sure your site is easy to navigate, you’ll make your blog better for everyone.

    Accessibility can be simple. With a few easy updates, you can make your blog a welcoming place for everyone, including people with disabilities. Not only will this improve your SEO and grow your audience, but it will also make your site more user-friendly.

    If you’re unsure where to start or want to make sure you’re on the right track, schedule an ADA briefing with 216digital. We’re here to help you make your blog accessible and successful!

    Greg McNeil

    September 5, 2024
    How-to Guides
    Content Writing, digital accessibility, How-to, SEO, Web Accessibility
  • What to Ask When Choosing a Partner for Title II ADA Compliance

    What to Ask When Choosing a Partner for Title II ADA Compliance

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

    Have You Worked with ADA Title III Compliance Before?

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

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

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

    How Skilled is Your Team in Accessibility?

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

    What is Your Process for Conducting Accessibility Audits?

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

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

    How Do You Prioritize and Address Accessibility Issues?

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

    What Testing Methods Do You Use?

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

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

    How Will You Help Us Maintain Accessibility Over Time?

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

    What Technology and Tools Do You Use for Accessibility?

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

    Do You Offer Training?

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

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

    Conclusion

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

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

    Kayla Laganiere

    September 4, 2024
    Testing & Remediation
    ADA Compliance, ADA Website Compliance, digital accessibility, Title II, Web Accessibility
Previous Page
1 2 3 4 5 6
Next Page
216digital Scanning Tool

Audit Your Website for Free

Find Out if Your Website is WCAG & ADA Compliant













    216digital Logo

    Our team is full of expert professionals in Web Accessibility Remediation, eCommerce Design & Development, and Marketing – ready to help you reach your goals and thrive in a competitive marketplace. 

    216 Digital, Inc. BBB Business Review

    Get in Touch

    2208 E Enterprise Pkwy
    Twinsburg, OH 44087
    216.505.4400
    info@216digital.com

    Support

    Support Desk
    Acceptable Use Policy
    Accessibility Policy
    Privacy Policy

    Web Accessibility

    Settlement & Risk Mitigation
    WCAG 2.1/2.2 AA Compliance
    Monitoring Service by a11y.Radar

    Development & Marketing

    eCommerce Development
    PPC Marketing
    Professional SEO

    About

    About Us
    Contact

    Copyright 2024 216digital. All Rights Reserved.