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

  • Making Your Website Accessible Across All Devices

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

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

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

    Why Web Accessibility Matters

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

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

    Understanding Device-Specific Accessibility Challenges

    Web Accessibility on Desktops

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

    Web Accessibility Challenges:

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

    Mobile Devices

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

    Accessibility Challenges:

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

    Web Accessibility on Tablets

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

    Accessibility Challenges:

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

    Effective Testing Methods and Tools

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

    1. Manual Testing for Web Accessibility

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

    Tips for Manual Testing:

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

    2. Automated Testing Tools

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

    Recommended Tools:

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

    3. User Testing for Web Accessibility

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

    How to Conduct User Testing:

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

    Final Thoughts

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

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

    Greg McNeil

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

  • Are Web Accessibility Overlays Hurting Users?

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

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

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

    What Are Web Accessibility Overlays?

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

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

    Overlay’s Intended Purpose

    The goal of web accessibility overlays is to make websites more accessible to people with disabilities. For instance:

    • Visual Impairments: Users who have difficulty seeing might benefit from high-contrast modes or text enlargement.
    • Motor Impairments: Customizable interface elements can help users navigate the site using alternative input methods.
    • Cognitive Impairments: Simplified navigation and text-to-speech features can make content more understandable.

    In theory, these overlays should help users interact with a website more effectively by allowing them to tailor the site to their needs.

    The Reality: Why Overlays Often Fall Short

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

    Broken Functionality

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

    Limited Customization

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

    Disruptive Presence

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

    Overlay’s Provide a False Sense of Security

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

    Common Issues with Overlays

    To better understand the real-world impact, let’s explore some common issues faced by users with disabilities when dealing with web accessibility overlays:

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

    Firsthand User Experiences

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

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

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

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

    Why Overlays Are Seen as a “Quick Fix”

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

    However, this approach is problematic for several reasons:

    Superficial Solutions

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

    Potential for Increased Barriers

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

    Legal and Ethical Concerns

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

    The Path to Genuine Accessibility

    So, what should you do instead of relying on overlays? Here are some steps to take:

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

    Take the Next Step Towards Accessibility

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

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

    Kayla Laganiere

    September 17, 2024
    Legal Compliance
    ADA Compliance, Overlay widgets, Overlays, screen overlays, Users experience, Widgets

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

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

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

    Challenges of Website Pop-Ups for Accessibility

    Hard to Close or Dismiss

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

    Improperly Labeled Pop-Ups

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

    Focus Trap

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

    Disruption of Browsing Experience

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

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

    Best Practices for Accessible Pop-Ups

    Make Sure Pop-Ups Are Easy to Close

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

    Code Tip: Include a Keyboard Shortcut

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

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

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

    Properly Label the Pop-Up for Screen Readers

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

    Code Tip: Use ARIA Attributes for Accessibility

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

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

    Prevent Focus Trapping

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

    Code Tip: Manage Focus Correctly

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

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

    Avoid Disrupting the Browsing Experience

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

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

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

    Example:

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

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

    Keep the Design Simple and Clear

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

    Test with Real Users and Assistive Technologies

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

    Tools for Testing Pop-Up Accessibility:

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

    Make a Pop with 216digital

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

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

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

    Greg McNeil

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

  • Web Accessibility: The Legal Risks of Ignoring It

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

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

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

    Why Web Accessibility Matters

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

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

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

    Web Content Accessibility Guidelines (WCAG)

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

    ADA and Web Accessibility

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

    ADA Compliance and Legal Consequences

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

    ADA Lawsuits

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

    Case Study: Robles v. Domino’s Pizza

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

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

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

    Financial Penalties

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

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

    Case Study: Target Corporation Settlement

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

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

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

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

    Case Study: Beyoncé’s Parkwood Entertainment

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

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

    Mitigating Legal Risks: Proactive Steps for ADA Compliance

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

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

    Get Proactive about ADA Web Accessibility

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

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

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

    Greg McNeil

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

  • WCAG: Web Accessible Coding 101

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

    What is Web Accessibility?

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

    Why Accessible Coding is Important

    Accessible coding is crucial for a variety of reasons:

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

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

    1.Provide Alt Text for Non-Text Components

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

    Why Alt Text is Important:

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

    Best Practices for Writing Alt Text:

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

    Example:

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

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

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

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

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

    2. No Keyboard Traps

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

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

    How to Prevent Keyboard Traps:

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

    Example:

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

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

    3. Allow Users to Resize Text

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

    How to Implement Text Resizing:

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

    Example:

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

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

    4. Avoid Seizure Triggers

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

    How to Prevent Seizure Triggers:

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

    Example:

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

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

    5. Follow a Logical Reading and Code Order

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

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

    How to Implement a Logical Code Order:

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

    Example:

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

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

    6. Use Headings Appropriately

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

    Best Practices for Headings:

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

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

    Example:

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

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

    7. Use HTML Tags That Make Websites Accessible

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

    Key Accessible HTML Elements:

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

    Example:

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

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

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

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

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

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

    Greg McNeil

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

    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
  • The Legal Pitfalls of Web Accessibility Overlays

    The Legal Pitfalls of Web Accessibility Overlays

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

    What Are Web Accessibility Overlays?

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

    The Legal Landscape: Recent Lawsuits and Challenges

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

    Case Study: Tribeca Skin Care vs. accessiBe

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

    Problems and Risks with Overlays

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

    Copycat Lawsuits: A Growing Threat

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

    Exploitation of Overlay Data

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

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

    Why Overlays Aren’t a Solution

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

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

    What Can Business Owners Do Instead?

    Given the risks associated with overlays, what should business owners do instead to ensure their websites are accessible? The answer lies in taking a proactive and comprehensive approach to web accessibility. Here are some steps to consider:

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

    Overlays Are Not a Shortcut

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

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

    Team Up with 216digital

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

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

    Greg McNeil

    September 3, 2024
    Legal Compliance
    ADA Compliance, digital accessibility, Overlay, Overlay widgets, Web Accessibility
Previous Page
1 … 14 15 16 17 18 … 31
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.