Accessibility Archives - Page 2 of 8/Tag

Why 100% ADA Compliance Isn’t Realistic
If you own a website or create online content, it’s crucial to understand what ADA compliance truly entails. In today’s digital landscape, failing to address accessibility isn’t just a missed opportunity—it’s a potential liability. Despite promises from certain agencies claiming they can make your site “100% ADA-compliant,” the reality is more complex. Can any website truly meet full compliance in an ever-evolving digital world? Let’s take a closer look at what this means and why a one-size-fits-all solution may not be enough to protect you from legal risks or to provide a genuinely accessible experience.

What is ADA Compliance?

The Americans with Disabilities Act (ADA) was passed in 1990 to ensure that people with disabilities have equal rights and opportunities. While the ADA doesn’t specifically mention websites, it has been interpreted to apply to them, especially under Title II (which covers state and local governments) and Title III (which focuses on public accommodations like businesses).

For websites, ADA compliance often means following the Web Content Accessibility Guidelines (WCAG). These guidelines help make online content more accessible to everyone, including those with visual, auditory, or other disabilities. The WCAG principles can be summed up as follows:
- Perceivable: Information must be presented in a way that users can perceive, like providing text alternatives for images.
- Operable: Users must be able to navigate and interact with the content using various devices and assistive technologies.
- Understandable: Information and user interfaces should be clear and straightforward.
- Robust: Content must be compatible with current and future user agents, including assistive technologies.
Can a Website Be 100% ADA-Compliant?

Now, here’s the tricky part: claiming that a website can be 100% ADA compliant is not only misleading but also unrealistic, and there is no legal definition. Why is that? Because the web is constantly changing. New technologies, design trends, and content updates can all affect how accessible a website is. Lastly, the Department of Justice has never set in stone what it means for a website to be legally compliant.

Accessibility Standards vs. Ongoing Compliance

Understanding the difference between achieving accessibility standards and maintaining compliance is crucial. You might partner with an agency that helps you meet specific accessibility goals today. However, if you don’t continue to monitor and update your website, you could risk falling out of compliance as your site evolves.

For example, if you add new content or change your design, you need to ensure those changes also meet accessibility standards. This ongoing effort is what keeps your website welcoming and usable for all visitors.

False Claims by Agencies

Many agencies will promise they can make your website “fully ADA compliant.” They might use phrases like “one-time fix” or “permanent compliance.” While that sounds appealing, it’s often not realistic. Here’s why:
1. One-Time Solutions: If an agency offers a quick, one-time fix, be cautious. Accessibility isn’t a set-it-and-forget-it situation. Websites need continuous updates and adjustments.
2. Guaranteed Compliance: Some agencies might claim they can guarantee compliance. However, there is no set legal standard for web compliance. You might still face ADA lawsuits even after working with an agency.
3. Frivolous ADA Lawsuits: It’s unfortunate, but there are frivolous ADA lawsuits out there. Some businesses are sued over accessibility issues that seem exaggerated. This highlights the importance of taking genuine steps toward accessibility rather than relying on empty promises.
What to Look For in an Agency

So, how do you find the right agency for web accessibility services? Here are some tips to help you choose wisely:
1. Continuous Support: Look for agencies that offer ongoing support instead of just a one-time fix. This could include regular audits and updates based on user feedback.
2. Transparency: A reputable agency should be clear about what they can and cannot guarantee. They should help you set realistic expectations for what compliance looks like.
3. Education: The best agencies will not only assist you in making your website compliant but will also educate you on how to maintain accessibility in the long run. Knowledge is power!
4. Customized Solutions: Every website is unique. An effective agency should be willing to tailor their approach to meet your specific needs and goals.
Setting Realistic Expectations

As a website owner, setting realistic expectations about what ADA compliance means for your site is crucial. Accessibility is a journey, not a destination. While you can take significant steps to improve your site’s accessibility, it’s essential to recognize that this is an ongoing commitment.

Be wary of agencies that promise a quick fix or complete compliance. Instead, look for partners who understand the evolving nature of web content and can help you adapt over time.

Secure Lasting Accessibility with 216digital

The web is dynamic, and maintaining accessibility requires ongoing effort. Choosing an agency focused on continuous support and education equips you to create an inclusive online space for everyone

At 216digital, we prioritize not only bringing your website into compliance but also educating you on how to maintain and enhance accessibility long after your project is complete. We’re committed to supporting you on this journey every step of the way.

We encourage you to schedule an ADA briefing with us to learn how we can help you navigate the complexities of web accessibility. Together, we can ensure your website remains welcoming and usable for all visitors.

Embrace the journey, and let’s make the web a better place for everyone!
Greg McNeil

November 1, 2024

Legal Compliance

Accessibility, ADA Compliance, ADA Lawsuit, ADA Website Compliance
A Case for Starting Accessibility Early in Development
When you’re kicking off a new web project, it’s easy to focus on exciting features and visual design. But here’s something that often gets pushed aside until it’s almost too late: accessibility. The truth? Accessibility isn’t just a box to check off at the end of development; it’s a fundamental part of creating an inclusive, user-friendly experience from day one. To truly succeed, you need to start accessibility early.

Think about it: no one wants to realize their new website or app needs major tweaks just to be usable for everyone. Starting accessibility early not only benefits people with disabilities but boosts usability for all your users, saves you money, and keeps you in line with standards like Web Content Accessibility Guidelines (WCAG). And who doesn’t want to avoid headaches later on?

Let’s break down why embedding accessibility into your project from the very beginning is worth every bit of effort—and how to make it happen smoothly.

Why Start Accessibility Planning from the Beginning?

Making accessibility a priority from day one can feel like a big commitment, but here’s what you gain by choosing to start accessibility early:

Avoid Costly Retrofits

Fixing accessibility issues at the end of a project can mean reworking significant parts of your site—an expensive and time-consuming ordeal. Imagine designing your site, launching it, and then realizing it doesn’t meet accessibility standards. Adding features like keyboard navigation or fixing color contrast at that point can mean redoing large chunks of your design. Planning for these details early on keeps everything smoother (and kinder on your budget).

Enhance User Experience for All

When you start accessibility early, you set the stage for a user experience that is friendly and inclusive for everyone. Accessibility isn’t just for those with disabilities—it’s for everyone. Features like clear navigation, easy-to-read text, and well-labeled elements make browsing better for all users. Designing with accessibility in mind from the start ensures these benefits are baked in, rather than added later.

Stay Compliant and Avoid Legal Issues

Starting with WCAG standards and other accessibility guidelines from the get-go helps you avoid legal hiccups. These guidelines form the backbone of inclusive web design and ensure you’re in line with regulations like the Americans with Disabilities Act (ADA). Following these rules early on makes compliance one less thing to worry about.

How to Integrate Accessibility into Each Stage of Development

Accessibility can be woven into every phase of your project with just a bit of planning. Here are some actionable steps for developers and designers:

Design with Accessibility in Mind

From the beginning, designers play a critical role in accessibility by setting the structure and visual flow of a project. Here are a few accessibility best practices to incorporate during the design phase:

Color Contrast and Readability

Make sure your text is easy to read against its background. According to WCAG guidelines, regular text should have at least a 4.5:1 contrast ratio, while larger text should have a 3:1 contrast ratio. Testing tools like WebAIM’s Color Contrast Checker make this quick and easy to verify.

Intuitive Layout and Navigation

A clear, intuitive layout ensures all users can navigate your site. Place navigation elements consistently, keep forms simple, and use ample white space to make content easier to digest. These are just a few examples of how to start accessibility early in your design strategy.

Descriptive Text for Buttons and Links

Buttons and links should have descriptive text that tells the user exactly what will happen when they click. Instead of a vague “click here,” label it with “Learn More About Accessibility,” for example. Clear labels improve navigation for users and assistive technologies alike.

Use the Right HTML Tags

Developers can make a huge impact when they start accessibility early by using semantic HTML. Semantic HTML tags—like <header>, <main>, <nav>, and <footer>—convey the structure of your webpage to screen readers and other assistive devices, helping users navigate more effectively.

Proper HTML Markup

Use headings (<h1>, <h2>, etc.) in a logical order, and never skip heading levels. This creates a clear hierarchy for users relying on screen readers and assists everyone in navigating your content.

Descriptive Alt Text for Images

Screen readers rely on alternative text (alt text) to describe images to visually impaired users. Ensure every image with meaningful content has a description that conveys what’s in the image or its purpose. If the image is purely decorative, use an empty alt attribute (e.g., alt=" ") to signal to screen readers that it can be ignored.

ARIA Attributes

Accessible Rich Internet Applications (ARIA) roles and attributes provide additional context where HTML alone may fall short. For example, you can use aria-label to describe the function of a button or aria-live to notify screen readers of real-time changes, like alerts.

Test for Accessibility as You Go

Testing for accessibility throughout development lets you catch issues early before they become a headache to fix. Here’s how to implement regular accessibility checks:

Automated Accessibility Tools

Automated testing tools like Lighthouse and WAVE can detect many common accessibility issues, such as missing alt text or incorrect heading levels. However, keep in mind that while these tools are valuable, they’re not a complete solution.

Manual Testing and Keyboard Navigation

Not all accessibility features can be evaluated by automated tools, so manual testing is essential. Many users with disabilities rely on keyboards instead of a mouse, so test your site using keyboard navigation alone. Make sure users can access all interactive elements (like links, forms, and buttons) and follow a logical tab order.

Screen Reader Testing

Use screen readers like NVDA (for Windows) or VoiceOver (for Mac) to simulate how users with visual impairments experience your site. This will help you catch any missing descriptions, confusing elements, or awkward navigation.

Get Feedback from Users with Disabilities

Involving people with disabilities in testing phases offers invaluable insights. Real users bring unique perspectives that automated tools or simulated testing just can’t replicate.

Plan for Inclusive Testing

Recruit a diverse group of testers who use different assistive technologies, including screen readers, magnification software, and voice control. Their feedback can reveal practical challenges and usability issues you might not anticipate.

Iterate Based on Feedback

Make adjustments based on real-world experience and retest if needed. Accessibility is an ongoing process, and user feedback will help you understand where improvements are necessary.

Regularly Check Your Site

Keeping your site accessible isn’t a one-and-done task—it’s an ongoing process. Regular audits help ensure that your site or app stays up to date with accessibility standards as you make changes or add new features. These check-ups can catch any issues that might have been overlooked during development, or that pop up over time. But audits alone don’t cover everything; that’s where regular monitoring comes in.

Services like a11y.Radar makes a big difference by providing continuous monitoring to help keep your website accessible. With automated checks and detailed reports, a11y.Radar alerts you to potential issues early on so you can fix them before they turn into bigger problems. Plus, it helps you stay aligned with current WCAG guidelines, which are always evolving.

Combining regular audits with a monitoring service like a11y.Radar keeps your site running smoothly and ensures a user-friendly experience for everyone.

Building a Culture of Accessibility

Making accessibility a foundational part of your development culture is key to sustaining these practices long term. Here are some ideas to foster an accessibility-first mindset in your team:

Educate and Train Your Team

Provide training on accessibility guidelines and tools for all team members, from designers and developers to project managers and content creators. Workshops, webinars, and resources on WCAG standards and inclusive design can help create a shared understanding of accessibility’s importance.

Keep Accessibility Resources Available

Ensure your team has access to accessibility checklists, WCAG guidelines, and tool recommendations. Having these resources easily accessible means team members can refer to them at any stage of development.

Regularly Review and Share Accessibility Wins

Celebrate small successes, such as completing accessibility testing on a new feature or receiving positive feedback from an accessibility audit. Recognizing and sharing progress reinforces the importance of this work and motivates your team to continue prioritizing accessibility.

Helpful Tools for Accessibility

There are a variety of helpful tools for accessibility checks and improvements. Here are a few top options:
- WebAIM’s Color Contrast Checker: Verifies that contrast meets WCAG standards for readability.
- Lighthouse and WAVE: An open-source accessibility tool that runs quick checks on your web pages for WCAG compliance.
- Screen Readers: Test with NVDA (Windows), VoiceOver (Mac), and TalkBack (Android) to experience your site from the perspective of visually impaired users.
- ARIA Authoring Practices Guide: This guide provides information on implementing ARIA roles and attributes to enhance assistive technology compatibility.
Ready to Make Accessibility Part of Your Game Plan?

So, there you have it—starting accessibility early isn’t just a nice-to-have; it’s a win-win for everyone involved. By weaving accessibility into your project from day one, you’re not only sidestepping costly revisions but also crafting a better experience for all your users. Plus, you’re keeping things legally sound, which is always a good move.

But we get it—navigating the world of WCAG guidelines and accessibility best practices can feel a bit like decoding a secret language. If you’re ready to start accessibility early in your web development process without complicating your project, let’s talk. Schedule an ADA briefing with us at 216digital, and we’ll guide you through your journey in plain English (no tech jargon). Let’s work together to make the digital world a more inclusive place—one accessible website at a time.
Greg McNeil

October 28, 2024

Legal Compliance, The Benefits of Web Accessibility

Accessibility, Accessibility testing, ADA Compliance, UX, web development
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
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
Digital Accessibility Lawsuit Targets Contractors
The recent case of Bryan Bashin vs. ReserveCalifornia.com has opened the door to a new type of accessibility lawsuit. It’s not just website owners being held accountable—government contractors who build and maintain websites are now in the spotlight too.

This case is important for developers, designers, and accessibility experts working on government websites, as it sets a strong example of what can happen when accessibility isn’t prioritized. More importantly, it serves as a wake-up call for businesses and contractors alike to understand that accessibility is not just an option but a legal necessity. Failure to comply with accessibility standards could result in costly lawsuits and reputational damage.

In today’s digital world, ensuring that everyone, including people with disabilities, can use your website is not just good practice—it’s the law.

Case Overview: A New Direction

Bryan Bashin, who is visually impaired, sued ReserveCalifornia.com, claiming the site was inaccessible to people with disabilities. This violated both the Americans with Disabilities Act (ADA) and California’s Unruh Civil Rights Act. What made this case different? Bashin didn’t go after the website owner, California State Parks—he targeted the contractors who created and managed the site.

ReserveCalifornia.com is a key website for booking campsites and other outdoor activities in state parks. Because it wasn’t fully accessible, users who depend on assistive technologies, like screen readers, had trouble navigating it. By focusing on the developers, Bashin’s lawsuit sends a clear message: if you’re responsible for public websites, you must meet digital accessibility standards—or you could face legal action.

The Laws: Unruh Act and ADA Title II

This case relies on two important laws: California’s Unruh Civil Rights Act and the updated ADA Title II rules for government websites.
- Unruh Act: This California law allows people with disabilities to sue organizations that don’t make their services accessible. Bashin used this law to seek damages, which gave him additional legal options beyond the federal ADA.
- ADA Title II: This part of the ADA focuses on making sure government services, programs, and activities—including websites—are accessible. Recent updates have strengthened these rules, making it clear that public websites must meet accessibility standards. Bashin’s lawsuit shows how these laws are evolving, putting contractors in the spotlight.
What It Means for Web Developers: Widespread Impacts

While this lawsuit happened in California, its effects could reach across the country. The Unruh Act may be specific to California, but ADA Title II applies nationwide. Developers working on public sector projects need to understand that ignoring accessibility could lead to serious risks, especially as more governments crack down on non-compliance.

Developers and contractors are expected to follow the Web Content Accessibility Guidelines (WCAG), the international standard for digital accessibility. Not meeting these standards puts them at risk of lawsuits like Bashin’s, and the $2 million settlement in this case shows that courts are willing to hold developers accountable.

What is the WCAG?

WCAG is the go-to guide for making websites accessible to people with disabilities, such as those who are blind, deaf, or have cognitive challenges. It focuses on making content:
- Perceivable: Users must be able to experience content, whether through text, images, or other formats like captions.
- Operable: Users should be able to navigate the site with different tools like a mouse, keyboard, or voice commands.
- Understandable: The site’s information and operations should be clear and easy to use.
- Robust: The site should work with current and future assistive technologies.
For developers, following WCAG not only ensures legal compliance but also opens websites to a wider audience and improves overall user experience.

Why WCAG Matters

You might ask yourself, “Why should I care about WCAG compliance?” First and foremost, it helps make your website accessible to a wider audience. If your site isn’t usable for people with disabilities, you could be missing out on potential customers. In a digital age where online shopping and information-seeking are essential, excluding anyone based on accessibility is not just unfair—it’s bad for business.

Moreover, the Bashin case shows that failing to meet accessibility standards can lead to legal consequences. As more digital accessibility lawsuits arise, companies that don’t prioritize compliance could face significant financial penalties. By adhering to WCAG guidelines, you protect yourself from legal issues and show that you care about your users.

Best Practices for Developers and Digital Accessibility Experts

Bashin’s case is a reminder that developers and consultants must make digital accessibility a priority from the start. It’s no longer enough to just create a good-looking or functional website—it has to work for everyone, including people with disabilities.

Here’s what developers and business owners should focus on:
- WCAG Knowledge: Work with developers who understand WCAG standards and have experience making accessible sites.
- 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.
- Implement Ongoing Training: Train your staff, especially those involved in website management and content creation, about digital accessibility.
- Ongoing Monitoring: Accessibility isn’t a one-time job. Websites need regular testing to stay compliant. This proactive approach helps prevent potential violations before they lead to costly lawsuits.
- Stay Informed and Up-to-Date: Digital accessibility standards and regulations change over time. Make any necessary updates to your website to remain compliant.
The Bigger Picture: Nationwide Repercussions

The Bryan Bashin vs. ReserveCalifornia.com case is a strong reminder for developers everywhere: accessibility is no longer optional. By holding government contractors accountable for digital accessibility violations, this case sets a powerful precedent. Developers and accessibility experts must be proactive and make sure all public-facing websites—especially those for government services—comply with WCAG and other accessibility standards. The future of digital accessibility enforcement is here, and developers need to stay ahead to avoid costly legal risks.

To avoid the risks of costly legal action and make sure your website is accessible to everyone, now is the time to act. Find out if your website is ADA compliant today by scheduling a 15-minute complimentary website audit and consultation with our experts at 216digital. We can help determine if your site is at risk of a lawsuit and provide fast, effective ADA compliance solutions so you can focus on what matters most: running your business.
Greg McNeil

October 10, 2024

Legal Compliance

Accessibility, ADA Compliance, ADA Website Compliance, Bryan Bashin vs. ReserveCalifornia.com, Unruh Civil Rights Act, web developers
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:
```

<button>Submit</button>
<a href="contact.html">Contact Us</a>

<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:
```

<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

What is ADA Compliance?

Can a Website Be 100% ADA-Compliant?

Accessibility Standards vs. Ongoing Compliance

False Claims by Agencies

What to Look For in an Agency

Setting Realistic Expectations

Secure Lasting Accessibility with 216digital

Why Start Accessibility Planning from the Beginning?

Avoid Costly Retrofits

Enhance User Experience for All

Stay Compliant and Avoid Legal Issues

How to Integrate Accessibility into Each Stage of Development

Design with Accessibility in Mind

Color Contrast and Readability

Intuitive Layout and Navigation

Descriptive Text for Buttons and Links

Use the Right HTML Tags

Proper HTML Markup

Descriptive Alt Text for Images

ARIA Attributes

Test for Accessibility as You Go

Automated Accessibility Tools

Manual Testing and Keyboard Navigation

Screen Reader Testing

Get Feedback from Users with Disabilities

Plan for Inclusive Testing

Iterate Based on Feedback

Regularly Check Your Site

Building a Culture of Accessibility

Educate and Train Your Team

Keep Accessibility Resources Available

Regularly Review and Share Accessibility Wins

Helpful Tools for Accessibility

Ready to Make Accessibility Part of Your Game Plan?

Why Accessibility Matters

Training Your Team

Writing Alternative Text

Ensuring Proper Heading Structures

Creating Accessible Documents

Ongoing Review and Feedback

Wrapping Up

What is ADA Compliance?

Website Design and Development

Use Semantic HTML

Enable Keyboard Navigation

Ensure Sufficient Color Contrast

Provide Descriptive Alt Text for Images

Ongoing Monitoring and Testing

Conduct Regular Accessibility Audits

Engage in User Testing

Content Management and Regular Updates

Provide Content in Accessible Formats

Keep Content Updated

Avoiding Overlays

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

Third-Party Plugins and Widgets

Content Management Systems (CMS)

Outsourced Web Development and Content Creation

User-Generated Content

Strategies for Managing What You Can’t Control

Vetting and Selecting Accessible Vendors

Adding Disclaimers and Providing Alternatives

Foster Communication and Collaboration

Conclusion

The Current Mindset Around Website Accessibility

The Value of Accessibility for All Users

Accessibility as a Business Opportunity

Market Potential

Search Engine Optimization

Mitigate Legal Risk

Accessibility, Innovation, and Creativity for Problem Solving

Connecting Accessibility with Corporate Social Responsibility

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

Why Accessibility Matters for Online Retailers

The Web Accessibility Guidelines

Steps for Online Retailers to Improve Accessibility Right Now

Auditing Retail Sites for Accessibility Issues

Make Visual Content Accessible

Optimize Website Navigation and Structure

Improve Form Accessibility

Stick to `tabindex= "0"` for Most Cases

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