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

  • Accessibility Testing: Prioritize Fixes That Truly Matter

    Accessibility can feel like an overwhelming mountain to climb. Every round of accessibility testing uncovers new problems—some obvious, others hidden deep in the code or design. Where do you start when everything seems important? What if you tackle the wrong issue first, leaving users still stuck?

    These questions are important, and the answers can transform how your website serves all visitors. This guide isn’t just about fixing problems—it’s about focusing your efforts where they matter most. By exploring WebAIM’s four-level severity framework, you’ll learn how to prioritize issues effectively and make meaningful progress toward an inclusive website. Let’s dive in and figure this out together.

    WebAIM’s Four-Level Severity Framework

    WebAIM (Web Accessibility in Mind) categorizes accessibility issues into four levels of severity based on their impact on users. These categories help prioritize fixes by focusing on barriers that significantly affect user experience and access.

    Critical Issues

    Critical issues completely block users from accessing specific parts of your website or performing essential tasks. Addressing these issues should be the highest priority. Examples include:

    • Interactive elements, such as buttons or form inputs, that cannot be reached or activated using a keyboard.
    • Videos without captions, which exclude users who are deaf or hard of hearing.
    • Content that flashes or strobes in a way that could cause seizures for individuals with photosensitive epilepsy.

    To prevent these barriers, developers should prioritize using accessible, native HTML elements and perform thorough accessibility testing, including keyboard and screen reader evaluations, during the development process.

    Significant Issues

    Significant issues do not entirely block access but make interacting with the website cumbersome or frustrating for users. Examples include:

    • Missing visual focus indicators, which make it challenging for keyboard users to identify the currently focused element.
    • Poor color contrast that makes text difficult to read for users with visual impairments.

    These issues disrupt the user experience and should be addressed soon after critical issues to enhance accessibility.

    Moderate Issues

    Moderate issues require users to expend unnecessary effort or time to navigate and interact with web content but do not entirely impede access. Examples include:

    • Lack of properly structured semantic HTML, such as headings and regions, which slows navigation for screen reader users.
    • Generic or vague  descriptive link text (e.g., “Click here”) that fails to describe the destination or action clearly.
    • Animations that lack user controls, making it difficult for some users to focus on other content.

    Comprehensive accessibility testing ensures these moderate issues are identified and addressed to improve usability for all users.

    Minor Issues

    Minor issues do not create significant barriers but contribute to a polished and professional user experience when resolved. Examples include:

    • Slight inconsistencies in focus styles for keyboard navigation.
    • Overuse of ARIA attributes, such as redundant tabindex values on elements that are already focusable.

    While not urgent, fixing minor issues during routine updates demonstrates attention to detail and commitment to accessibility best practices.

    Step-by-Step Guide to Prioritizing Accessibility Fixes

    Feeling unsure where to start? Don’t worry—you’re not alone. Here’s a simple plan to categorize and tackle accessibility issues step by step:

    1. Conduct a Comprehensive Accessibility Audit

    Begin by testing your site with tools like  WAVE and Lighthouse. Then, complement these results with manual testing—navigate your site with a keyboard, try a screen reader, and zoom your browser window. Automated tools catch many issues, but hands-on testing uncovers usability challenges they miss.

    2. Categorize Issues by Severity

    Use WebAIM’s framework to prioritize fixes:

    • Critical issues should top your list, as they directly prevent access.
    • Serious issues come next, addressing significant usability gaps.
    • Moderate and minor issues can be grouped for later phases.

    A structured approach to accessibility testing ensures the most pressing barriers are resolved first.

    3. Consider the Impact on Your Audience

    Think about how each issue affects your users. For example, missing alt text on product images affects a wide audience and should take precedence. If you have user feedback, use it to identify pain points that need urgent attention.

    4. Focus on High-Traffic and High-Value Pages

    Start your efforts where they’ll have the greatest impact:

    • Homepage and landing pages.
    • Key interaction points like forms or checkout pages.
    • Frequently accessed resources such as blogs or FAQs.

    By targeting these areas during accessibility testing, you ensure that the improvements benefit the largest number of users.

    5. Use a Phased Approach for Moderate and Minor Issues

    After resolving critical and serious issues, create a plan for tackling moderate and minor ones. For instance:

    • Update heading structures during new content creation.
    • Fix descriptive link text during routine content reviews.

    Breaking these tasks into smaller phases makes the process manageable and less overwhelming.

    6. Test and Retest

    After making fixes, conduct accessibility testing again. If possible, involve users with disabilities to confirm your solutions work in real-world scenarios. Their feedback is invaluable and can guide future improvements.

    Tools and Techniques for Effective Accessibility Testing

    A good mix of tools and techniques ensures you catch both technical and usability issues. Here’s what to try:

    • Automated Tools: WAVE and Lighthouse are great for spotting common errors.
    • Manual Testing: Use a keyboard or screen reader to experience your site like some users do.
    • Color Contrast Checkers: WebAIM’s Contrast Checker ensures text is easy to read.
    • User Testing: Working with people who have disabilities provides first hand insights.

    Why Prioritization Matters

    Prioritizing fixes has clear benefits:

    • Faster Results: You can address critical barriers quickly and make your site accessible sooner.
    • Better Use of Resources: Time and budget go toward solving high-impact problems.
    • Happier Users: Fixing severe issues first improves usability for everyone.

    Taking things one step at a time, with regular accessibility testing, makes the process less overwhelming and helps you steadily improve your site.

    Final Thoughts

    Accessibility can feel like a big undertaking, but it doesn’t have to be. By focusing on the most critical barriers first and conducting consistent accessibility testing, you can make real progress without burning out. Accessibility isn’t a one-time project—it’s an ongoing commitment to creating a better digital experience for all.

    Imagine how many more people could enjoy your site if it were accessible to everyone. Whether you’re a developer, IT director, or content creator, each step you take helps make the web a more inclusive place.

    And you don’t have to do it alone. 216digital is here to help. From audits to ongoing accessibility testing and monitoring, we’ll guide you every step of the way. Together, we can create a website that’s user-friendly, inclusive, and aligned with the latest standards. Schedule your consultation today, and let’s get started making your site the best it can be!

    Greg McNeil

    January 21, 2025
    How-to Guides
    Accessibility, Accessibility testing, automated testing, How-to, WebAIM, Website Accessibility

  • Why Legal Compliance for Websites Matters in Canada

    Imagine landing on a website and feeling stuck because you can’t navigate it properly, read the content, or interact with its features. Frustrating, right? Now imagine that being your daily reality. For many people with disabilities, this is how they experience the web.

    That’s where web accessibility comes in. It’s about making sure everyone—regardless of ability—can use websites with ease. Not only is this the ethical thing to do, but it’s also a requirement for legal compliance for websites in Canada and beyond.The good news? It’s easier to achieve than you might think, and it comes with benefits that go far beyond ticking a legal box.

    Why Web Accessibility Matters

    Web accessibility ensures that everyone, including people with disabilities, can use your website effectively. In Canada, over one in five people have a disability. By making your website accessible, you’re opening it up to a wider audience, improving your SEO, and building a stronger brand.

    Failing to address accessibility can exclude potential users, harm your reputation, and even lead to fines or lawsuits. But accessibility isn’t just about avoiding risks—it’s about fulfilling legal compliance for websites and showing you care about inclusivity while meeting the needs of all your customers.

    It also gives your business a competitive edge. Many Canadians prefer to support brands that align with their values, including social responsibility. In fact, 25% of Canadian consumers choose brands that demonstrate inclusivity. Making your website accessible shows you’re committed to these values and helps build trust with your audience.

    Accessibility Laws in Canada: What You Need to Know

    Canada’s federal and provincial laws require businesses to make their websites accessible. All these laws align with the Web Content Accessibility Guidelines (WCAG), creating a consistent standard nationwide. Below is a quick overview:

    • Accessible Canada Act (ACA): Aims for a barrier-free Canada by 2040. Federal organizations must remove barriers, including those on websites.
    • Accessibility for Ontarians with Disabilities Act (AODA): Requires Ontario businesses to meet WCAG 2.0 Level AA by 2025. Non-compliance can result in fines of up to $100,000 per day.
    • Accessibility for Manitobans Act: Focuses on removing barriers, including in technology, with WCAG compliance and staff training required.
    • Nova Scotia Accessibility Act: Aims for a fully accessible province by 2030, with penalties up to $250,000 for violations.
    • Accessible British Columbia Act: Requires websites to meet WCAG standards, with full implementation by 2024.

    These laws emphasize legal compliance for websites to create inclusive digital spaces while highlighting the risks of non-compliance, such as significant fines and damage to your brand’s reputation.

    What is WCAG?

    The Web Content Accessibility Guidelines (WCAG), developed by the Wide Web Consortium (W3C), are the global standard for creating accessible websites. These guidelines provide a framework for ensuring that web content is usable by people with a wide range of disabilities, including visual, auditory, physical, speech, cognitive, and neurological disabilities.

    WCAG is built on four core principles, ensuring that websites are:

    • Perceivable: Content must be presented in ways that all users can perceive, whether through sight, hearing, or touch.
    • Operable: Navigation and interaction must be functional using various input methods, such as keyboards, voice commands, or assistive devices.
    • Understandable: Information and the operation of the user interface should be clear and intuitive.
    • Robust: Websites must work with a variety of assistive technologies, including screen readers and text magnifiers

    The guidelines are structured across levels of compliance: A (basic), AA (intermediate), and AAA (advanced). For instance, under laws like AODA, Ontario businesses must meet WCAG 2.0 Level AA standards.

    Why Accessibility is a Smart Move for Canadian Retailers

    Let’s talk business for a minute. Canadians with disabilities represent a market with over CAD 55 billion in annual purchasing power. Making your website accessible means you’re opening your doors to this massive audience.

    Accessibility also tackles common issues like shopping cart abandonment. Did you know the average cart abandonment rate is 70%? For users with disabilities, it’s probably even higher—often due to frustrating website designs. By improving accessibility, you’re making it easier for everyone to shop with you, which can boost your sales.

    On top of that, Canadians expect brands to align with their values. Studies show that 16% of consumers will stop supporting businesses that don’t prioritize social responsibility. Making your site inclusive sends a clear message: you care about your customers, and you’re committed to doing the right thing.

    Why Accessibility Benefits Everyone

    When you make your website accessible, you’re not just meeting legal compliance for websites—you’re gaining a ton of other advantages:

    • Inclusivity: Your website becomes usable for everyone.
    • Better SEO: Search engines love accessible websites, so you’re more likely to rank higher.
    • Wider Audience: You’re opening up your site to millions of Canadians with disabilities.
    • Stronger Brand Image: Being inclusive shows you care about your customers.
    • Legal Protection: You’ll avoid fines and lawsuits, while building a more user-friendly site.

    Steps to Make Your Website Accessible

    Not sure where to start? Here’s a simple game plan to get your site on the right track:

    1. Audit Your Site: Use tools like WAVE and Lighthouse to spot accessibility issues.
    2. Learn WCAG Standards: Get familiar with WCAG 2.0 or 2.1 Level AA guidelines.
    3. Fix the Basics: Add alt text to images, ensure keyboard navigation works, and include captions for videos.
    4. Get Feedback: Work with users who have disabilities to test your site.
    5. Educate Your Team: Train your staff on accessibility best practices.
    6. Call in the Pros: Accessibility consultants can help with trickier issues.
    7. Stay Updated: Keep up with changes in accessibility standards and laws.

    The Risks of Ignoring Accessibility

    Skipping accessibility isn’t just a bad look—it’s risky business. For example, AODA violations can cost corporations up to $100,000 a day. But the financial cost is just part of the problem.

    An inaccessible website can damage your reputation and alienate a large chunk of your audience. People want to support brands that align with their values, and being seen as inaccessible could send them straight to your competitors.

    Building a More Inclusive Future

    Legal compliance for websites is more than a regulatory checkbox—it’s an opportunity to create a welcoming digital space for everyone. By prioritizing accessibility, you not only expand your audience but also demonstrate your commitment to inclusivity and social responsibility. Canadians value businesses that align with their beliefs, and web accessibility is a clear way to build trust and loyalty while fostering meaningful connections with your customers.

    Achieving accessibility doesn’t have to be overwhelming. Simple steps like conducting audits, adhering to WCAG standards, and training your team can make your website more inclusive and user-friendly for all. Accessibility isn’t just about meeting legal requirements—it’s about creating a future where everyone can participate equally in the digital world.

    Ready to take the next step? Partner with 216digital for expert guidance on legal compliance for websites. From comprehensive audits to ongoing support, we’ll help you achieve compliance and build a more inclusive online experience. Schedule your ADA briefing today!

    Greg McNeil

    January 20, 2025
    Legal Compliance
    Accessibility, accessibility laws, AODA, Canada, International Accessibility Laws, Legal compliance, Website Accessibility

  • Accessibility in JavaScript: A Developer’s Guide

    JavaScript has revolutionized web development, enabling developers to create interactive and dynamic websites. However, these enhancements can also introduce significant accessibility barriers if not implemented thoughtfully. For web developers and eCommerce managers, ensuring that JavaScript-powered features are accessible isn’t just about compliance—it’s about creating an inclusive experience for all users.

    This guide explores the essential techniques, testing methods, and best practices to ensure that JavaScript features meet accessibility standards and improve usability for everyone.

    Why Accessibility in JavaScript Matters

    Interactive JavaScript elements, such as modals, dropdown menus, and dynamic content updates, can be challenging for users with disabilities. Poorly implemented JavaScript can break keyboard navigation, confuse screen readers, or cause focus management issues, creating barriers that exclude a portion of your audience.

    By prioritizing accessibility, developers can:

    • Meet Web Content Accessibility Guidelines (WCAG).
    • Improve user experience for everyone, including users with disabilities.
    • Reduce the risk of legal action related to accessibility non-compliance.
    • Expand your website’s audience and customer base.

    Common Accessibility Barriers in JavaScript

    Before diving into solutions, let’s examine some common accessibility pitfalls associated with JavaScript:

    1. Keyboard Inaccessibility: Many JavaScript features rely on mouse interactions, neglecting users who navigate with a keyboard.
    2. Focus Management Issues: Improper handling of focus can disorient users, especially when triggering modals, popups, or dynamic content.
    3. Unlabeled ARIA Roles: Dynamic elements without proper ARIA roles and attributes can confuse screen readers.
    4. Non-Compliant Custom Widgets: Custom components like sliders, tabs, or accordions often fail to replicate the functionality of their native HTML counterparts.
    5. Content Updates Without Notifications: Dynamic content changes that are not announced to assistive technologies leave users unaware of critical updates.

    Best Practices for Accessible JavaScript

    To make your JavaScript-powered features inclusive, follow these best practices:

    1. Ensure Keyboard Accessibility

    All interactive elements must be operable using only a keyboard. Consider the following:

    • Use semantic HTML elements like <button>, <a>, and <input>, which have built-in keyboard support.
    • Add tabindex= "0" to custom elements to make them focusable.
    • Avoid tabindex values greater than 0, which can disrupt the natural tabbing order.
    • Implement custom keyboard interactions for widgets like dropdowns and modals. For example, allow users to close a modal with the Escape key.

    2. Manage Focus Properly

    Focus management is critical when working with dynamic content. Here’s how to handle it:

    • Set Initial Focus: When opening a modal, move focus to the first interactive element within it.
    • Trap Focus: Prevent users from tabbing out of an open modal.
    • Restore Focus: Return focus to the triggering element when the modal is closed.
    • Avoid Focus Loss: Ensure that dynamically added content doesn’t cause focus to disappear.

    3. Use ARIA Responsibly

    Accessible Rich Internet Applications (ARIA) can enhance screen reader compatibility, but misuse can lead to confusion. Follow these guidelines:

    • Use ARIA Roles: Assign roles like role= "dialog" for modals or role= "menu" for dropdowns.
    • Add ARIA States: Use attributes like aria-expanded, aria-hidden, and aria-live to convey element states to assistive technologies.
    • Don’t Overuse ARIA: Avoid using ARIA when semantic HTML can achieve the same result.

    4. Announce Dynamic Content Updates

    For screen reader users, dynamically updated content must be announced clearly:

    • Use aria-live regions to alert users to changes in content.
    • Set the aria-live attribute to “polite” for non-urgent updates or “assertive” for critical changes.
    • Avoid excessive announcements, which can overwhelm users.

    5. Test Custom Widgets Thoroughly

    If you create custom widgets, ensure they mimic the behavior of native elements:

    • Use the WAI-ARIA Authoring Practices Guide as a reference.
    • Make widgets focusable, operable via keyboard, and compatible with screen readers.
    • Test with multiple assistive technologies and devices to ensure broad accessibility.

    Testing JavaScript for Accessibility

    Accessibility testing is an essential part of development. Use the following tools and methods to identify and address accessibility issues:

    Automated Tools

    1. Lighthouse (built into Chrome DevTools): Provides a quick audit of accessibility issues.
    2. WAVE: Highlights accessibility problems directly on your webpage.

    Manual Testing

    Automated tools can’t catch every issue, so manual testing is critical:

    • Keyboard Navigation: Ensure all interactive elements are focusable and operable with the Tab and Enter keys.
    • Screen Readers: Test your website with screen readers like NVDA, JAWS, or VoiceOver.
    • Focus Indicators: Verify that focus indicators are visible and intuitive.

    Real-World Scenarios

    Test your website with users who rely on assistive technologies. User feedback can uncover issues that developers might overlook.

    Meeting WCAG Requirements

    To comply with WCAG, focus on these key guidelines:

    Perceivable

    • Ensure text alternatives for images and icons.
    • Provide captions for video content.

    Operable

    • Make all functionality available via a keyboard.
    • Avoid content that flashes more than three times per second.

    Understandable

    • Use clear labels and instructions.
    • Ensure consistent navigation and predictable interactions.

    Robust

    • Use valid HTML and ARIA attributes to ensure compatibility with assistive technologies.

    Benefits of Accessible JavaScript

    Implementing accessible JavaScript goes beyond compliance. It delivers tangible benefits, such as:

    • Improved User Experience: Accessible features make your website easier to use for everyone.
    • Increased Market Reach: Approximately 16% of the world’s population lives with some form of disability. Accessibility ensures they can engage with your website.
    • Better SEO: Many accessibility improvements, like proper headings and alt text, also enhance search engine rankings.
    • Legal Compliance: Meeting accessibility standards helps protect your business from lawsuits and reputational damage.

    Conclusion

    It is far easier to create accessible JavaScript from the onset rather than trying to fix it as an afterthought if you are armed with the proper knowledge.

    Stay informed about evolving standards like WCAG and remain proactive in integrating accessibility into your development workflow. If you’re unsure if your JavaScript is accessible or are looking for an implementation partner who is focused on accessibility, reach out to 216digital using the contact form below.

    Greg McNeil

    January 17, 2025
    How-to Guides
    Accessibility, How-to, JavaScript, Web Accessibility, web developers, Website Accessibility

  • How to Use JAWS for Screen Reader Testing

    For millions of people with visual impairments, screen readers like Job Access With Speech (JAWS) are essential for navigating the digital world. According to a 2024 WebAIM survey, JAWS continues to lead the way as one of the most widely used screen readers, with 41% of respondents relying on it—outpacing other tools like NonVisual Desktop Access (NVDA) and Apple VoiceOver.

    If you’re focused on building an accessible digital experience, incorporating screen reader testing into your workflow is a must. Not only does it help you create a more inclusive website, but it also supports compliance with accessibility laws like the Americans with Disabilities Act (ADA), WCAG standards, and more.

    In this guide, we’ll break down how to use JAWS for accessibility testing, explore essential commands, and share tips for improving your website’s usability. But first, a quick look at what makes it such a powerful tool.

    What is JAWS?

    JAWS, developed by Freedom Scientific, is a screen reader that converts on-screen text into speech or braille for users who are blind or visually impaired. It allows users to navigate websites, applications, and documents without needing to see the screen.

    JAWS is one of the most popular screen readers globally, making it an essential tool for web accessibility testing. By simulating how users rely on assistive technologies, JAWS helps you identify barriers that may prevent someone from fully engaging with your website.

    Why is JAWS Essential for Accessibility Testing?

    Accessibility testing is about ensuring everyone, regardless of ability, can interact with your website. JAWS plays a vital role in this process because:

    • Real-World Simulation: JAWS mimics how many visually impaired users experience the web, allowing you to uncover issues that automated tools might miss.
    • WCAG Compliance: Testing with JAWS helps ensure your website complies with the Web Content Accessibility Guidelines (WCAG), a global standard for digital accessibility.
    • Improved User Experience: By identifying and fixing accessibility barriers, you create a more inclusive, user-friendly experience for all visitors.

    How to Set Up JAWS

    1. Download and Install JAWS: Visit the Freedom Scientific website to download JAWS. While it’s a paid tool, a 40-minute free demo mode is available for testing purposes.
    2. System Requirements: Ensure your computer meets the system requirements. JAWS works on Windows but does not support macOS directly.
    3. Set Up Your Environment: Use headphones to listen while testing so the screen reader’s output doesn’t interfere with other tasks.
    4. Familiarize Yourself with the Settings: Spend time exploring the settings menu to adjust speech rate, verbosity, and other preferences.

    Key JAWS Commands You Need to Know

    Learning a few essential JAWS commands will make testing faster and more effective. Here are some basics to get you started:

    • Navigating Headings: Press H to jump to the next heading and Shift + H to go to the previous heading.
    • Lists: Press L to move to the next list and I to navigate to individual list items.
    • Links: Use Tab to navigate through links or Insert + F7 to bring up a list of all links on the page.
    • Forms: Press F to jump to the next form field and Shift + F to go to the previous one.
    • Read the Page: Use Insert + Down Arrow to read the page continuously or Arrow Keys for manual reading.

    Step-by-Step Guide to Testing Web Accessibility with JAWS

    Start with the Homepage

    Open your website’s homepage and let JAWS read through it. Check if the content flows logically and whether important elements, like headings and links, are announced correctly.

    Test Navigation

    Use the Tab key to navigate through links and interactive elements. Ensure focus indicators are visible and links are descriptive (e.g., “Learn More” should specify the action or page it leads to).

    Evaluate Headings

    Press Insert + F6 to bring up a list of headings. Verify that they are hierarchical and descriptive, making it easier for users to navigate.

    Check Forms

    Navigate through form fields using the F key. Test for proper labeling, keyboard navigation, and error message announcements.

    Test Images and Alt Text

    JAWS will read the alt text of images. Ensure images have descriptive alt text and that decorative images are marked appropriately (e.g., as null or empty).

    Assess ARIA Roles and Landmarks

    Use JAWS to test ARIA roles, landmarks, and live regions. Verify that these elements provide meaningful context to screen reader users.

    Document Issues

    As you test, document any barriers you encounter, such as missing alt text, unclear link descriptions, or inaccessible forms. Include the steps to replicate the issue and suggest solutions.

    Tips for Effective JAWS Testing

    • Pair with a Keyboard-Only Test: Ensure your website is fully navigable using only a keyboard, as this is crucial for screen reader users.
    • Listen Critically: Pay attention to how JAWS announces content. Confusing or incomplete announcements signal a need for improvement.
    • Focus on User Experience: Think about how easy it would be for a JAWS user to accomplish key tasks on your website, such as making a purchase or finding contact information.
    • Test Multiple Pages: Don’t stop at the homepage. Test a variety of pages, including forms, product pages, and blogs.

    Limitations of JAWS

    While JAWS is an invaluable tool for accessibility testing, it has limitations:

    • Cost: It is expensive, which may be a barrier for smaller teams or independent developers.
    • Learning Curve: The abundance of commands and settings can be overwhelming for beginners.
    • Not a Catch-All Solution: JAWS testing alone cannot guarantee accessibility compliance. It’s essential to pair it with other tools and techniques.

    Why JAWS Should Be Paired with Other Tools

    JAWS provides critical insights, but no single tool can capture all accessibility issues. Consider pairing it with:

    • Automated Testing Tools: Tools like WAVE and Lighthouse can quickly identify common issues, such as missing alt text or low contrast.
    • Other Screen Readers: Testing with multiple screen readers, such as NVDA or VoiceOver, ensures compatibility across platforms.
    • Manual Testing: Involve users with disabilities in your testing process to gain authentic feedback.

    Building a More Inclusive Web

    Testing your website with JAWS is a powerful step toward creating an inclusive digital environment. By understanding how screen reader users interact with your content, you can uncover barriers and make meaningful improvements. Remember, accessibility is not just about compliance—it’s about creating a web that works for everyone.

    While JAWS is a fantastic tool, it should be part of a broader accessibility strategy that includes other tools, user testing, and a commitment to following WCAG guidelines. With the actionable insights from this guide, you’re well on your way to improving your website’s accessibility and making a positive impact on all your users.

    Let’s work together to make the web a more inclusive place!

    Need help with accessibility testing? If you’re ready to take your accessibility efforts to the next level, 216digital can help. Our team specializes in comprehensive accessibility solutions that go beyond surface fixes. Schedule an ADA briefing with us today by using the contact form below. Let’s work together to make your website accessible to everyone.

    Greg McNeil

    January 16, 2025
    How-to Guides, Testing & Remediation
    Accessibility testing, assistive technology, How-to, JAWS, screen readers, user testing

  • Web Accessibility: A Must for Small Businesses

    Ever wonder if your website might be quietly turning people away? 

    As a small business owner, you already have plenty to juggle—so it’s easy to think web accessibility isn’t a top priority. But what if ignoring it costs you sales, hurts your reputation, and even puts you at risk for legal trouble?

    The good news is that it’s never too late to start. By making your site accessible to everyone, you can reach more customers, show you care about every visitor, and stand out in a crowded market. Let’s explore why web accessibility matters and how simple steps can make a big difference for your business.

    What Is Web Accessibility?

    Web accessibility means designing websites so everyone can use them, including people with disabilities. It involves making sure your site works for those relying on screen readers, keyboard navigation, or other assistive tools. This includes people who have visual or hearing impairments, limited mobility, or cognitive differences.

    But accessibility benefits more than just people with disabilities. It also helps those with temporary injuries, older devices, or slow internet, and those who can’t hear audio in noisy places. By following standards like the Web Content Accessibility Guidelines (WCAG), your small business can create a smoother, more inclusive online experience for every visitor.

    Why Accessibility Matters for Small Businesses

    Reach More Customers

    The Centers for Disease Control and Prevention (CDC) says that more than 1 in 4 adults in the United States have some type of disability. That’s a huge group of potential customers who may struggle with a site that isn’t accessible. But accessibility also helps others—like older adults, people with temporary injuries, or those using slow internet.

    By making your site easier to use, you can connect with a bigger, more diverse audience. In fact, studies show that businesses that focus on accessibility can see up to a 20% increase in their customer base.

    Improve Your SEO

    Did you know that accessible websites can rank higher in search results? Search engines favor sites that are easy to read and navigate. Features like clear headings, alt text for images, and proper HTML tags not only help users but also boost your SEO.

    For example, the radio program This American Life added transcripts for each episode, increasing search traffic by almost 7%. By making your site more accessible, you, too, can improve your visibility and attract more organic traffic.

    Build a Better Brand

    People today care about inclusivity. A 2023 study showed that 70% of consumers prefer brands committed to diversity and inclusion. By making your website accessible, you show that you value every customer. This builds trust and loyalty, setting you apart from other businesses.

    Avoid Legal Risks

    The Americans with Disabilities Act (ADA) requires businesses to make their services, including websites, accessible. If you don’t, you might face expensive lawsuits. In 2024, over 4,000 ADA lawsuits were filed, and more than 33% targeted small businesses.

    Why the focus on small businesses now? First, there are more small businesses overall. Second, large companies have been dealing with accessibility lawsuits for years, so many have strong accessibility programs already in place. Settlements can cost anywhere from $10,000 to $100,000—plus legal fees. By making your site accessible now, you can avoid these risks and show customers you care.

    Don’t Let Cost Hold You Back

    Improving accessibility takes time and money, but it doesn’t have to break the bank. Start with the biggest issues, like adding alt text or fixing color contrast. These small changes can make a huge difference. Plus, if you’re in the U.S., you may qualify for the Disabled Access Credit to help with costs.

    Including accessibility from the start also saves money later. You won’t need expensive redesigns or add-ons if you prioritize accessibility now. Accessible sites often run more smoothly, which can reduce hosting and maintenance costs in the long run.

    Practical Steps to Start Your Accessibility Journey

    Feeling overwhelmed? Don’t worry—you can begin with small, simple steps:

    Check Your Site’s Accessibility

    Regularly audit your website for accessibility issues. There are  free tools like WAVE and Google Lighthouse that can help you identify problems, such as missing alt text for images. For a deeper look, think about hiring an accessibility expert.

    Stay Informed and Up-to-Date

     Web Content Accessibility Guidelines (WCAG) and best practices can evolve over time. Stay informed about any changes and make updates to your website as necessary to remain compliant.

    Train Your Team

    Train your staff, especially those involved in website management and content creation, about web accessibility. This helps create a culture of inclusivity and ensures that accessibility remains a priority.

    Offer Accessible Customer Support

    Provide different ways for people to contact you—phone, email, or live chat. Make sure these options are usable by everyone, including people with assistive devices.

    How Accessibility Helps Your Business

    When you make your website accessible, you can:

    • Increase Sales: If your site is easier to use, more people will stay and buy.
    • Boost Customer Loyalty: People remember brands that make them feel included.
    • Strengthen Your Brand: Being known for inclusivity helps you stand out.

    Take the First Step

    Starting your journey toward accessibility doesn’t have to be scary. Take small actions, keep improving, and celebrate your wins. The benefits—like reaching more customers, getting better SEO results, and strengthening your brand—are worth the effort.

    At 216digital, we will help develop a strategy to integrate WCAG 2.1 compliance into your development roadmap on your terms so that you can focus on what matters: your business. Don’t wait—make your website accessible now. Schedule an ADA briefing with us to get started!

    Kayla Laganiere

    January 15, 2025
    The Benefits of Web Accessibility
    Accessibility, ADA Compliance, Benefits of Web Accessibility, Small Business, Website Accessibility

  • Web Accessibility Compliance Under the Equality Act

    Digital accessibility is about ensuring everyone can use your website—no exceptions. While most U.S. website owners focus on ADA compliance, a lesser-known yet impactful piece of legislation from across the pond is the Equality Act 2010. Let’s dive into how this U.K. law impacts your digital space and how you can make your website an inclusive haven for everyone.

    Understanding the Equality Act 2010

    The Equality Act 2010 is a U.K. law aimed at protecting individuals from discrimination in areas like employment, education, and access to services. It ensures equal opportunities for all, regardless of disability, age, gender, race, or religion.

    Although the Act doesn’t mention websites specifically, the “reasonable adjustments” principle applies to digital platforms. If you’re serving U.K. customers, ensuring everyone can navigate your site is your obligation.

    How Does the Equality Act Apply to Web Accessibility?

    Reasonable adjustments under the Equality Act could look like:

    • Screen reader-friendly navigation: Help visually impaired users navigate through your site.
    • Color contrast that pops: Make text stand out for those with visual challenges.
    • Captions and transcripts: Add these to videos and audio files for hearing-impaired users.
    • Keyboard navigation: Ensure people who can’t use a mouse can still explore every corner of your site.

    Failing to meet these expectations could result in legal trouble. Plus, it’s likely to leave users frustrated.

    Why Should U.S. Website Owners Care?

    The internet has no borders. You’re in the Equality Act’s jurisdiction if your website gets U.K. visitors. Accessibility isn’t just about avoiding lawsuits. It’s about:

    • Expanding your audience: More accessibility means more customers.
    • Boosting your brand: Inclusivity is a good look for any business.
    • Improving user experience: Accessible sites work better for everyone. Think faster loading and easier navigation.

    Steps to Achieve Web Accessibility Compliance

    1. Adopt WCAG Standards

    Start with the Web Content Accessibility Guidelines (WCAG 2.1 AA or WCAG 2.2). Key highlights include:

    • Text alternatives: Describe images for screen readers.
    • Adaptable layouts: Ensure your site looks great on all screen sizes.
    • Color contrast: Make text legible against its background.
    • Keyboard navigation: Interact with all the elements on your site without requiring a mouse.

    2. Conduct an Accessibility Audit

    Run your site through tools like WAVE or Google Lighthouse to spot barriers. Pair this with manual testing—real users with disabilities will catch things that machines miss. Pay extra attention to:

    • Navigation menus (don’t let these turn into a digital labyrinth).
    • Forms and fields (labels and instructions should be crystal clear).
    • Media files (videos need captions, images need alt text).

    3. Implement Inclusive Design Practices

    Accessibility isn’t a retrofit—it’s part of the blueprint. Here’s how:

    • Use readable fonts and scalable text sizes.
    • Structure content with clear headings.
    • Make buttons big enough to click without precision aiming.

    4. Train Your Team

    Your developers and designers are the architects of accessibility. Offer training so they can:

    • Write stellar alt text. No “image.jpg” placeholders!
    • Test new features for accessibility.
    • Create forms and tables that work for everyone.

    5. Monitor and Update Regularly

    Web accessibility isn’t a one-and-done deal. Use tools like a11y.Radar for ongoing monitoring. Keep tweaking as tech evolves.

    Benefits of Web Accessibility

    Making your site accessible isn’t just a nice thing to do. It’s smart business. Here’s why:

    • Expand Your Audience: Capture the attention of millions of users with disabilities.
    • Boost SEO: Accessible sites rank better on Google.
    • Enhance User Experience: Accessibility features often make navigation a breeze for everyone.
    • Mitigate Legal Risks: Stay on the right side of the law while avoiding reputation hits.

    Common Pitfalls to Avoid

    • Relying Solely on Overlays: Widgets can lead to more barriers for visually impaired users and future litigation.
    • Ignoring Mobile Users: Accessibility applies to all devices.
    • Skipping User Testing: Automated tools miss the human touch.

    Take Action Today

    The Equality Act 2010 highlights the importance of inclusivity, even in the digital world. By embracing accessibility, you’re not just complying with laws—you’re inviting everyone to do business with you.

    Start by adopting WCAG standards, auditing your site, and building accessibility into your design process. Need help? Tools like a11y.Radar and expert resources can guide you every step of the way.

    Remember, making your website accessible isn’t just about obligation—it’s an opportunity to connect with a broader audience and create a truly welcoming online space.

    Kayla Laganiere

    January 14, 2025
    Legal Compliance
    Accessibility, Equality Act, International Accessibility Laws, WCAG, Web Accessibility

  • WAVE Accessibility Tool: A Step-by-Step Guide

    Have you ever clicked on a website and felt completely lost—like the menus were in hidden corners, or the text was so tiny you had to squint? Sometimes, the root of that problem is an accessibility issue. Put simply, a site might not be built in a way that everyone can use comfortably. That’s where WAVE comes in. WAVE (short for Web Accessibility Evaluation Tool) helps detect areas on your website with barriers and provides you with tips on how to fix them. It’s free, easy to use, and super handy for making sure your site works for everyone. 

    If you’ve never heard of WAVE or used it before, don’t worry—you’re not alone! In this guide, we’ll break it down step by step and show you how it can make your website better, clearer, and more user-friendly. Let’s dive in!

    What Is the WAVE Accessibility Tool?

    So, what exactly is WAVE? Created by WebAIM, this free tool looks for possible problems on any webpage and points them out. Think of it like a traffic light system for your site’s accessibility. If there’s a red light, it means an issue needs immediate attention—like missing text descriptions for images (which can be a big deal for screen reader users). If something’s in yellow, it could be a warning sign that may or may not become a problem.

    But what makes WAVE so remarkable is its visual approach: it marks up your page with icons and colored boxes so you can spot issues right where they happen. It also highlights structural elements—like headings, landmarks, and ARIA attributes—to ensure your website is logically organized and easy to navigate. No more digging through code and guessing what went wrong. Just click, glance, and fix!

    Key Features of WAVE Accessibility Tools

    Browser Extensions

    If you’re a fan of quick-and-easy solutions (who isn’t?), you’ll love WAVE browser extensions. You can add them to Chrome or Firefox with just a few clicks. Once that’s done, go to any webpage, hit the WAVE icon in your toolbar, and boom—you get an instant report without switching tabs. It’s perfect for those of us who like minimal fuss.

    Online WAVE Tool

    If extensions aren’t your thing or you’re using a borrowed computer, don’t worry. WAVE also has an online tool. All you have to do is visit the WAVE website, copy the link to the page you want to test and paste it. Within seconds, you get a full-page view loaded with accessibility markers. This approach keeps you flexible, especially if you switch devices a lot.

    Visual Feedback

    One of the best parts of WAVE is how it breaks down what might be going wrong. Errors, warnings, and even things that are working just fine each get their own unique symbols. You’ll see icons, colors, and outlines placed directly on top of the webpage elements. This visual overlay system helps you zero in on issues (like missing alt text or poor contrast ratios) more quickly than poring over raw code.

    Accessibility Panels

    After WAVE loads your page, you can explore different panels to learn more:

    • Summary Panel: This shows you how many errors, alerts, and features were found.
    • Structure Panel: Gives you a rundown of your headings, lists, and how the page is organized. This is super helpful for seeing whether screen readers will read your page in a logical order.
    • Details Panel: Goes deeper by explaining each issue and how to fix it. If you’re the type of person who likes step-by-step instructions, you’ll feel right at home here.

    How to Use WAVE Effectively

    Getting Started

    First things first: pick your favorite way to use WAVE. If you like convenience, grab the Chrome or Firefox extension. If you’d rather not install anything, head straight to the online WAVE site. From there, it’s as simple as entering your page’s URL. Once you see your page covered with icons, you’ll know you’re in business.

    Running an Analysis

    When you launch WAVE, it basically scans the webpage in front of you and marks all the potential issues. Think of it like a helpful friend pointing out the spinach in your teeth—except here, it’s pointing out an image without alt text or headings that aren’t in the right order. You might see red icons (these are errors), yellow icons (warnings), or other symbols that highlight good features, too. Scroll down to make sure you don’t miss any marks hiding at the bottom of the page.

    Interpreting Results

    Getting an A+ in accessibility can feel like unlocking a secret achievement! But sometimes, your first scan with WAVE might bring up a list of errors longer than you’d hoped. Don’t panic. Errors typically mean your site is missing something important, like proper labels for form fields or headings that make sense. Warnings, on the other hand, are more like gentle taps on the shoulder, suggesting a potential issue.

    You’ll also see that WAVE links these issues to specific guidelines from the WCAG (Web Content Accessibility Guidelines). That might sound fancy, but it basically helps you follow official rules, so you’re not just guessing how to fix stuff.

    Prioritizing Fixes

    So, you’ve got a bunch of red and yellow icons—where do you even start? Focus on the red ones first (the errors). Fix things like missing alt text or form labels right away since those directly affect how people access and use your content. Next, tackle the warnings. You might spot patterns, like repeated heading problems across several pages. Fixing them in one swoop can save you a lot of time.

    Exporting and Sharing Results

    If you’re part of a team, you’ll probably want to show your coworkers what needs fixing. WAVE makes this easy—there’s an option to export the report or share a link to the scanned page. This can be a lifesaver when you need to prove to a manager that certain design choices might be causing trouble for users. Plus, it keeps everyone on the same page—literally!

    Strengths and Limitations of WAVE

    WAVE is user-friendly, offers quick visual feedback, and gives both beginners and experienced developers something to love. It’s like having a built-in teacher who highlights mistakes and nudges you toward the right answers.

    What It Does Well

    • Highlights errors and warnings right on the page.
    • Teaches you about accessibility by explaining each issue.
    • Checks for essential elements like color contrast, heading hierarchy, and ARIA attributes.
    • It works within your browser or online, so no extra files are needed.

    Where It Falls Short

    • Single-Page Focus: WAVE is excellent for testing one page at a time but isn’t designed to crawl an entire site in one go.
    • Scope of Automation: Automated checks can’t evaluate everything—like the clarity of your alt text or how user-friendly your navigation is. Manual testing is still essential, especially for things like complex JavaScript interactions.
    • Not a Magic Fix: WAVE won’t fix issues for you—it only shows you what to work on. Consider it a trusty sidekick, not a fully automated superhero.

    Best Practices for Using WAVE

    Combine with Other Tools

    While WAVE is incredible, consider also using tools like Google Lighthouse or Accessibility Radar (a11y.Radar). The more eyes on your site, the better.

    Manual Testing Matters

    Automated tools can catch a lot of problems, but human testing can uncover hidden barriers—like confusing navigation menus or unclear copy. Think of WAVE as your first line of defense, not the only line.

    Train Your Team

    If you’re not the only one updating the website, make sure others know how to read and understand WAVE reports. Accessibility is more manageable when everybody’s on board.

    Start Early

    Don’t wait until your site goes live to test for accessibility. Use WAVE during the design phase so you can catch significant issues before they become big headaches.

    Make It Part of a Bigger Strategy

    Use WAVE as the baseline for your accessibility plan. Re-run tests after making changes and encourage feedback from real users. Over time, you’ll build a more inclusive experience.

    That’s a Wrap: Waving Goodbye to Barriers

    Making your site accessible is really about welcoming everyone—whether they use screen readers, need larger text, or want a smoother experience. WAVE takes the guesswork out of finding those hidden roadblocks. It shows you exactly where to focus your efforts, helping you make fast progress toward a more inclusive website.

    As powerful as WAVE is, remember that it’s only one piece of the puzzle. Combining WAVE’s insights with manual testing, user feedback, and other evaluation tools like Axe or Lighthouse will give you a well-rounded approach to accessibility. Over time, you’ll find that accessibility isn’t just about rules and standards—it’s about caring for the people visiting your site. Happy scanning, and may your website become a place where everyone feels right at home!

    Greg McNeil

    January 13, 2025
    Testing & Remediation, Web Accessibility Monitoring
    Accessibility, Accessibility testing, automated testing, WAVE, Web Accessibility

  • The EAA Lands in June

    The European Accessibility Act (EAA) is set to shake things up for businesses operating in the European market. Starting in June 2025, the EAA will require companies to meet strict accessibility standards for websites, mobile apps, and digital products. If you’re working in or serving customers in the European Union (EU), this isn’t just about meeting requirements—it’s a chance to grow your reach and create better digital experiences for everyone.

    Let’s dive into what the EAA is all about, why it matters, and how you can get ready for this significant change.

    What is the European Accessibility Act?

    The EAA is a groundbreaking law aimed at ensuring equal access to products and services across the European Union. Enforced by individual EU member states, it applies to a wide range of digital and physical products, including websites, mobile apps, software, and e-commerce platforms. The primary goal of the EAA is to eliminate barriers for people with disabilities and promote inclusivity and equal participation in society.

    The EAA establishes clear accessibility requirements for businesses operating within the EU and harmonizes standards across member states. This ensures consistent accessibility efforts while simplifying compliance for companies working across the EU. For online businesses, compliance is guided by EN 301 549, the technical standard that serves as the foundation for meeting EAA requirements.

    Scope of the EAA

    The EAA’s web accessibility covers a broad range of applications such as:

    • Websites and mobile apps
    • E-books and online publications
    • ATMs, ticketing, and check-in machines
    • E-commerce platforms

    EN 301 549: The Technical Backbone of the EAA

    At the heart of the EAA’s web compliance is EN 301 549, a technical standard based on W3C’s Web Accessibility Guidelines (WCAG). These standards provide a clear framework for ensuring accessibility in websites, software, mobile apps, and other ICT products. By following WCAG 2.1 AA guidelines, companies can make their digital content usable by individuals with visual, auditory, cognitive, or motor impairments.

    Suppose your e-commerce site, cloud software, SaaS platforms, or mobile apps already meet WCAG 2.1 AA requirements. In that case, they likely comply with EN 301 549—and, by extension, the EAA.

    Are There Any Exceptions to EAA Compliance?

    Although the EAA imposes strict accessibility standards, it recognizes that achieving complete compliance may sometimes be impractical. Under the “Disproportionate Burden Clause,” organizations can request exceptions if they show that meeting the requirements would impose an undue hardship. However, this doesn’t serve as a blanket exemption—companies must provide thorough documentation and clear justification for why they cannot reasonably comply. Even when an exception is granted, they are still expected to take every feasible step to maximize accessibility.

    Why the EAA Matters

    The EAA’s focus on accessibility marks a significant step forward in creating an inclusive digital environment across the EU. For businesses, compliance isn’t just a legal requirement; it’s an opportunity to reach a broader audience and demonstrate a commitment to inclusivity. As the EAA reshapes the accessibility landscape, it’s time to evaluate your products and services to ensure they’re ready to meet the new standard.

    Here’s why it matters:

    It’s Legally Required

    The EAA is not just a guideline; it’s enforceable legislation that comes into effect in June 2025. Businesses that fail to comply could face fines, legal consequences, and even damage to their reputation. Taking action early gives you ample time to address challenges and ensure your digital products meet the required standards without unnecessary stress.

    Reach a Larger Audience

    Over one billion people worldwide live with disabilities, representing a significant—yet often underserved—consumer base. Of these, more than 135 million are in the EU, constituting a substantial market segment businesses cannot ignore. Making digital services accessible fulfills a critical need and demonstrates your brand’s commitment to inclusivity and respect for diverse audiences.

    For U.S. businesses operating in the EU, compliance with EN 301 549 ensures alignment with the EAA’s requirements, preventing legal and reputational risks.

    Better User Experience for Everyone

    Accessibility improvements don’t just benefit people with disabilities; they enhance usability for all users. Features like simplified navigation, larger text options, and better color contrast make digital platforms easier for everyone. These changes lead to more satisfied customers and improved engagement.

    Boost SEO and Discoverability

    Accessibility isn’t just about compliance; it’s also a strategic way to improve your online presence. By following EN 301 549 and WCAG 2.1 AA standards, your website becomes more search engine-friendly, with features like descriptive alt text, clean navigation, and clear content structure. These enhancements make it easier for search engines to index your site, improving rankings and visibility. Embracing accessibility ensures your digital content is discoverable by a broader audience while meeting the compliance standards of the EAA.

    How to Prepare for the EAA

    Preparing for the EAA might seem overwhelming at first, but tackling it step by step makes the process manageable. Here’s how to get started:

    • Audit Your Digital Accessibility: Evaluate your digital products and services against EN 301 549 and WCAG 2.1 AA guidelines. Use tools or hire experts to identify any accessibility gaps.
    • Fix What Needs Fixing: Once you’ve pinpointed the issues, prioritize fixes like:
      • Adding alt text to images
      • Ensuring keyboard navigation works seamlessly
      • Improving color contrast
      • Testing for mobile responsiveness
    • Train Your Team: Accessibility isn’t a one-time project—it’s an ongoing effort. Train your team on accessibility basics, like creating user-friendly designs, writing clear content, and following coding best practices.
    • Use Accessible Tools: Make sure your design and development tools have built-in accessibility features. These tools can catch common issues early and save you time.
    • Work with Accessibility Pros: If accessibility isn’t your area of expertise, partner with professionals specializing in it. They can guide you through audits, fixes, and long-term compliance strategies.
    • Keep an Eye on Accessibility: Accessibility needs regular maintenance. Review your digital products often, especially when you update or add new features, to make sure everything stays compliant.

    Overlays: The Quick Fix That Falls Short

    Many businesses are attracted to accessibility overlays—automated tools that promise instant compliance. However, as the European Commission noted in 2023, “Claims that a website can be made fully compliant without manual intervention are unrealistic.” 

    While overlays may tackle surface-level issues, such as adding alt text or color contrast adjustments, they often fail to address deeper, more complex accessibility challenges like proper keyboard navigation, dynamic content handling, or compatibility with assistive technologies. These limitations mean overlays can leave users with disabilities frustrated and websites at risk of non-compliance. Real accessibility demands both automated solutions and hands-on human expertise.

    The Upside of Accessibility

    Meeting the EAA’s requirements isn’t just about avoiding fines. It’s an opportunity to:

    • Boost Your Brand: An accessible business is seen as inclusive and forward-thinking.
    • Build Customer Loyalty: People appreciate companies that make an effort to include everyone.
    • Be Ready for the Future: As accessibility expectations grow, being ahead of the curve will pay off.
    • Expand Your Market: Serving more people means more potential customers and growth.

    Don’t Wait: Turn Accessibility into an Advantage

    The European Accessibility Act is a big deal, but it’s also a chance to improve your business in meaningful ways. The June 2025 deadline might seem far off, but it’ll be here before you know it. Waiting until the last minute could lead to rushed fixes, higher costs, and unnecessary stress. Starting now ensures you have time to make thoughtful, lasting improvements.

    By aligning with EN 301 549 and integrating accessibility into your workflows, you’ll not only meet the EAA’s standards but also create better experiences for your customers. Embracing accessibility can boost your brand, build customer loyalty, and expand your market while positioning your business as inclusive and forward-thinking.

    Take the first step today by scheduling an ADA briefing with 216digital. Our experts can guide you through compliance, helping you stay ahead of the curve and turn accessibility into a strategic advantage.

    Greg McNeil

    January 10, 2025
    Legal Compliance
    Accessibility, EAA, European Accessibility Act, International Accessibility Laws, Web Accessibility, Website Accessibility

  • Writing Code for Web Accessibility: A Guide for Developers

    Coding often feels like speaking a secret language—it’s complex, intricate, and incredibly rewarding. Including web accessibility in your workflow isn’t about reinventing the wheel; it’s about refining your craft to ensure your work reaches everyone. Accessible code builds on the practices you already know, with small adjustments that make a significant impact. In this guide, we’ll explore actionable steps to help you create accessible, user-friendly websites that leave no user behind.

    What Is Accessible Code?

    Accessible code ensures everyone can interact with your website, regardless of ability. Following standards like the Web Content Accessibility Guidelines (WCAG) helps create an inclusive space for all users. By integrating accessibility, you’re not just meeting legal requirements but building a better, more welcoming web experience.

    Accessibility encompasses several aspects, including:

    • Visual Accessibility: Making visual content perceivable by users with visual impairments, often through tools like screen readers.
    • Interactive Usability: Ensuring interactive elements work seamlessly with keyboards, touchscreens, or voice commands.
    • Content Clarity: Structuring information logically to assist users with cognitive impairments.
    • Compatibility: Writing robust code that works with assistive technologies and adapts to future updates.

    The Four Golden Rules of Accessibility: POUR

    The foundation of accessible code is rooted in WCAG’s four guiding principles: Perceivable, Operable, Understandable, and Robust (POUR). These principles ensure your website is usable for everyone. Let’s break them down:

    • Perceivable: Users must be able to see or hear content.
      • Provide text alternatives for non-text content like images (e.g., alt text).
      • Use captions and transcripts for multimedia content.
    • Operable: Interactive elements must be usable with any input device.
      • Ensure keyboard navigation works for all features.
      • Include features like skip-to-content links to improve navigation.
    • Understandable: Content and interfaces should be easy to comprehend.
      • Label forms clearly and provide concise instructions.
      • Write meaningful error messages that guide users in resolving issues.
    • Robust: Code should be compatible with a wide range of assistive technologies.
      • Use valid, semantic HTML to ensure content is interpretable.
      • Test compatibility with assistive technologies like screen readers.

    Adhering to these principles ensures compliance with accessibility standards while enhancing usability for everyone.

    Best Practices for Writing Accessible Code

    Here’s how to apply accessibility principles to your code:

    1. Use Semantic HTML

    Semantic HTML provides structure and meaning to your content. Elements like <header>, <nav>, <main>, and <footer> improve navigation for screen readers and other assistive technologies.

    Instead of:

    <div onclick="doSomething()">Click me</div>

    Use:

    <button onclick="doSomething()">Click me</button>

    Semantic tags enhance usability and reduce the need for ARIA roles, ensuring better compatibility.

    2. Make Forms Accessible

    Forms are a common source of frustration for users with disabilities. Pair input fields with <label> tags to provide clear context:

    <label for="email">Email:</label>
<input type="email" id="email" name="email">

    For added guidance, use aria-describedby for hints:

    <p id= "emailHint"> We'll never share your email.</p>
<input type="email" id="email" aria-describedby="emailHint">

    Additionally:

    • Group related fields with <fieldset> and <legend>.
    • Include real-time error validation with accessible alerts.

    3. Ensure Keyboard Navigation

    Interactive elements should be operable using a keyboard. Use logical HTML structures and the tabindex attribute sparingly to create a natural focus order.

    Example:

    <button tabindex="0">Focus me</button>

    Avoid negative tabindex values unless necessary, as they can disrupt navigation.

    4. Add Alt Text to Images

    Alt text makes images accessible to screen readers. Describe the content succinctly:

    <img src= "puppy.jpg" alt= "A golden retriever puppy playing with a ball">

    If an image is decorative, use an empty alt attribute (alt= "") to skip it for screen readers.

    5. Mind Your Colors

    Color contrast impacts readability. Use tools like Contrast Checker to verify that text is legible. Avoid using color as the sole means of conveying information. For example:

    <span style="color: red;">Required field</span>

    Should also include:

    <span class="required" aria-label="Required field">*</span>

    6. Use ARIA Wisely

    Accessible Rich Internet Applications (ARIA) roles can enhance functionality but should be used sparingly. Stick to semantic HTML whenever possible. Common ARIA roles include:

    • role= "alert" for dynamic notifications.
    • aria-expanded for collapsible menus.
    • aria-live for real-time updates.

    7. Don’t Forget Multimedia

    Provide captions for videos and transcripts for audio content. Respect user preferences for reduced motion by using the prefers-reduced-motion media query:

    @media (prefers-reduced-motion: reduce) {
  animation: none;
}

    Testing Your Accessible Code

    Even the best code needs testing. Use these methods:

    • Automated Testing: Tools like Google Lighthouse or WAVE can identify common issues.
    • Manual Testing: Navigate your site using only a keyboard or a screen reader (e.g., NVDA, VoiceOver).
    • User Testing: Get feedback from users with disabilities to uncover real-world issues.

    Testing should be an ongoing part of your development process to catch and fix issues early.

    Challenges Developers Face—and How to Overcome Them

    Challenge: Understanding WCAG Guidelines Can Be Intimidating

    Solution: Start with the essentials. Focus on foundational elements like semantic HTML, alt text, and keyboard navigation. Once these are second nature, dive deeper into more complex guidelines—one step at a time.

    Challenge: Debugging ARIA Roles Can Be Tricky

    Solution: ARIA can feel like uncharted territory, but tools like ARIA Authoring Practices and automated testing tools (e.g., Google Lighthouse or WAVE) make it manageable. Stick to semantic HTML where possible to minimize the need for custom roles.

    Challenge: Maintaining Accessibility During Updates

    Solution: Accessibility isn’t a one-and-done task; it’s an ongoing commitment. Make accessibility checks part of your QA process and leverage tools like WAVE to identify issues after every update. Document accessibility practices in your team’s workflow to keep everyone aligned.

    Challenge: Balancing Deadlines with Accessibility Goals

    Solution: Tight deadlines can pressure teams to deprioritize accessibility. Combat this by integrating accessibility from the start of a project rather than treating it as an add-on. Small, consistent efforts save time in the long run and prevent last-minute fixes.

    By acknowledging these challenges and embracing practical solutions, developers can turn obstacles into opportunities to create better, more inclusive websites.

    Keep Learning and Building Accessible Code

    Web accessibility is a continuous journey—and an exciting one. As developers, we thrive on solving problems and improving our craft, and accessibility is no different. By staying updated with trusted resources like WebAIM, MDN Web Docs, and the A11y Project, you can keep sharpening your skills and pushing the boundaries of what’s possible. Engage with communities, take courses, and embrace every opportunity to learn. Every small step you take makes the web a more inclusive place for everyone.

    Writing accessible code is about thoughtful, inclusive choices that enhance user experiences. Start with the basics, make accessibility an integral part of your workflow, and let learning drive your improvements. The impact of your efforts extends far beyond compliance; it creates meaningful connections and opens your work to all users, regardless of ability.

    Ready to take your commitment further? Schedule an ADA briefing with 216digital. Our team specializes in tailored web accessibility solutions, helping you mitigate risks and create a more inclusive online presence. Let’s build a better web—together.

    Greg McNeil

    January 9, 2025
    How-to Guides
    accessible code, ADA Compliance, How-to, WCAG, web developers, web development

  • Accessibility Extensions: How Reliable Are They?

    Making a website that everyone can use is an important goal for content creators, website owners, and developers. People who have disabilities, such as vision or hearing impairments, should have the same access to information and services as anyone else. Web accessibility removes barriers so all users can enjoy and navigate online content. One tool that can help is accessibility extensions—browser add-ons or standalone software that scans a website for common accessibility problems. But can you rely on these extensions alone to achieve a fully inclusive site? 

    In this article, we’ll discuss how these tools work, where they shine, and where you need to look beyond them to create truly accessible websites.

    What Are Web Accessibility Extensions?

    Web accessibility extensions are programs that you add to your internet browser or use as separate tools to check how well a website follows specific accessibility standards. These rules often come from guidelines like the Web Content Accessibility Guidelines (WCAG) set by the World Wide Web Consortium (W3C). 

    The extensions scan a webpage’s code and point out things that might make it hard for users with disabilities to use. For example, if a picture is missing a text description (called “alt text”), an accessibility extension might highlight that. Or, if your text color and background color are too similar, the extension might let you know that the contrast is poor.

    Popular Accessibility Extensions

    There are many accessibility extensions to choose from, and each has its own strengths:

    1. Google Lighthouse: This free, open-source tool is built right into Google Chrome’s Developer Tools. It checks your website for performance, accessibility, and search engine optimization (SEO) issues. Lighthouse’s accessibility report can show you issues like missing labels on form fields and low color contrast.
    2. BrowserStack: While not strictly an extension, BrowserStack is a popular platform that lets you test your website on many devices and browsers. It also includes accessibility checks so you can spot problems before your site goes live.
    3. Color Enhancer: This Chrome extension is helpful for testing different color settings. It simulates how someone with color vision challenges might see your site, helping you adjust your color palette.
    4. Total Validator: This tool checks for multiple issues at once. It looks for accessibility problems, HTML errors, and even spelling mistakes. It’s useful if you want an all-in-one solution.

    Why These Tools Are Helpful

    Accessibility extensions can save time and money, especially in the early stages of website development. They’re usually easy to install and use, often with just a few clicks. Many come at no cost, making them friendly for anyone’s budget. They also highlight the low-hanging fruit—simple issues you can fix quickly, like missing alt text, mislabeled buttons, or poor contrast.

    When used regularly, these extensions can become part of your workflow. For instance, you can run Google Lighthouse each time you make a new page, making sure you don’t introduce new errors. Color Enhancer can be switched on while you design graphics, so you can instantly check your chosen colors. By catching issues early, you reduce the risk of more significant accessibility barriers piling up later.

    The Limits of Accessibility Extensions

    While these tools can be beneficial, they can’t do everything. Accessibility is about real-life user experience. Extensions might catch many problems, but there are several reasons they might not be enough:

    1. They Don’t Catch All Errors: Some issues are complicated and need a human eye. For example, a tool might not realize that your navigation menu is confusing or that your form error messages aren’t explained well.
    2. Automation Can Miss Nuances: An extension may mark something as fine even if it’s not easy to use in practice. Think of a button that looks accessible but is tricky to reach using keyboard navigation. Human testing would catch that, but an automated tool might not.
    3. Limited Customization: Some extensions can’t adapt to specialized needs. If your website has complex interactive elements or unique design features, an extension might not provide accurate feedback.

    Practical Steps for Using Accessibility Extensions

    To get the most out of your accessibility extensions, you can follow a simple process:

    1. Install One or More Extensions: Pick a couple that make sense for your workflow. For a developer, Google Lighthouse is a solid choice; Color Enhancer might be more fitting for a designer.
    2. Run Automatic Scans Often: When you add new content or launch a new feature, rerun the extension. This helps you fix issues before they become widespread.
    3. Review the Reports: Look at what the tool says and note any errors. For example, if Lighthouse tells you there’s missing alt text, add it immediately.
    4. Cross-Check with Another Tool: Since no single extension catches all issues, try a second tool to see if it spots something different. Combining tools gives you a more complete picture.
    5. Document Your Changes: Keep track of what you fix. If your team grows or you step away from a project, the next person will know what was corrected and why.

    Going Beyond Extensions: Manual Testing & Real Users

    Even the best technology can’t replace the insight of real people. To go beyond automated checks, try these methods:

    1. Manual Testing: Walk through your website with a keyboard only (no mouse). Can you reach all interactive elements, like menus, links, and form fields? Check if focus indicators (the outlines around clickable items) are visible so users know where they are on the page.
    2. Test with Assistive Technologies: Screen readers like NVDA (free for Windows) or VoiceOver (built into macOS and iOS) let people with visual impairments hear text read aloud. Try them out on your site. Can you follow the page structure logically? Are buttons and links announced clearly?
    3. Get Feedback from Users: Invite people with disabilities to test your site. This can be done in person or through online platforms. Their first-hand experiences will show you things no tool can catch.
    4. Follow WCAG Guidelines: The W3C’s Web Content Accessibility Guidelines provide detailed advice about making websites more inclusive. Follow these guidelines to ensure you’re meeting recognized standards.
    5. Keep Checking Over Time: Accessibility isn’t a “one-and-done” situation. Technology changes, and so does your site’s content. Regular audits help you stay current with new requirements or tools.

    Professional Tools and Services

    For more significant sites or those in specific industries, it can help to invest in professional tools or services. Some companies offer advanced scanning that runs on a schedule and sends alerts when accessibility issues are found. Others offer expert audits, which include hands-on testing by accessibility specialists. Examples include:

    • a11y.Radar: Provides automated scans, real-time issue tracking, and actionable developer guidance. It integrates with CI/CD workflows and offers analytics to monitor progress and prioritize critical fixes.
    • Siteimprove: This includes monitoring and scoring your site based on accessibility, SEO, and more.
    • Specialized Accessibility Consultancies: Hiring an experienced team can help with complex sites or strict legal requirements.

    Additional Resources to Explore

    If you’d like to learn more or go deeper into this topic, here are a few helpful links:

    • W3C Web Accessibility Initiative: Offers guidelines, techniques, and tutorials on how to create an accessible website.
    • WebAIM: Contains articles, tools (like the WAVE Extension), and a community forum focused on accessibility.
    • A11y Project: A community-driven site with guides, checklists, and news about web accessibility.
    • Section508.gov: Focuses on accessibility laws and standards in the United States.

    Conclusion

    Accessibility extensions are a great starting point. They quickly show you common issues and give you ideas on what to fix. Yet, relying on them alone doesn’t ensure everyone can use your site. By also doing manual checks and involving people with different abilities, you can create a richer, more usable online experience. Combining automated scanning, real-world testing, and guidelines like WCAG gives you the best chance of meeting everyone’s needs.

    Remember, building an inclusive website is an ongoing journey. Updates to your site, new browser versions, and changing assistive technologies mean there’s always something more to learn. Encourage your team to see accessibility as a shared responsibility. Keep your tools up to date, document your progress, and work together to reduce barriers for all. In the end, these efforts not only help people with disabilities, but they also make your site more user-friendly for everyone.

    If you’re ready to take the next step in making your website accessible, 216digital can help. From expert audits to ongoing monitoring with our a11y.Radar tool, we’re here to guide you every step of the way. Contact 216digital today and ensure your website meets the highest standards for accessibility, usability, and inclusivity. Together, we can build a web that works for everyone.

    Greg McNeil

    January 8, 2025
    Testing & Remediation
    Accessibility, accessibility extensions, evaluation tools, Website Accessibility, Website Accessibility Tools
Previous Page
1 … 6 7 8 9 10 … 25
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.