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

  • Digital Accessibility Should Be of Every eCommerces’ Christmas List

    ‘Tis the season for eCommerce businesses to sleigh with their hottest sales of the year. Shoppers everywhere are searching for that perfect gift, making it one of the most lucrative times of the year for online retailers. But there’s a crucial part of the market that many are overlooking—digital accessibility. Ignoring this can mean missing out on a significant number of shoppers and facing potential legal issues. In 2021, businesses lost over $828 million due to websites that weren’t accessible, excluding valuable customers and risking their brand’s reputation.

    Meeting digital accessibility standards isn’t just a nice-to-have; it’s a must, especially this year when the stakes are even higher. With inflation rising and economic uncertainty looming, shoppers are expected to be pickier about where they spend their money online. ISo, is your business ready to meet this challenge and unwrap its full potential?

    Competitive Advantage: Stand Out in a Crowded Market

    Since the COVID-19 pandemic, online sales have soared. In 2020 and 2021 alone, retailers made an extra $219 billion because more people shopped online. With so many online stores competing for shoppers’ attention during the holidays, you need to find ways to make your brand stand out. A 2022 report from WebAIM found that about 98% of top websites don’t meet basic accessibility standards. This leaves a lot of business up for grabs, giving you a huge chance to get ahead.

    According to the CDC, one in four adults in the United States has a disability. During the holiday season, making your website accessible isn’t just something nice to do—it’s a way to reach millions of potential customers who might have trouble shopping online otherwise. By investing in digital accessibility, you turn your site into a welcoming, easy-to-use place that encourages more shoppers to stay, look around, and make purchases.

    Reach a Larger Customer Base That’s Ready to Shop

    Many people assume that digital accessibility only helps a small group, but this couldn’t be further from the truth. People with disabilities and older adults are often powerful consumers, especially during the holidays when everyone is buying gifts. If you ignore the huge spending power of the disability community, you miss out on a massive potential customer base. Making your website accessible ensures that people with disabilities can navigate and shop on your site, expanding your customer base and showing inclusivity.

    Consider how many sales you could lose if your website isn’t accessible to everyone. Research shows that difficulties with web accessibility could cost your business $8 billion in holiday revenue. The good news is that you can avoid this loss by making your site inclusive and accessible.

    Digital Accessibility for People with Disabilities

    Over 1 billion people around the world live with some form of disability. In the U.S. alone, about 26% of adults have a disability—that’s one in four adults, according to the CDC. These consumers have more than $175 billion in spending money. By prioritizing digital accessibility,  you’re opening your online store to millions of potential customers who might be unable to use your site otherwise. 

    These customers are eager to join in holiday shopping, and by making your site accessible, you’re welcoming them in. Research from the American Institutes for Research shows that people with disabilities have about $490 billion in disposable income. Including older adults, who also benefit from accessibility improvements, makes this potential customer base even bigger.

    Older Buyers are Big Spenders

    Many older shoppers, who might have vision challenges or limited mobility, look for websites that are easy to read and use. Simple changes like adjustable text sizes, high-contrast display options, and easy navigation make a big difference for this group. According to AARP, adults over 50 contribute over $7.6 trillion to the economy annually, making up 41% of all online shopping. By making your website more accessible, you can attract their holiday spending and build lasting customer loyalty.

    The Digital Accessibility That Makes a Difference

    What turns a brief visit into a sale? The experience. 

    Today’s shoppers are more selective than ever. They expect high-quality products and seamless online shopping. A 2022 report from IBM notes: “Shopping must be fast and efficient some of the time, rich and experiential other times, and always easy and intuitive. What’s more, consumers expect companies to cater to their needs and live up to their social and environmental responsibility claims.” 

    The Challenges Shoppers with Disabilities Face

    How easy your website is to use depends on its accessibility. So, what problems might prevent gift buyers with disabilities from becoming your customers?

    • 20% had issues creating an account or logging in to the website.
    • 39% couldn’t find the information they needed about a product or service.
    • 38% had problems with online purchasing and couldn’t contact customer service for help.
    • 28% couldn’t interact with the website to select the items they wanted.
    • 25% had issues with checking out and completing the payment process.

    The truth is that an accessible website isn’t just for people with disabilities; it benefits everyone. Features like intuitive navigation, readable text, keyboard navigation, and easily clickable buttons improve the user experience for all. For example, video captions not only help those with hearing impairments but also benefit users in a noisy environment or who prefer to read along. When your website is easy to use, you can expect higher conversion rates, which can make a big difference during holiday shopping.

    Creating a Positive Brand Image

    Your brand reputation is about the relationship you have with your customers and the promises you make every day. People want to shop at brands that share their values. They want to spend money with companies that are doing good in the world and taking a stand—whether it’s in sustainability, climate change, or digital accessibility.

    According to a 2022 report from Google Cloud, shared values are more important to consumers than ever before. A striking 82% of shoppers prefer brands that align with their personal values. Even more telling, three out of four buyers said they’ve stopped supporting brands when their values didn’t match. Clearly, meeting these expectations is vital for building and maintaining customer loyalty.

    Your website is a crucial part of your brand. It shows where you choose to invest your budget and whether you care about diversity and inclusion. It paints a clear picture of whether you care about creating an easy and accessible shopping experience. Are you creating a welcoming experience? Or are you causing frustration and losing out on a large, powerful customer base?

    Higher Conversion Rates

    Accessibility features can directly influence your sales. A well-designed site makes shopping easy, which reduces cart abandonment and increases completed purchases. In fact, a Forrester study found that accessible websites can increase online sales by up to 15%.

    Features like intuitive navigation, alternative text for images, and clear call-to-action buttons attract more users and guide them through to purchase. The Web Accessibility Initiative (WAI) notes that accessible websites can reach up to 10% more customers and improve SEO.

    Digital Accessibility is a Must-Have

    Digital accessibility isn’t just about doing what’s right or keeping customers happy—it’s also a legal necessity. E-commerce websites face growing scrutiny, with web accessibility lawsuits on the rise. In 2023 alone, 4,605 web accessibility lawsuits were filed in both Federal and State Courts. The retail sector was hit the hardest, making up nearly 82% of all ADA-related web accessibility cases.

    The Americans with Disabilities Act (ADA) requires businesses to provide equal access to their goods and services, extending beyond physical stores to include online spaces. Not meeting these standards can lead to expensive legal issues, harm your reputation, and weaken consumer trust. As you prepare your website for the holiday season, neglecting digital accessibility could expose your business to significant risks.

    Prepare Your Website for the Holidays with 216digital

    Preparing your e-commerce site for the holiday season means more than just stocking up on inventory and marketing deals. It’s about making sure your site is accessible to everyone. At 216digital, we specialize in helping e-commerce websites meet digital accessibility standards. From thorough audits to ongoing support and monitoring, we’re here to help you create an inclusive, user-friendly site.

    Don’t wait until it’s too late to make your website accessible, or yule be sorry. The holiday rush is the perfect time to ensure your site welcomes all customers. With digital accessibility, you’re not only complying with the law—you’re setting your business up for success.

    Greg McNeil

    October 25, 2024
    The Benefits of Web Accessibility
    digital accessibility, ecommerce website, holiday promotions, Retail

  • Accessibility Tips for Post-Remediation Success

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

    Why Accessibility Matters

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

    Training Your Team

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

    Writing Alternative Text

    Alternative text, or alt text, is a crucial part of accessibility. It describes images for people who can’t see them. When creating content, ensure your team knows how to write compelling alt text. Here are some tips:

    • Be Descriptive: Alt text should describe the image accurately. Instead of saying, “A dog,” say, “A golden retriever is playing fetch in the park.”
    • Keep It Concise: Aim for around 125 characters. Be descriptive, but don’t overwhelm the reader.
    • Skip Decorative Images: If an image is purely decorative and doesn’t add value to the content, it’s best to leave the alt text blank.

    Ensuring Proper Heading Structures

    Proper heading structures not only help with readability but are also vital for screen readers. When creating web content, remind your team to use headings hierarchically. Here’s how:

    • Use H1 for Titles: The main title of your page should always be an H1 tag.
    • H2 for Subheadings: Use H2 tags for major sections and H3 tags for subsections. This creates a clear outline for users and helps them navigate your content.
    • Avoid Skipping Headings: Don’t jump from H1 to H4 without using H2 and H3. This can confuse users and screen readers.

    Creating Accessible Documents

    When creating downloadable content like PDFs or Word documents, keep accessibility in mind as well. Here are some tips:

    • Use Headings and Styles: Just like web content, use headings in documents to help structure the information.
    • Add Descriptive Links: Ensure that links are descriptive. Instead of saying “click here,” use phrases like “read our accessibility guide.”
    • Check Reading Order: In PDFs, the reading order matters. Use accessibility features in your document software to ensure the content reads logically.

    Ongoing Review and Feedback

    Creating accessible content doesn’t stop once you’ve trained your team. It’s essential to implement an ongoing review process. Here’s how to keep improving:

    • Peer Reviews
      • Encourage team members to review each other’s content for accessibility. A fresh set of eyes can catch mistakes that might have been missed. Create a checklist for peer reviews that includes items like alt text, heading structure, and color contrast.
    • Feedback from Users
      • If possible, seek feedback from users with disabilities. Their insights can help you identify areas for improvement that you might have yet to consider.
    • Stay Updated
      • Digital accessibility guidelines can evolve, so it’s essential to stay informed about best practices. Consider subscribing to accessibility blogs or joining professional organizations that focus on digital accessibility.

    Wrapping Up

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

    Greg McNeil

    October 24, 2024
    How-to Guides, Web Accessibility Monitoring
    a11y.Radar, Accessibility, Accessibility monitoring, Accessibility Remediation, Web Accessibility Remediation

  • ADA Compliance: What You Can and Can’t Control

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

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

    What is ADA Compliance?

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

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

    Website Design and Development

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

    Use Semantic HTML

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

    Enable Keyboard Navigation

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

    Ensure Sufficient Color Contrast

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

    Provide Descriptive Alt Text for Images

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

    Ongoing Monitoring and Testing

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

    Conduct Regular Accessibility Audits

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

    Engage in User Testing

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

    Content Management and Regular Updates

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

    Provide Content in Accessible Formats

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

    Keep Content Updated

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

    Avoiding Overlays

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

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

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

    Third-Party Plugins and Widgets

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

    Content Management Systems (CMS)

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

    Outsourced Web Development and Content Creation

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

    User-Generated Content

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

    Strategies for Managing What You Can’t Control

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

    Vetting and Selecting Accessible Vendors

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

    Adding Disclaimers and Providing Alternatives

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

    Foster Communication and Collaboration

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

    Conclusion

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

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

    Greg McNeil

    October 23, 2024
    How-to Guides, Testing & Remediation
    Accessibility, ADA Compliance, ADA Website Compliance, Website Accessibility

  • 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

  • 5 Accessibility Mistakes to Dodge This Holiday Season

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

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

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

    Insufficient Alt Text for Images

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

    Why It Matters

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

    How to Fix It

    As you add promotional banners and products to the website, always make sure you’re adding alt text to the images. Here’s an example:

    <img src=" winter-sale-banner.jpg" alt=" Banner for Winter Sale - Up to 50% off jackets and coats">

    Do not use image file names or vague text such as “sale-img” or “Sale Image”. Make sure the alt text contains enough information that the user understands the purpose of the image and contains any words that appear on the image.

    Poor Color Contrast

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

    Why It Matters

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

    How to Fix It

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

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

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

    Pay attention to your text color, button colors, and even the contrast of smaller elements like icons.

    InaccessibleNavigation and Controls

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

    Why It Matters

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

    How to Fix It

    Regularly test the functional portions of your website with a keyboard. Attempt to start at the homepage, navigate to a category page, use the category filters, add/remove product quantities, and select product options without your mouse. If you encounter a problem with an element, it’s likely not coded using the correct element. You can force an element to receive keyboard focus using the tabindex attribute. The role="button" attribute will help users navigating with assistive technology better understand the purpose of the control:

    <span class="swatch-button" tabindex="0" role="button">Beige</span>

    Better yet, use the correct semantic HTML tag to accomplish this:

    <button class="swatch-button">Beige</button>

    Semantic HTML helps users relying on assistive technology understand the purpose of controls and also helps Google better understand the structure of your website:

    <nav>
	<a href="/products">All products</a>
	<a href="/products/sale">Sale products</a>
	<a href="/contact">Contact Us</a>
</nav>

    Missing Captions on Promotional Videos

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

    Why It Matters

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

    How to Fix It

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

    Here’s how you implement closed captions from an external service:

     <video controls>
  <source src="promo-video.mp4" type="video/mp4">
  <track kind="captions" src="captions_en.vtt" srclang="en" label="English">
  Your browser does not support the video tag.
</video>

    Always test the captions to make sure they sync properly with the video and cover both spoken dialogue and important sound effects.

    Over-reliance on Automated Accessibility Overlays

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

    Why It Matters

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

    How to Fix It

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

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

    <!-- Instead of using an overlay for images, provide clear alt text -->
<img src= "holiday-product.jpg" alt= "Red winter coat with a 30% off discount tag">

    Automated tools tend to use AI to label images and controls and often misrepresent content on the website, leading to a potentially overtly harmful experience.

    Conclusion

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

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

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

    Bobby

    October 21, 2024
    How-to Guides, Legal Compliance
    holiday promotions, How-to, web development, Website Accessibility

  • 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

  • Shifting the Mindset Around Website Accessibility

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

    The Current Mindset Around Website Accessibility

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

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

    The Value of Accessibility for All Users

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

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

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

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

    Accessibility as a Business Opportunity

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

    Market Potential

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

    Search Engine Optimization

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

    Mitigate Legal Risk

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

    Accessibility, Innovation, and Creativity for Problem Solving

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

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

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

    Connecting Accessibility with Corporate Social Responsibility

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

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

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

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

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

    So, how do you begin? Start small but think big:

    • Share Real-Life Stories: Use videos or testimonials that show how people with disabilities interact with digital content. Real stories have a way of making abstract concepts tangible. Seeing the difference their work makes can inspire your team to think creatively about building more accessible features.
    • Foster Cross-Department Collaboration: Accessibility should be a shared responsibility. Bring together designers, developers, marketers, and content creators to ensure accessibility is part of every stage of a project. This holistic approach helps create a seamless, inclusive experience for users.
    • Integrate Accessibility Into Your Core Strategy: Make accessibility a crucial part of your business strategy and product development. Don’t treat it as an add-on or afterthought. Prioritize accessibility from the beginning of your planning process—whether it’s for a website redesign, a new product launch, or a marketing campaign.
    • Keep Accessibility Up to Date: Accessibility isn’t a one-time effort. Schedule regular audits to review your website, apps, and other digital content. Stay informed about changing accessibility standards and emerging best practices to make sure you’re continually improving.

    Ready to take the next step? Schedule an ADA briefing with 216digital today. Our experts will walk you through the essentials of web accessibility, help identify gaps, and show you how it can become a key driver of growth for your business. Let’s turn this obligation into a lasting opportunity!

    Greg McNeil

    October 17, 2024
    The Benefits of Web Accessibility
    Accessibility, ADA Compliance, SEO, UX, WCAG, Website Accessibility

  • Retail Accessibility: Avoiding Common Pitfalls

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

    Why Accessibility Matters for Online Retailers

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

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

    The Web Accessibility Guidelines

    The Web Content Accessibility Guidelines (WCAG) are the foundation for creating an accessible website. These guidelines revolve around four main principles, often referred to as POUR:

    • Perceivable: Content must be presented in a way that all users can perceive, whether visually or audibly.
    • Operable: Your site should be fully navigable, whether users are using a mouse, keyboard, or assistive technologies.
    • Understandable: Your content should be easy to comprehend and navigate.
    • Robust: Your website should work well with a variety of assistive tools, like screen readers.

    For retailers, aiming for WCAG 2.1 Level AA compliance is a great starting point, and it’s the level referenced by most legal frameworks for web accessibility.

    Steps for Online Retailers to Improve Accessibility Right Now

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

    Auditing Retail Sites for Accessibility Issues

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

    Make Visual Content Accessible

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

    Don’t forget about video content! WCAG guidelines require captions for pre-recorded audio in videos. Ensure that auto-generated captions, like those from YouTube, are accurate, and provide transcripts for podcasts to make all media accessible.

    <img src="coffee-mug.jpg" alt="Blue ceramic coffee mug with a handle">
<video controls>
  <track kind="captions" src="captions_en.vtt" srclang="en" label="English">
</video>

    Optimize Website Navigation and Structure

    Some users navigate your site without a mouse, relying solely on their keyboard. Make sure your site can be fully navigated using just a keyboard, with elements like menus, buttons, and forms accessible through “tab” key navigation. Also, ensure every interactive element has a visible focus indicator, like a border around buttons or links, so users can easily see where they are on the page.

    button:focus, a:focus {
  outline: 2px solid #ffcc00; /* Provides a visible focus indicator */
}

    Improve Form Accessibility

    Checkout forms can be a stumbling block for accessibility, especially if they aren’t screen reader-friendly. Make sure all form fields have clear labels and that error messages don’t rely solely on color. For example, instead of just using a red outline to indicate a required field, include a text message like “This field is required” to make the error clear for all users.

    <form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <span class="error" role="alert">This field is required</span>
</form>

    The Retail Shopping and Checkout Process

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

    To meet WCAG SC 2.4.4 standards, you can use visual breadcrumbs or progress indicators to let users know where they are in the checkout process.

    <nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/cart">Cart</a></li>
    <li><a href="/shipping">Shipping</a></li>
    <li aria-current="page">Payment</li>
  </ol>
</nav>

    Implement ARIA Landmarks and Roles

    ARIA (Accessible Rich Internet Applications) landmarks and roles help assistive technologies identify key sections of your page. For instance, wrapping your site’s header in a role="banner" helps screen readers identify it as the main header, making it easier for users to navigate through your site.

    <header role="banner">
  <nav role="navigation">
    <ul>
      <li><a href="/home">Home</a></li>
      <li><a href="/products">Products</a></li>
    </ul>
  </nav>
</header>

    Testing and Ongoing Monitoring for Retailers

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

    Partnering with Accessibility Experts

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

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

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

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

    Check Accessibility Off Your Shopping List

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

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

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

    Greg McNeil

    October 16, 2024
    How-to Guides, Legal Compliance, WCAG Compliance
    Accessibility, ADA Compliance, ADA Website Compliance, ecommerce website, Retail, WCAG

  • The Dos and Don’ts of Using Tabindex

    Running a website, whether for an online store or a blog, means thinking about your users—including making your site accessible to everyone. You want as many people as possible to engage with your site, and that includes those who rely on keyboard navigation or assistive technologies.

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

    What Is the Tabindex Attribute?

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

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

    How Does Tabindex Work?

    There are a few different values you can assign to the tabindex attribute, each of which affects how elements are navigated:

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

    Best Practices for Using Tabindex

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

    Stick to tabindex= "0" for Most Cases

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

    Here’s an example of how to use tabindex= “0”:

    <div role="button" tabindex="0">Submit</div>
<a tabindex="0">Learn more</a>

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

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

    Here’s how you might use it for a modal:

    <div id="myModal" tabindex="-1">
  <p>This is a modal window.</p>
  <button>Close</button>
</div>

    When the modal is triggered (through JavaScript), you can set focus to it programmatically:

    document.getElementById('myModal').focus();

    This ensures the modal is accessible when needed without cluttering the tab order when it’s not.

    Test Your Website with Keyboard-Only Navigation

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

    Common Mistakes to Avoid

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

    Overusing Positive Tabindex Values

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

    Skipping Interactive Elements

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

    Using Tabindex Instead of Proper HTML

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

    How Does Tabindex Relate to Web Accessibility Guidelines?

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

    When it comes to keyboard navigation, WCAG has some specific guidelines that tabindex helps address:

    • WCAG 2.1.1 Keyboard: All site functionality should be operable through a keyboard interface.
    • WCAG 2.4.3 Focus Order: Navigating through content should follow a logical order that doesn’t confuse the user.

    Using tabindex correctly is a step toward ensuring that your website meets these standards, helping you create a more inclusive and legally compliant experience.

    Tabbing It All Together

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

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

    Bobby

    October 15, 2024
    How-to Guides
    Accessibility, ADA Compliance, How-to, tabindex, WCAG, web development

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

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

    What is Descriptive Link Text?

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

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

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

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

    Let’s take a look at an example:

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

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

    Empty Links and Their Impact on Accessibility

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

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

    How Descriptive Link Text Boosts Accessibility

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

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

    WCAG Guidelines for Descriptive Links

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

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

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

    Examples of Effective and Ineffective Link Text

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

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

    Best Practices for Writing Descriptive Link Text

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

    Linking It All Together

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

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

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

    Greg McNeil

    October 14, 2024
    How-to Guides, Legal Compliance, WCAG Compliance
    Accessibility, Alt text, descriptive link text, WCAG, WCAG Compliance, Web Accessibility
Previous Page
1 … 13 14 15 16 17 … 32
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.