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 Website ADA-Compliant?

    Ever wonder if your website is truly welcoming to all visitors? It’s easy to think, “My site looks great. It works smoothly—why worry?” But here’s the catch: a good-looking, functional site isn’t always an accessible one. And if your website isn’t ADA compliant, you could be unintentionally shutting the door on a massive group of potential visitors and customers—people with disabilities.

    Let’s put it this way: imagine if a brick-and-mortar store had narrow, cluttered aisles or no ramps. Customers with mobility challenges would struggle to get in or move around. Now, think of your website as that store. If it isn’t built with accessibility in mind, visitors with disabilities may find it impossible to navigate, use, or even understand what you’re offering.

    So, is your website ADA-compliant? If you’re not sure or have never checked, this guide is for you. We’ll break down what ADA compliance means, why it matters, the standards to follow, and how you can ensure your site is welcoming to all. Ready to see if your online space meets the mark? Let’s dive in.

    Why ADA Compliance Matters

    Making sure your website is ADA-compliant isn’t just a box to check off—it’s a vital part of running a business that’s inclusive and future-proof. An accessible website means everyone, regardless of ability, can navigate, engage with, and enjoy your content. This approach not only helps build trust and loyalty but can also increase your audience and improve user satisfaction. And let’s not forget, it comes with important legal and business benefits.

    Legal Implications

    The Americans with Disabilities Act (ADA) requires that businesses—including their websites—be accessible to everyone. If your site isn’t ADA-compliant, you could be in for a rough ride. The number of ADA-related lawsuits has been rising fast. In 2023, for instance, over 4,500 web accessibility lawsuits were filed in the U.S., which was a 15% increase from the year before, according to UsableNet.

    Courts have been clear that digital spaces are covered by the ADA, even though it was created before the internet as we know it existed. And it’s not just big businesses being targeted—small and medium-sized businesses have also found themselves in legal hot water over inaccessible sites. Legal fees, settlements, and potential damage to your reputation can add up quickly, costing far more than making your website compliant in the first place. By focusing on accessibility, you’re not just protecting your business; you’re showing that inclusivity is a priority.

    Expanding Your Audience

    Making your site ADA-compliant isn’t just about sidestepping legal issues—it’s also about reaching more people.  The World Health Organization (WHO) reports that over 1 billion people globally live with some form of disability. In the U.S., the Centers for Disease Control and Prevention (CDC) says that 26% of adults have some kind of disability. This includes a wide range of challenges, from visual and hearing impairments to mobility and cognitive issues.

    Think about it: if your website is easier to use for people with disabilities, you’re opening your doors to a vast number of potential customers who might have otherwise struggled with your site. In fact, a study in the U.K. found that 71% of users with disabilities will leave a site that’s hard to use, and 82% of them are willing to spend more on a site that’s accessible. That’s a lot of potential revenue and customer loyalty that can be yours just by making your site more inclusive.

    Understanding Web Accessibility Standards

    To create an accessible website, it’s essential to understand key standards, particularly the Web Content Accessibility Guidelines (WCAG). These guidelines, developed by the World Wide Web Consortium (W3C), provide a roadmap for making web content more accessible to people with disabilities.

    Key Principles of WCAG

    The WCAG outlines four fundamental principles, often remembered by the acronym POUR:

    1. Perceivable: Information must be presented in ways that users can perceive. This means providing text alternatives for images, using captions for videos, and ensuring sufficient contrast between text and background colors.
    2. Operable: Users should be able to navigate the site using various methods. This includes keyboard navigation and the ability to pause or stop animations.
    3. Understandable: Content and navigation must be easy to understand. This includes using clear language, consistent navigation, and proper labeling of forms.
    4. Robust: Content should be compatible with various technologies, including assistive technologies like screen readers. This means writing clean, semantic HTML.

    By adhering to these principles, you’ll be well on your way to creating a more accessible website.

    Common Barriers to Web Accessibility

    Even with the best intentions, many websites still have barriers that prevent people with disabilities from accessing their content. Here are a few common issues:

    Images Without Alt Text

    Images can be a significant barrier if they don’t have descriptive alt text. Alt text is essential for users who rely on screen readers, as it provides context about the image.

    Poor Color Contrast

    If the contrast between your text and background is too low, it can be challenging for individuals with visual impairments to read your content. Aim for a contrast ratio of at least 4.5:1 for normal text.

    Inaccessible Forms

    Forms are often problematic. If they lack labels or instructions, users with disabilities may find it challenging to fill them out. Always ensure that forms are correctly labeled and provide clear instructions.

    Lack of Keyboard Navigation

    Many users with disabilities rely on keyboard navigation rather than a mouse. If your website doesn’t support this, it can create significant barriers.

    Testing Your Website for Accessibility

    Now that you understand the importance of ADA compliance and common barriers, how do you ensure your website is accessible? Here are some methods for testing your site:

    Manual Checks

    Begin with manual checks of your website. Go through your site using only the keyboard. Can you navigate easily? Test your forms to see if they’re usable without a mouse. This basic level of testing can reveal a lot about your site’s accessibility.

    Automated Tools

    Automated accessibility testing tools can help identify many common issues quickly. Here are a few popular options:

    • WAVE: This browser extension evaluates accessibility and highlights issues on your page.
    • Lighthouse: Built into Chrome’s developer tools, Lighthouse provides audits of various web aspects, including accessibility.

    While these tools are helpful, they don’t catch everything. They should be used in conjunction with manual checks to ensure a truly ADA-compliant website.

    User Testing with Assistive Technologies

    The best way to understand how ADA-compliant your site truly is is to test it with real users who have disabilities.

    • Screen Readers: Ask users to navigate your site using popular screen readers like JAWS or NVDA.
    • Keyboard Navigation: Observe how users interact with your site using only a keyboard.

    Getting feedback from users with disabilities will give you insights that automated tools might miss.

    Practical Steps to Improve Accessibility

    Once you’ve identified accessibility issues on your site, what should you do next? Here are some practical steps you can take:

    • Start with an Accessibility Audit: Before making any changes, conduct a comprehensive audit of your website. Use both automated tools and manual checks to identify barriers.
    • Prioritize Quick Wins: Addressing some accessibility issues can take time, but there are many “quick wins” you can tackle right away.
    • Implement Staff Training and Awareness: Accessibility is not just a one-person job. Ensure your content creators, developers, and designers are trained on best practices for maintaining and improving web accessibility.
    • Monitor Accessibility Consistently: Regular audits are essential, but ongoing monitoring ensures that new updates don’t introduce issues. Services like 216digital’s a11y.Radar can help by continuously checking for compliance and alerting you to new challenges.

    Conclusion

    Making sure your website is ADA-compliant is more than just checking a legal box—it’s about creating a space where everyone feels welcome. Prioritizing accessibility can open your business to a wider audience, boost user satisfaction, and even shield you from potential legal issues. But let’s be honest: navigating the ins and outs of accessibility can feel overwhelming.

    That’s where we come in. At 216digital, we’re here to make it simple. Schedule an ADA briefing with us to find out if your website is at risk and how we can help make it more inclusive. Don’t wait until there’s a problem; get ahead of it and show your commitment to accessibility today. Your future customers (and your peace of mind) will thank you!

    Greg McNeil

    October 30, 2024
    Legal Compliance
    Accessibility testing, ADA Compliance, ADA Lawsuit, WCAG, Web Accessibility

  • ADA Lawsuits: How They’re Shaping the Internet

    The Internet is an essential part of daily life. We shop, work, learn, and even socialize online. But for millions of people with disabilities, the digital world can feel like a locked door. That’s where the Americans with Disabilities Act (ADA) steps in. Originally designed to ensure access to physical spaces, the ADA is now playing a significant role in making sure the digital world is accessible to everyone.

    Let’s dive into how ADA lawsuits are shaping the future of the Internet and why this movement towards web accessibility matters for all of us.

    Why Web Accessibility Matters

    Imagine trying to buy groceries online, book a doctor’s appointment, or read the news—but being unable to do so because the website isn’t accessible. This is the reality for many people with disabilities. Web accessibility aims to remove these barriers, making sure websites are usable by all, whether someone is blind, deaf, has limited mobility, or faces cognitive challenges.

    It’s not just about compliance; it’s about creating a better experience for everyone. When websites are more accessible, they’re also more user-friendly. For example, features like closed captions help users with hearing impairments, but they’re also useful for anyone in a noisy environment.

    How the ADA Applies to the Digital World

    The ADA, passed in 1990, is a law meant to prevent discrimination against people with disabilities. While it initially focused on physical locations, it’s evolved to include digital spaces like websites, mobile apps, and online services.

    Title III of the ADA requires “places of public accommodation” to be accessible. While that originally meant places like stores and restaurants, the DOJ published guidance in 2022 confirming its position that the ADA does apply to websites, stating:

    “…the Department has consistently taken the position that the ADA’s requirements apply to all the goods, services, privileges, or activities offered by public accommodations, including those offered on the web.”

    – U.S. Department of Justice | Guidance on Web Accessibility and the ADA (2022)

    This shift is significant because it brings the same standards of accessibility that apply to physical spaces into the digital realm. If a website isn’t accessible, it could violate the ADA—leading to legal action.

    Key Lawsuits Driving Change

    Several high-profile lawsuits have set important legal precedents for web accessibility, encouraging businesses to prioritize digital inclusivity. Here are some of the most significant cases that have reshaped the digital landscape:

    Robles v. Domino’s Pizza (2019)

    In 2016, Guillermo Robles, a blind man, sued Domino’s Pizza because he couldn’t use their website or mobile app to order food. Robles relied on screen-reading software, but Domino’s website and app were not compatible with it, making the services inaccessible.

    The case went through multiple courts, with Domino’s arguing that the ADA did not clearly apply to websites. However, the Ninth Circuit Court of Appeals disagreed, stating that the ADA does cover websites and apps if they are closely tied to a physical location that serves the public. The U.S.

    Supreme Court declined to review the case, effectively affirming the lower court’s ruling. This landmark case established a strong precedent that digital services must be accessible, especially if they’re an extension of a physical business.

    Winn-Dixie Stores Inc. v. Gil (2017)

    In 2016, Juan Carlos Gil, a blind man who uses screen-reading software, attempted to access the website of the grocery chain Winn-Dixie but found it was incompatible with his software. Unlike Robles v. Domino’s, Winn-Dixie had no functional website components for users to complete transactions online; however, the website did allow users to refill prescriptions, access coupons, and find store locations—services that were considered extensions of its physical stores.

    The federal court sided with Gil, ruling that the website’s connection to the physical stores meant it had to comply with ADA requirements. Although the Eleventh Circuit later reversed this decision, arguing that websites themselves are not necessarily “places of public accommodation,” this case still sparked important conversations about digital accessibility. It highlighted that when a website is integral to a business’s services, it must meet accessibility standards.

    Bashin v. ReserveCalifornia.com (2023)

    Bryan Bashin, a blind user, filed a lawsuit against ReserveCalifornia.com, a state-run site responsible for booking campsites in California’s state parks. Bashin faced numerous challenges while using the website, including unlabelled buttons and forms that his screen reader couldn’t interpret. What made this case unique was that Bashin targeted not just the website itself, but also the state contractor responsible for the website’s development and maintenance.

    This lawsuit emphasized the importance of holding government contractors accountable for digital accessibility, setting a new precedent. The court ruled in favor of Bashin, making it clear that not only are government-run websites subject to ADA compliance, but so are third-party developers who manage public websites. This ruling added new pressure on contractors and developers to implement accessibility features from the start, ensuring that websites are built with inclusivity in mind.

    Evolving Legal Requirements for Web Accessibility

    As the number of ADA lawsuits grows, so do the legal requirements for web accessibility. While there’s no one-size-fits-all standard, the Web Content Accessibility Guidelines (WCAG) have become the go-to benchmark. These guidelines are designed to make websites more usable for people with disabilities and cover areas like:

    • Text Alternatives: Providing descriptive text for images, videos, and other non-text content.
    • Keyboard Accessibility: Ensuring users can navigate sites using only a keyboard.
    • Readable Fonts and Color Contrast: Make sure fonts are easy to read, and colors are distinguishable for people with vision impairments.
    • Video Captions and Transcripts: Offering captions for videos and transcripts for audio content.

    By aligning your website with these guidelines, you reduce the risk of legal challenges and create a better user experience for everyone.

    How Businesses Are Adapting

    As the legal landscape shifts, many businesses are taking proactive steps to ensure their websites comply with accessibility standards. Here are a few strategies they are employing:

    Investing in Training and Resources

    Many companies are now training their web development teams on accessibility standards. By understanding the principles of web accessibility, teams can create more inclusive websites from the ground up.

    Conducting Accessibility Audits

    Regular audits of websites can identify areas needing improvement. Companies are increasingly employing tools and experts to evaluate their sites against WCAG standards. This helps pinpoint issues like missing alt text or improper heading structures.

    Integrating Accessibility Features from the Start

    More businesses are making accessibility a priority during the design phase. This includes adding features such as keyboard navigation and ensuring that content is structured in an accessible way. By embedding these practices from the beginning, companies can avoid costly retrofits down the line.

    Engaging with the Community

    Some businesses are partnering with organizations that advocate for individuals with disabilities. By seeking feedback from actual users, they can better understand accessibility challenges and improve their websites accordingly. This not only leads to a better product but also fosters goodwill and loyalty among customers.

    Long-Term Implications for the Future of the Internet

    The growing emphasis on web accessibility has several long-term implications for the future of the Internet:

    Increased Awareness of Inclusivity

    As more companies recognize the importance of web accessibility, we will likely see a cultural shift in how businesses approach design and user experience. Prioritizing inclusivity can attract a broader audience and create loyal customers.

    Legal Precedents Will Shape Standards

    As more ADA lawsuits are filed, legal precedents will increasingly dictate what is considered acceptable in terms of web accessibility. Businesses will need to stay informed about these developments to avoid potential legal pitfalls.

    Technological Advancements

    The demand for accessible web design will likely spur innovation in technology and tools. We can expect new solutions that simplify the process of making websites accessible, from AI-driven accessibility checkers to improved assistive technologies.

    A Culture of Accessibility

    As web accessibility becomes a norm, future designers and developers will likely prioritize inclusivity from the outset. This could lead to a more inclusive internet overall, where all users can engage equally.

    Conclusion

    Web accessibility is reshaping the digital landscape, and it’s clear that the ADA’s influence is paving the way for a more inclusive internet. While compliance with these evolving standards may seem daunting, it’s ultimately about creating a digital environment where everyone can navigate and engage with ease. By enhancing accessibility, you’re not just adhering to legal requirements—you’re fostering a more user-friendly experience for all.

    Instead of seeing accessibility as a burden, consider it an opportunity to make your website more welcoming and effective. It’s a chance to lead by example and demonstrate your commitment to inclusivity. If you’re curious about where your website stands, scheduling an ADA briefing with 216digital can be a great first step. Let’s shift the focus from obligation to opportunity, one accessible website at a time.

    Greg McNeil

    October 22, 2024
    Legal Compliance, The Benefits of Web Accessibility
    ADA, ADA Compliance, ADA Lawsuit, Web Accessibility

  • How Semantic HTML Improves Your Accessibility & SEO

    When creating a website, it’s easy to get caught up in how it looks and how it functions. But have you ever paused to think about how your website is structured behind the scenes? If you’re simply filling your code with <div> and <span> tags, you might be missing an opportunity to make your site better—not just for search engines, but for users, too.

    Semantic HTML is more than just good coding practice; it’s a way to make your website more accessible and easier for search engines to understand. This isn’t just about technicalities—it’s about creating a smoother, more meaningful experience for your visitors. Whether you’re a seasoned developer or just starting out, understanding and implementing semantic HTML can make a real difference in how people interact with your site, especially those using assistive technologies.

    In this article, we’ll explore what semantic HTML is, why it matters, and how it can improve both accessibility and SEO. We’ll also touch on practical tips, common mistakes to avoid, and how semantic HTML aligns with Web Content Accessibility Guidelines (WCAG) to make your site more inclusive.

    What is Semantic HTML?

    Let’s start with the basics. Semantic HTML refers to using HTML tags that have a specific meaning or role within the webpage. These elements are not just for visual structure; they provide information about the type of content within them, helping browsers and assistive technologies (like screen readers) better understand your webpage’s layout and content.

    Here are some common semantic HTML tags:

    • <header>: Represents the introductory content, often containing the website’s logo or navigation links.
    • <nav>: Defines a set of navigation links that help users explore your site.
    • <article>: Used for standalone content that could be reused or distributed, such as blog posts.
    • <section>: Groups related content together thematically, often with its own heading.

    By contrast, non-semantic elements like <div> and <span> don’t convey any meaning other than being containers. While they still have their place, relying solely on them can make your website harder to navigate for both users and search engines.

    Why Semantic HTML is Critical for Accessibility

    When we talk about accessibility, we’re referring to making sure that your website can be used by everyone, including people with disabilities. Many users rely on assistive technologies like screen readers, which read the content of a webpage out loud. Screen readers depend on the proper use of semantic HTML to interpret the structure of a page.

    For example, a screen reader can easily understand what a <header> or <nav> tag is, allowing users to navigate your website more efficiently. If you use a <div> for everything, the screen reader has no idea whether it’s a section of text, a navigation menu, or a footer. This makes the browsing experience confusing and frustrating for users with disabilities.

    Helping Screen Readers Navigate Your Website

    One of the primary ways semantic HTML improves accessibility is by helping screen readers announce different sections of your website. For example, if you have a blog post wrapped in an <article> tag, the screen reader can announce to the user that they’re about to read an article.

    Let’s compare:

    Non-Semantic Example:

    <div class="blog-post">My First Blog Post</div>

    Semantic Example:

    <article>My First Blog Post</article>

    The second example clearly defines that the content is an article. Assistive technologies will pick up on this and offer better navigation and context for the user.

    Structured Navigation for All Users

    Another advantage of using semantic HTML is structured navigation. Tags like <nav>, <header>, and <footer> help screen readers understand the hierarchy of the page. When users rely on a screen reader to navigate, they can quickly jump to important sections like the navigation bar or the main content by skipping through these well-defined landmarks.

    Imagine navigating a website by ear, trying to figure out where the navigation menu ends and where the main content begins—without semantic HTML, it’s a guessing game.

    How Semantic HTML Improves SEO

    The benefits of semantic HTML don’t stop at accessibility—it also plays a key role in your site’s search engine optimization (SEO). Google and other search engines rely on web crawlers to analyze your site, and these crawlers can better understand the context and structure of your content when you use semantic HTML.

    Better Crawling and Indexing

    Search engines are smart, but they can’t interpret your content as humans do. Using semantic HTML helps them figure out what each part of your page represents. For instance, wrapping your blog posts in <article> tags signals to search engines that this content is an article, making it easier for them to understand and categorize.

    This is how semantic HTML can help with SEO:

    • Improved Indexing: Using proper semantic tags can lead to better indexing, as search engines can more easily understand the structure of your content.
    • Rich Snippets: Semantic HTML can improve the likelihood of your site showing up with rich snippets in search results, such as a featured article or recipe, depending on the content.
    • Enhanced SEO Ranking: Google prioritizes websites that offer a good user experience. Since semantic HTML improves navigation for all users, including those using assistive technologies, your site is more likely to be seen as user-friendly, boosting your SEO.

    Best Practices for Using Semantic HTML

    Ready to start using semantic HTML? Here are some best practices to keep in mind:

    Use the Right Tag for the Right Purpose

    Each semantic HTML tag has a specific use, and you should apply them where they belong. For example:

    • Use <header> for the top section of your page that contains headings or introductory content.
    • Use <nav> for navigation links, not just random lists of links.
    • Use <article> for blog posts or other standalone content.
    • Use <section> to group related content, and <footer> for the bottom of your page.

    Avoid Overusing <div> and <span>

    While <div> and <span> are useful for general-purpose containers, overusing them can result in a loss of meaning in your page structure. Whenever possible, replace them with more descriptive elements like <section>, <aside>, or <figure>.

    Combine Semantic HTML with ARIA Roles

    In some cases, ARIA (Accessible Rich Internet Applications) roles can complement semantic HTML by providing additional context. For example, adding role="navigation" to a <nav> element makes it even clearer that the content is meant for navigation. Just be careful not to rely on ARIA roles as a substitute for semantic HTML—they should be used to enhance, not replace.

    Align with WCAG Guidelines

    WCAG offer clear recommendations on how to make your content accessible. One of their core principles is ensuring that content is perceivable and navigable by assistive technologies, which is where semantic HTML shines.

    • WCAG 1.3.1 (Info and Relationships): This guideline emphasizes the importance of using semantic elements so that content can be understood by assistive technologies.
    • WCAG 2.4.1 (Bypass Blocks): Using semantic HTML makes it easier for users with disabilities to bypass repetitive content and jump straight to the main sections, such as navigation menus or headers.

    Common Mistakes to Avoid

    While semantic HTML is straightforward, there are a few common mistakes that developers often make. Avoid these pitfalls to ensure your content is both accessible and SEO-friendly:

    • Overuse of <div> and <span>: These tags should be used sparingly and only when no other semantic element fits. Overloading your page with <div> tags makes it hard for search engines and screen readers to understand your content.
    • Forgetting to Add Alt Text: While it’s not directly related to semantic HTML, always remember to add alt attributes to your images. This ensures that screen readers can describe your images to visually impaired users, further enhancing accessibility.
    • Misusing ARIA: ARIA attributes are great when used correctly, but they should only be applied when there’s no semantic HTML option available. Overusing or misapplying ARIA can lead to confusion and even reduce accessibility.

    Examples of Effective and Ineffective Link Text

    Semantic HTML also plays a role in creating meaningful link text, which is crucial for both accessibility and SEO. Here are some examples:

    Ineffective Link Text

    <a href="https://example.com">Click here</a>

    This link doesn’t tell the user what they’re clicking on, which is confusing for screen readers and doesn’t provide context for search engines.

    Effective Link Text

    <a href="https://example.com">Read our guide on semantic HTML</a>

    This example clearly indicates the content of the linked page, which is helpful for screen readers and improves SEO.

    Conclusion

    Semantic HTML isn’t just a coding technique—it’s a way to make the web more understandable, usable, and welcoming for everyone. By using the right tags, you’re not just making your site easier to navigate for search engines; you’re improving the experience for people who rely on assistive technologies. The impact goes beyond lines of code—it’s about making the web a better place for all users.

    If you’re looking to enhance your site’s accessibility or simply want a clearer path to SEO success, start by rethinking your HTML structure. It’s a small change that can make a big difference. And if you’re unsure where to begin, 216digital can help. Schedule an ADA briefing with us to see how better accessibility can turn into a real opportunity for your business.

    Greg McNeil

    October 18, 2024
    How-to Guides
    How-to, HTML, semantic HTML, WCAG, Web Accessibility, web development

  • Why ‘Click Here’ Hurts Your Website’s Accessibility

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

    What is Descriptive Link Text?

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

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

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

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

    Let’s take a look at an example:

    • Bad Link: Click here to read more.
    • Better Link: Learn more about our services.

    In the second example, the user knows exactly what they’re clicking on, which makes the experience more apparent and more helpful, especially for people using screen readers.

    Empty Links and Their Impact on Accessibility

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

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

    How Descriptive Link Text Boosts Accessibility

    One of the best things about the web is its potential to be accessible to everyone. But if we don’t put some thought into how we design and label things like links, we end up excluding a lot of people. Descriptive link text makes websites more accessible and improves the overall user experience in a few key ways:

    • Clarity for Screen Reader Users: Screen readers read links out loud. If the link text is too vague, it isn’t very clear. Descriptive text helps users know exactly what to expect before they click.
    • Better Navigation: Clear, simple language helps everyone, especially users with cognitive disabilities or learning differences, by reducing the mental effort needed to figure out what a link does.
    • Faster Browsing: Descriptive links let users quickly scan a page and understand where each link will take them. This makes it easier for everyone to find what they’re looking for without guessing.

    WCAG Guidelines for Descriptive Links

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

    Here are a few essential tips from WCAG on how to write compelling link text:

    • Be Concise and Relevant: Your link text should be short but informative. Don’t go overboard, but include enough detail so users know where they’re headed.
      • Example: Instead of “click here for more,” try “Learn more about accessible landmarks.“
    • Skip the Redundancies: You don’t need to add words like “link” or “website” to your link text. Screen readers already announce that it’s a link, so saying “click here to visit the website” is unnecessary. Just say, “Visit our website.“
    • Avoid Empty Links: Every link should have meaningful content. Empty links are confusing and serve no functional purpose for users navigating with keyboards or screen readers.

    Examples of Effective and Ineffective Link Text

    • Ineffective Link Text:
      • Click here
      • Read more
      • Learn more
      • Here
    • Effective Link Text:
      • Download the 2024 Annual Report
      • Explore our upcoming events.
      • Read more about creating accessible web links.

    In these examples, the goal is to make it crystal clear where the link will take the user, leaving no room for confusion.

    Best Practices for Writing Descriptive Link Text

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

    Linking It All Together

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

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

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

    Greg McNeil

    October 14, 2024
    How-to Guides, Legal Compliance, WCAG Compliance
    Accessibility, Alt text, descriptive link text, WCAG, WCAG Compliance, Web Accessibility

  • Debunking Common WCAG Myths

    When it comes to digital accessibility, misconceptions can lead businesses astray, leaving them vulnerable to compliance issues and missed opportunities. From believing that automated tools can handle everything to thinking that accessibility compromises design, these myths often create unnecessary hurdles. The truth? Achieving web accessibility is not only possible but it can also be seamlessly integrated into your existing processes.

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

    Myth 1: Conformance with WCAG = Compliance with Accessibility Laws

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

    The Reality

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

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

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

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

    The Reality

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

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

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

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

    The Reality

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

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

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

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

    The Reality

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

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

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

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

    The Reality

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

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

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

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

    The Reality

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

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

    How to Make Accessibility Achievable for Every Business

    Debunking these myths is essential to understanding that WCAG compliance and digital accessibility are achievable for businesses of all sizes. Here are a few practical ways to approach accessibility:

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

    Accessibility is Within Reach

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

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

    Greg McNeil

    October 11, 2024
    WCAG Compliance
    ADA Compliance, WCAG, WCAG Compliance, Web Accessibility, Website Accessibility

  • Web Accessibility Overlays: A False Sense of Security

    As a website owner, you likely recognize the growing need to make your site accessible to everyone, including individuals with disabilities. With increased emphasis on ADA compliance, you may have encountered web accessibility overlays—automated tools that offer quick-fix solutions.

    While they might seem like a convenient solution, these overlays can create significant pitfalls that could leave you vulnerable to legal risks and fail to provide true accessibility.

    In this article, we’ll explore why relying on overlays could lead to a false sense of security and why a more comprehensive approach to addressing web accessibility is critical.

    What Are Web Accessibility Overlays?

    Overlays are software solutions that scan websites for barriers and apply superficial fixes with minimal user involvement. Their promise is simple: They claim to help your site meet Web Content Accessibility Guidelines (WCAG) and ADA standards, making your content more accessible.

    At first glance, overlays seem appealing, with features like adjustable text sizes and color contrast options. However, they fail to deliver a truly inclusive online experience. While some surface level issues can be address, deeper accessibility barriers are frequently ignored or mishandled.

    The Illusion of ADA Compliance

    The biggest misconceptions surrounding web accessibility overlays is that they will guarantee ADA compliance. The harsh reality is that ADA compliance is multifaceted and cannot be achieved through automated fixes alone.

    True web accessibility goes far beyond superficial adjustments. It requires a detailed understanding of the diverse barriers people with disabilities face when interacting with digital content. Overlays, which only focus on cosmetic changes, leave significant gaps in compliance, neglecting critical components of accessibility. Unfortunately, this gives many website owners the false impression that their sites are fully compliant when, in fact, they still fall short in several critical areas.

    Automated Fixes Miss Critical Issues

    While overlays can identify some common accessibility problems, they rely too heavily on automation, often leading to overlooking essential elements.  

    Here are some areas where they typically fall short:

    • Semantic HTML: Using HTML elements correctly ensures that people using screen readers and other assistive technologies can understand your website’s content. Overlays cannot address issues like improper heading structures or missing ARIA labels.
    • Alt Text for Images: Descriptive alt text provides essential context for visually impaired users. Automated tools can only see that they are missing. They cannot interpret the meaning or purpose of the image to generate meaningful descriptions.
    • Keyboard Navigation: Many users are unable to use a mouse, requiring them to navigate a website through the use of a keyboard. To make a website accessible through keyboard navigations corrections must be made on a code level. As discussed above, overlays can only make superficial changes, and cannot make changes directly to the code.

    By relying on these automated solutions, you may inadvertently overlook crucial aspects of web accessibility, leaving your site vulnerable to an ADA lawsuit.

    The False Sense of Security

    The use of web accessibility overlays can foster complacency, leading to a false sense of security. The mere presence of an overlay might make you believe your site is fully accessible, yet significant barriers may still be lurking beneath the surface.

    This illusion is particularly dangerous. If your overlay doesn’t meet full accessibility standards, your website remains non-compliant with the ADA and other state regulations. As a result, businesses that thought they were protecting themselves with an overlay can find themselves in court, dealing with expensive settlements and lasting damage to their reputation.

    In fact, 20% of all accessibility-related lawsuits this year targeted websites using these so-called “accessibility solutions,” and that number continues to grow. Relying solely on overlays not only fails to address critical accessibility issues but also opens the door to legal risks.

    True web accessibility is not a one-time fix; it requires ongoing attention, regular audits, and user feedback. Overlays might provide a band-aid solution, but they can prevent you from developing a genuine commitment to accessibility, which is vital for both compliance and user experience.

    A Human-Centered Approach to Web Accessibility

    To meet the needs of all users and ensure ADA compliance, businesses must adopt a comprehensive, human-centered approach to web accessibility. Here are a few critical steps to achieving this:

    • Understand Web Accessibility Guidelines: WCAG is 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.
    • 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.
    • Engage with Users: Real feedback from individuals with disabilities is invaluable. Understanding their experiences navigating your site will provide critical insights for meaningful improvements.
    • Train Your Team: Train your staff, especially those involved in website management and content creation, about web accessibility principles and best practices. This knowledge is essential to maintaining an accessible online experience over time.
    • Ongoing Monitoring: Compliance is not a one-time task. This proactive approach helps prevent potential violations before they lead to costly lawsuits.

    By prioritizing a human-centered approach, you can create an online environment that truly serves all users rather than settling for a quick-fix solution that only gives the illusion of compliance.

    216digital’s Approach to Web Accessibility

    At 216digital, we understand that genuine web accessibility requires more than just automated tools. Our comprehensive, human-centered approach goes beyond quick fixes to provide long-lasting solutions that focus on risk mitigation and compliance with WCAG 2.1/2.2 AA standards. 

    Through  a11y.Radar, we offer ongoing monitoring, ensuring your website remains compliant and accessible to all users. By emphasizing thorough auditing and remediation services, we help businesses not only meet legal requirements but also tap into the underserved market of individuals with disabilities.

    Our approach is built around long-term accessibility, protecting your business from potential lawsuits and positioning you to serve a broader, more inclusive audience better.

    Conclusion

    Web accessibility overlays may seem like an easy answer, but they often fall short of delivering the accessibility experience your users need and the compliance your business requires. Relying solely on these tools could leave your website open to legal risks and frustrate users with disabilities who still encounter barriers on your site.

    At 216digital, we’re here to help you navigate the complexities of ADA compliance with a human-centered approach. Schedule an ADA briefing with our team today to ensure your website is fully accessible, compliant, and welcoming to every visitor. Don’t settle for quick fixes—invest in meaningful accessibility that makes a real difference.

    Greg McNeil

    October 8, 2024
    Legal Compliance, WCAG Compliance
    ADA Compliance, ADA Lawsuit, Overlay widgets, Overlays, Web Accessibility

  • The Hidden Accessibility Barriers in Popular Plugins

    Plugins offer an easy way for blogs or e-commerce websites to add helpful functionality like newsletter signups, product filters, or bundles to their website without paying costly development fees. But while these popular plugins promise seamless user experiences, many hide serious accessibility barriers that can exclude people with disabilities from entirely using your site.

    Even if you follow accessibility guidelines and best practices throughout your site, plugin vendors may not do the same, which causes your website to become non-conformant despite your excellent work. Understanding how plugins can impact web accessibility is essential to maintaining an accessible website, even if you install them to accomplish simple tasks.

    Let’s explore the common accessibility pitfalls of plugins and what you can do to avoid introducing accessibility errors on your website when utilizing them.

    What Are Plugins, and Why Do They Matter for Accessibility?

    Plugins are pre-built software modules you can add to your website to perform specific tasks. Whether improving SEO, adding an image slider, or embedding a social media feed, plugins extend your website’s features without needing custom development.

    However, plugins don’t always come with accessibility in mind. Many developers focus on functionality and design, overlooking essential elements that make their plugins usable for all, especially people with disabilities who use assistive technology.

    Plugins become a problem when they introduce barriers that prevent users from navigating or interacting with your site. Even if the rest of your website is built according to accessibility standards, a plugin can break that accessibility with one update or feature.

    Common Accessibility Barriers in Popular Plugins

    So, what does an inaccessible plugin look like? These issues can be subtle and not immediately apparent to someone without accessibility experience. Here are a few common barriers often found in popular plugins:

    1. Poor Keyboard Navigation

    Many users with mobility impairments or visual disabilities rely on a keyboard to navigate a website. A plugin that lacks proper keyboard navigation can make it impossible for these users to interact with your site. For example, sliders, pop-up forms, or dropdown menus in some plugins may trap keyboard users, preventing them from moving between page elements using the Tab key.

    One primary culprit is the “tabindex” attribute, which allows developers to control the order in which interactive elements are focused. Some plugins misuse this attribute, causing the focus to jump around illogically, making navigation difficult or impossible.

    2. Lack of ARIA Landmarks and Roles

    ARIA (Accessible Rich Internet Applications) roles and landmarks are essential for users who navigate using screen readers. These assistive technologies rely on ARIA to communicate the structure and purpose of elements on the page. When plugins don’t correctly implement ARIA roles—such as mislabeling buttons or failing to designate headings—it becomes harder for users to understand the content.

    For instance, a popular image gallery plugin may not correctly assign ARIA roles to buttons for navigating between photos. To a screen reader user, those buttons may be entirely invisible, making the gallery feature inaccessible.

    3. Inconsistent Focus Indicators

    Focus indicators are visual cues that help users see which element on the page is currently selected, such as a glowing outline around a button. These indicators are crucial for keyboard users, but many plugins either remove or don’t include focus indicators at all, leaving users stranded without knowing where they are on the page.

    A typical example is sliders that fail to highlight which slide is active or forms where the submit button doesn’t show any visual indication of focus.

    4. Non-Semantic HTML and Improper Heading Structure

    Semantic HTML, which uses elements like <nav>, <article>, and proper headings (<h1>, <h2>), helps assistive technologies interpret content. Unfortunately, some plugins rely on non-semantic HTML—like using <div> or <span> elements for interactive content or headings—which screen readers may not understand as intended.

    For example, a form plugin that uses <div> for form fields instead of <label> elements makes it difficult for screen readers to identify the label of each field, leading to confusion for the user.

    5. Missing or Incorrect Alt Text

    Images used in plugins, especially image-heavy ones like sliders or galleries, often lack alternative text. Alt text is essential for visually impaired users who rely on screen readers to describe the content of images. Without it, users are left in the dark about the purpose of the images in the plugin.

    Some plugins automatically generate alt text, but they may do so incorrectly—using file names or generic labels like “image123,” which provide no meaningful information to users.

    WCAG Guidelines: How Plugins Often Fall Short

    The Web Content Accessibility Guidelines (WCAG) are the gold standard when it comes to web accessibility, but many plugins fail to meet these guidelines. Here’s how:

    Perceivable

    Plugins often fail to provide text alternatives for non-text content, like images and icons. This makes it impossible for screen readers to convey the content to users who are blind or have low vision.

    Operable

    As mentioned, poor keyboard navigation is a major issue with plugins. Any plugin that doesn’t allow users to operate all of its functions via keyboard alone falls short of this WCAG principle.

    Understandable

    Plugins that misuse ARIA roles or use non-semantic HTML can create confusion for users of assistive technology, making the content harder to understand.

    Robust

    Many plugins don’t integrate well with assistive technologies. A plugin that only works in one browser or on certain screen readers is not robust enough to be considered accessible.

    How to Handle Inaccessible Plugins

    So, what should you do if you suspect that a plugin on your site is inaccessible? Here are a few practical tips:

    1. Evaluate the Plugin for Accessibility Barriers

    First, you’ll want to check to see if the plugin vendor has any posted policies or guidance regarding web accessibility. After that, you can install the plugin in a test environment and use standard evaluation tools such as WAVE or Google Lighthouse to determine if any issues appear.

    2. Consider Replacing the Plugin with an Accessible Alternative

    If you find that a plugin is inaccessible, consider replacing it with a more accessible competitor. For example, there are many form, slider, and gallery plugins designed with accessibility in mind. These often prioritize compliance with WCAG guidelines, making it easier for your site to remain accessible.

    3. Reach Out to Plugin Developers

    If you’re committed to a specific plugin that has accessibility issues, don’t hesitate to reach out to the developer. Politely inform them of the barriers their plugin creates and ask if they have plans to address accessibility in future updates. Many developers are open to feedback and may not be aware of the issues until they are brought to their attention.

    4. Use ARIA Landmarks and Roles to Improve Plugin Accessibility

    If you have some technical knowledge, you can manually add ARIA roles or improve the HTML structure of the plugin elements. While this is a more advanced solution, it can be effective in making a plugin more accessible.

    5. Test Regularly with Accessibility Tools

    Tools like WAVE or Lighthouse can help you assess the accessibility of your entire site, including any plugins you’ve added. Regular testing can ensure that your site remains accessible as plugins update and evolve over time.

    Plugins Are Powerful—But Watch Out for Hidden Barriers

    Plugins are a fantastic way to improve your website’s functionality, but they can also introduce hidden accessibility barriers if you’re not careful. As a website owner or developer, it’s your responsibility to ensure that every part of your site, including third-party plugins, is accessible to all users.

    By being proactive—whether through testing, replacing, or communicating with developers—you can avoid the common pitfalls of inaccessible plugins and keep your site welcoming and functional for everyone. Remember, it’s not just about compliance; it’s about creating an inclusive experience that ensures all users can access and interact with your content.

    So, next time you’re about to install that flashy new plugin, pause for a second and ask yourself: Is this accessible?

    Ready to get started? Schedule a personalized ADA briefing with 216digital and get expert guidance tailored to your needs.

    Greg McNeil

    October 7, 2024
    How-to Guides, Legal Compliance
    ADA Compliance, plugins, Web Accessibility, web development, website plugins

  • What is Keyboard Navigation?

    Have you ever tried navigating a website without a mouse, using only your keyboard? If not, it’s an eye-opening experience. For many users with disabilities, keyboard navigation isn’t just an option—it’s essential. Keyboard accessibility ensures that users who rely on keyboards can interact with your website effectively. Let’s dive into what keyboard accessibility is, why it matters, and how you can implement it on your website.

    What is Keyboard Navigation?

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

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

    Why Keyboard Accessibility is Important

    Keyboard accessibility plays a crucial role in web usability, particularly for people with disabilities. Here’s why:

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

    Implementing Proper Keyboard Navigation

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

    Make All Interactive Elements Accessible

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

    Here are a few ways to achieve this:

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

    Example:

    <!-- Good Example -->
<button>Submit</button>
<a href="contact.html">Contact Us</a>
<!-- Custom Element Example (with proper keyboard accessibility) -->
<div role="button" tabindex="0" onclick="alert('Button clicked')">Click me</div>

    Ensure Logical Tab Order

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

    Best Practices for Logical Tab Order:

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

    Use Clear Focus Indicators

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

    What’s a Focus Indicator?

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

    Best Practices for Focus Indicators:
    • Don’t disable default focus outlines: Some designers remove these outlines for aesthetic reasons, but this is a big no-no for accessibility.
    • Customize focus styles: If the default outline doesn’t fit your design, you can customize it. Just make sure the indicator is clear and easy to see.

    Example:

    /* Customize focus outline */
button: focus, a: focus {
    outline: 2px solid #007BFF; /* High contrast color */
}

    Avoid Keyboard Traps

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

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

    Example:

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

    Referencing WCAG Guidelines

    To meet web accessibility standards, your site should align with the WCAG guidelines, particularly the following:

    • WCAG 2.1.1 – Keyboard: Ensure all content and functionality can be accessed using a keyboard.
    • WCAG 2.4.3 – Focus Order: Make sure users can navigate through the page in a logical sequence.
    • WCAG 2.4.7 – Focus Visible: Provide a clear indicator of focus when keyboard navigation is used.

    These guidelines are vital for ensuring that your site is accessible to all users, including those who depend on keyboard navigation.

    Making Your Website Accessible for All

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

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

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

    Greg McNeil

    October 4, 2024
    How-to Guides
    Accessibility, How-to, Keyboard Navigation, WCAG, WCAG Compliance, Web Accessibility, web development

  • Common Web Accessibility Pitfalls That Invite ADA Lawsuits

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

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

    1. Missing Alt Text

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

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

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

    WCAG 2.1 Guideline: 1.1.1 – Non-text Content

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

    Example ADA Lawsuit: Fox News Network LLC

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

    2. Non-Descriptive Interactive Elements

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

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

    WCAG 2.1 Guideline: 4.1.2 – Name, Role, Value

    Interactive elements should have clear labels that explain their purpose.

    Example ADA Lawsuit: NIKE, Inc.

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

    3. Lack of Keyboard Navigation

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

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

    WCAG 2.1 Guideline: 2.1.1 – Keyboard

    All functionality should be accessible using a keyboard.

    Example ADA Lawsuit: Parkwood Entertainment LLC

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

    4. Inaccessible Forms

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

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

    WCAG 2.1 Guideline: 3.3.2 – Labels or Instructions

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

    Example ADA Lawsuit: H&R Block Lawsuit

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

    5.  Inaccessible Pop-Ups and Modals

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

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

    WCAG 2.1 Guideline: 1.3.1 – Info and Relationships

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

    Example ADA Lawsuit: Five Guys Enterprises

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

    How to Avoid ADA Lawsuits

    Avoiding ADA lawsuits starts with a proactive approach to web accessibility. Making your website accessible is not only a legal obligation but also an opportunity to provide a better user experience for all visitors, regardless of ability. Here are key steps you can take to avoid common accessibility pitfalls:

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

    Conclusion

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

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

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

    Greg McNeil

    September 25, 2024
    Legal Compliance, WCAG Compliance
    Accessibility, ADA Compliance, ADA Lawsuit, ADA Website Compliance, digital accessibility, WCAG, WCAG Compliance, Web Accessibility

  • Closed Captions for Online Video Content

    With online video content becoming a cornerstone of business, marketing, and education, ensuring your videos are accessible to everyone is essential. One of the most effective ways to ensure your videos reach the widest audience possible is through closed captioning. But what exactly are closed captions? How do they work, and what actions must you take as a business or website owner? Let’s dive into everything you need to know about closed captions.

    What Are Closed Captions?

    Closed captions are text alternatives for words spoken in video or information conveyed through visual actions, designed to help people who are deaf or hard of hearing understand the content. Captions appear at the bottom of the frame and include the spoken dialogue and describe sound effects, music, or other audio cues critical to understanding the video. Closed captions can be toggled on and off by the video player, giving them control over how they experience the content.

    Who Benefits From Closed Captions?

    You might think closed captions are just for people with hearing impairments, but they benefit a much broader audience. Closed captions can help:

    • Deaf and hard-of-hearing individuals: This is the primary group that closed captions serve, allowing them to access video content on an equal footing with hearing viewers.
    • Non-native language speakers: Captions help people learning English or other languages follow along with the dialogue.
    • People in noisy environments: Imagine watching a video in a busy coffee shop or on public transportation—captions make it possible to follow along even if you can’t hear the audio.
    • People in quiet environments: Maybe you’re watching a video while a baby sleeps in the next room. With captions, you can follow the content without turning up the volume.

    Closed Captions vs. Subtitles: What’s the Difference?

    Though often used interchangeably, closed captions and subtitles aren’t quite the same. Subtitles are a text representation of the spoken words in a video. They benefit individuals with hearing impairments or people who can’t understand the spoken language but can otherwise visually perceive the content. For instance, subtitles often appear in foreign films. They don’t include sound effects or non-dialogue audio, which makes them less accessible for people who are deaf or hard of hearing.

    On the other hand, closed captions include not just the dialogue but also sound effects and other crucial audio information, making them more comprehensive.

    What are the Differences Between “Closed Captions” and “Open Captions”?

    You’ve likely heard about “closed captions” and “open captions.” The critical difference between the two is control. Closed captions can be toggled on or off by the viewer, while open captions are always on—they’re embedded into the video file and cannot be turned off. While open captions may seem convenient, they don’t provide viewers the choice to disable them, which can sometimes detract from the viewing experience for those who don’t need them.

    What Are the Legal Obligations for Closed Captioning?

    As a website owner, business owner, or content creator, you must understand your legal obligations regarding closed captions. In the U.S., several laws and regulations address digital accessibility, including captioning for video content.

    The ADA’s Requirements for Closed Captions

    The Americans with Disabilities Act (ADA) states that businesses and organizations make their services accessible to people with disabilities. While the ADA doesn’t specifically mention closed captions, it requires that public-facing businesses and websites provide equal access to their services, which can include providing captions for video content.

    The Department of Justice has provided guidance that websites should be accessible to everyone, and providing captions for videos is an integral part of ensuring your content meets the Web Content Accessibility Guidelines (WCAG), which help businesses comply with the ADA.

    FCC Requirements for Closed Captions

    For online video content that has aired on TV in the U.S., the Federal Communications Commission (FCC) requires closed captions. This regulation was expanded in 2012 with the introduction of the Twenty-First Century Communications and Video Accessibility Act (CVAA), which requires that any video programming aired on television with captions must include captions when distributed online.

    This act means that if your business uses TV ads or commercials and also posts them online, they must be captioned. Even if your content hasn’t aired on TV, following FCC rules for captioning is a good best practice.

    What Are the Benefits of Using Closed Captioning?

    Adding closed captions to your videos isn’t just about legal compliance—it can offer significant benefits to your business:

    • Expanded audience: Captioning your videos makes them accessible to more people, including those with hearing impairments, non-native speakers, and people in noisy or quiet environments.
    • Improved SEO: Search engines can’t watch videos but can read captions. By adding captions, you give search engines more context to the relevance of your content, which can improve your rankings in search results.
    • Better engagement: Captions can help viewers stay engaged with your content. Studies have shown that videos with captions have higher engagement compared to those without.
    • Increased social media reach: Many social media platforms autoplay videos without sound. Captions can ensure your message gets across, even if the audio isn’t playing.

    Best Practices for Closed Captioning

    Here are some best practices for closed captioning video content:

    • Ensure the captions are accurate: Inaccurate captions can confuse viewers or misrepresent your content. Invest in high-quality captioning services or use tools that offer high accuracy.
    • Include non-dialogue audio: Remember that closed captions provide a complete audio experience for viewers who can’t hear. Include descriptions of music, sound effects, and other audio cues that are important to understanding the content.
    • Use appropriate timing: Ensure that captions appear on-screen at the same time as dialogue or actions.
    • Keep the text readable: Ensure the text is easy to read by using a legible font, high contrast between the text and background, and large enough size to be legible.

    How to Add Captions to Videos

    There are several ways to add captions to your videos, depending on the platform and your budget:

    1. Automated captioning tools: Platforms like YouTube and Facebook offer automatic captioning, though these tools often require manual review to ensure accuracy.
    2. Manual captioning: You can create captions manually if you have the resources. Many video editing tools allow you to add captions by entering the text.
    3. Professional captioning services: You should invest in a professional service specializing in closed captioning for high-quality, accurate captions. These services usually charge based on the length of the video.

    What If My Video Service Doesn’t Support Closed Captions?

    If your platform doesn’t support closed captions, consider switching to one that does. Most popular video hosting services, including YouTube, Vimeo, and Wistia, provide captioning options. If switching platforms isn’t feasible, you can include a transcript of the video as an alternative. However, this is not a perfect substitute for closed captions, as transcripts don’t provide the real-time viewing experience that captions do.

    Conclusion

    Closed captions are a great way to make online video content accessible to everyone, and they offer many benefits, from legal compliance to better engagement and SEO. As a business or website owner, adding captions to your videos can broaden your audience, improve your content’s reach, and ensure you’re providing a digital experience that’s inclusive to everyone.

    Remember to follow the ADA, FCC, and WCAG guidelines, and always aim for accuracy and readability when adding captions to your videos. If you’re unsure if your video content is leaving you vulnerable to expensive litigation or causing you to miss out on revenue, reach out to 216digital for a courtesy evaluation.

    Bobby

    September 24, 2024
    How-to Guides, Legal Compliance, The Benefits of Web Accessibility
    ADA Compliance, Closed caption, digital accessibility, How-to, WCAG, Web Accessibility, web development
Previous Page
1 … 6 7 8 9 10 … 12
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.