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
  • Web Accessibility: Making Drop-Down Menus User-Friendly

    Drop-down menus are a staple in website navigation, offering a compact way to organize and access multiple links. But while they streamline user experience, they can also create significant barriers if not designed with accessibility in mind. For users who rely on screen readers, keyboard navigation, or other assistive technologies, a poorly implemented menu can turn a simple browsing experience into a frustrating ordeal.

    This article will guide website owners, developers, and content creators on how to create accessible drop-down menus that enhance usability for all users. We’ll cover foundational accessibility principles, best coding practices, and testing methods to ensure your menus are inclusive and user-friendly.

    Foundational Accessibility Principles for Drop-Down Menus

    To build accessible drop-down menus, start by understanding core web accessibility principles. Here are the three most critical aspects:

    1. Use Semantic HTML

    Semantic HTML ensures that content is meaningful and properly interpreted by assistive technologies. Instead of using <div> or <span> elements for interactive components, use appropriate HTML elements like:

    • <nav> for navigation sections
    • <ul> and <li> for menu structures
    • <button> to toggle drop-down visibility

    For example:

    <nav>
      <button aria-haspopup="true" aria-expanded="false" id="menuButton">Menu</button>
      <ul id="menu" hidden>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    2. Ensure Keyboard Navigation

    Users who navigate via keyboard should be able to open, close, and move through the menu using the Tab and arrow keys. Ensure the following behaviors:

    • The menu should open with Enter or Space when focused on the toggle button.
    • The Esc key should close the menu.
    • Arrow keys should allow navigation within the menu items.

    3. Use ARIA Roles and Attributes Wisely

    ARIA (Accessible Rich Internet Applications) attributes help convey additional information to screen readers. However, improper use can create confusion. Apply ARIA roles correctly:

    • aria-haspopup="true" indicates that a button controls a drop-down menu.
    • aria-expanded="false" updates dynamically when the menu is opened or closed.
    • role="menu" and role="menuitem" clarify the structure.

    Example implementation:

    <button aria-haspopup="true" aria-expanded="false" id="menuButton">Menu</button>
    <ul id="menu" role="menu" hidden>
      <li role="menuitem"><a href="#">Home</a></li>
      <li role="menuitem"><a href="#">About</a></li>
      <li role="menuitem"><a href="#">Services</a></li>
    </ul>

    Structuring Accessible Drop-Down Menus

    Now that we’ve covered the principles, let’s implement an accessible drop-down menu using HTML, CSS, and JavaScript.

    1. Toggling Visibility

    A menu should only be visible when needed. Use JavaScript to control visibility:

    const menuButton = document.getElementById('menuButton');
    const menu = document.getElementById('menu');
    menuButton.addEventListener('click', () => {
      const expanded = menuButton.getAttribute('aria-expanded') === 'true';
      menuButton.setAttribute('aria-expanded', !expanded);
      menu.hidden = expanded;
    });

    2. Managing Focus for Keyboard Users

    When a menu opens, focus should shift inside it. When it closes, focus should return to the toggle button:

    toggle button:
    menuButton.addEventListener('click', () => {
      menu.hidden = !menu.hidden;
      menu.hidden ? menuButton.focus() : menu.querySelector('a').focus();
    });

    3. Enabling Smooth Keyboard Interactions

    To navigate the menu with arrow keys, use this approach:

    menu.addEventListener('keydown', (event) => {
      const items = [...menu.querySelectorAll('a')];
      let index = items.indexOf(document.activeElement);
      
      if (event.key === 'ArrowDown') {
        event.preventDefault();
        index = (index + 1) % items.length;
        items[index].focus();
      } else if (event.key === 'ArrowUp') {
        event.preventDefault();
        index = (index - 1 + items.length) % items.length;
        items[index].focus();
      } else if (event.key === 'Escape') {
        menu.hidden = true;
        menuButton.focus();
      }
    });

    Testing Your Drop-Down Menus for Accessibility

    1. Screen Reader Testing

    Use a screen reader like NVDA (Windows), VoiceOver (Mac), or JAWS to ensure:

    • Menus are announced properly.
    • aria-expanded updates correctly.
    • Navigation follows expected patterns.

    2. Keyboard Testing

    Try navigating your menu using only the keyboard. Ensure:

    • Tab reaches the menu.
    • Enter or Space opens the menu.
    • Arrow keys move between items.
    • Esc closes the menu.

    3. Contrast and Readability

    Ensure proper color contrast between text and background. Use tools like the WebAIM Contrast Checker to verify compliance with WCAG 2.1 standards.

    Best Practices for Creating Intuitive Menus

    • Keep It Simple: Avoid deep nesting that makes menus cumbersome.
    • Ensure Mobile Friendliness: Use larger touch targets for better usability.
    • Avoid Hover-Only Menus: They exclude keyboard users and some assistive technology users.
    • Provide Visual Indicators: Show clear changes when menus expand or collapse.

    Conclusion

    By using semantic HTML, managing focus properly, implementing ARIA roles correctly, and rigorously testing your menus, you can ensure they work for all users, regardless of ability.

    Accessible drop-down menus not only improve usability but also make your site more welcoming to all visitors. Implement these best practices today and make your navigation barrier-free!

    If you’re ready to take the next step toward digital inclusion, reach out to 216digital to schedule an ADA briefing. We’ll help you assess your website, develop a tailored plan, and guide you through the process of building an online presence that works for everyone. Don’t wait—contact us today and let’s make the internet a more accessible place together.

    Greg McNeil

    January 24, 2025
    How-to Guides
    Accessibility, drop-down menus, How-to, WCAG, Web Accessibility, web developers, web development
  • 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
  • Making Hidden Content Accessible to Assistive Technologies

    As a web developer, you want your website to be usable by everyone, including people who rely on assistive technologies. These technologies—such as screen readers, braille displays, and speech recognition software—can help individuals with disabilities navigate the web more easily. Sometimes, you may need to hide certain parts of your webpage visually without hiding them from these tools. However, doing this incorrectly can cause big accessibility issues.

    In this article, we’ll explore how to effectively hide and manage hidden content for people using assistive technologies. We’ll discuss why display: none is problematic, how to use the clip pattern, and how attributes like aria-hidden and hidden can help. By the end, you’ll have a better understanding of how to ensure your website remains inclusive and user-friendly.

    The Problem with display: none

    When you use display: none in your CSS, you remove an element from the visual flow of the page. This means sighted users will not see it. But, it also means the element is completely invisible to assistive technologies such as screen readers. If you’ve hidden important text or controls this way, users who rely on assistive technologies might miss out on content or functionality that they need.

    For example, imagine you have a button that visually looks like an icon, but you hide the text label using display: none. Now, people who can see the icon know what the button does, but people using assistive technologies hear nothing. This creates a poor user experience and makes your site less accessible.

    The Clip Pattern: A Better Approach

    To visually hide content while keeping it available to assistive technologies, the clip pattern is a popular solution. The idea is to position the element off-screen so sighted users don’t see it, but screen readers can still find it. Here’s an example:

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      border: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
    }

    By applying the .visually-hidden class to your element, you ensure it’s hidden visually but remains accessible to assistive technologies. This makes the content discoverable by screen readers, letting users who can’t see the screen still benefit from it.

    Why the Clip Pattern Works

    This pattern relies on moving the element so it’s not visible in the viewport and restricting its size to 1px by 1px. With clip: rect(0, 0, 0, 0); (or clip-path in modern CSS), the browser cuts off any visual display. Yet, the element remains in the Document Object Model (DOM), meaning assistive technologies can still access it. That’s the key difference between this and display: none.

    Managing Visibility with aria-hidden and the hidden Attribute

    Beyond CSS, there are HTML and ARIA (Accessible Rich Internet Applications) attributes that also control how content is shown to both users and assistive technologies. Two important attributes here are aria-hidden and the HTML5 hidden attribute.

    aria-hidden="true"

    When you add aria-hidden="true" to an element, you’re telling assistive technologies not to read or announce that element to users. This is handy for decorative images or redundant content. For instance, if you have a background image that doesn’t provide important information, you could mark it with aria-hidden="true" so screen readers ignore it.

    But be cautious: if you need an element to be read by assistive technologies, do not use aria-hidden=”true”. This attribute will block that element from being announced entirely.

    <div aria-hidden="true">
      <img src="decorative-image.jpg" alt=""/>
    </div>

    HTML5 hidden Attribute

    The hidden attribute is another way to remove content from everyone—both sighted users and assistive technologies. When you use it, browsers typically hide the element. Screen readers will also skip it. This is good if the element is meant to be inaccessible to all users, like a form section that’s not yet relevant or a menu item that’s not available.

    <div hidden>
      <p>This content is hidden from all users.</p>
    </div>

    Use hidden or aria-hidden when you truly want to exclude an element from assistive technologies. If you want it hidden visually but still available to screen readers, you should stick with the clip pattern or .visually-hidden approach.

    Best Practices for Accessible, Visually-Hidden Content

    1. Use Semantic HTML

    Using proper semantic HTML elements (like <nav> for navigation, <main> for main content, or <section> for thematic grouping) is important for clear structure. It helps assistive technologies interpret your content correctly. Semantic HTML also reduces the need for extra attributes and complex styling, since the markup itself conveys meaning.

    2. Avoid Hiding Focusable Elements

    If an element can receive focus (like links, form inputs, or buttons), think carefully before hiding it. A hidden yet focusable element can be confusing for keyboard-only users, since it might get focus without being visible. If you must hide a focusable element, consider removing it from the tab order by using tabindex="-1" or ensuring it’s properly revealed at the right time.

    For example, if you have a pop-up form that appears only after a button click, you can initially hide it with the clip pattern. Once the user clicks, you can remove the clip pattern or switch the CSS to show the content. This way, the form becomes available to both sighted users and people using assistive technologies at the same time.

    3. Provide Context for Hidden Content

    Sometimes you want to reveal hidden content dynamically (like a drop-down menu). In these cases, use ARIA attributes such as aria-expanded and aria-controls to inform assistive technologies that a certain part of the page is now visible or hidden. This can help screen reader users understand changes on the page.

    <button aria-expanded="false" aria-controls="menu" id="menuButton">
      Toggle Menu
    </button>
    
    <nav id="menu" class="visually-hidden">
      <!-- Menu items go here -->
    </nav>

    When you click the button, you can toggle its aria-expanded value from false to true, and remove the .visually-hidden class from the menu. This ensures that both visual and non-visual users know the content has been revealed.

    4. Test with Multiple Assistive Technologies

    It’s important to test your website with different assistive technologies because each one may behave slightly differently. Popular screen readers include NVDA, JAWS, and VoiceOver. Don’t forget to check on both desktop and mobile devices. Regular testing can help you catch accessibility issues before your users do.

    Handling Localization

    If you’re translating your site into multiple languages, remember that hidden text might also need translation. For example, your .visually-hidden text for instructions or links should be available to screen readers in every supported language. Make sure your language attributes (like lang="en") are correct, and consider cultural differences that could impact how you label hidden elements.

    For instance, if you have an English site and a Spanish site, your hidden instructions should be translated into Spanish on the Spanish version. This ensures that users relying on assistive technologies can access the content in the correct language.

    Putting It All Together: A Quick Example

    Let’s look at a simple example of an accessible button that has visually hidden text:

    <button class="icon-button">
      <span class="visually-hidden">Submit Form</span>
      <img src="icon-submit.png" alt="" aria-hidden="true" />
    </button>
    • The .visually-hidden class hides the text “Submit Form” from sighted users, but screen readers can still read it.
    • The <img> tag includes an empty alt attribute and aria-hidden="true", so assistive technologies ignore the image itself.
    • Sighted users see only the icon, while screen reader users hear “Submit Form.”

    This example keeps your content accessible to people using assistive technologies and also meets visual design needs.

    Additional Resources

    • Web Content Accessibility Guidelines (WCAG): A detailed guide on making web content accessible.
    • WAI-ARIA Authoring Practices: Official tips on using ARIA roles, states, and properties.
    • MDN Web Docs on ARIA: In-depth explanations of ARIA attributes and best practices.

    Exploring these resources will help you master hiding content effectively, ensuring people who use assistive technologies can still access everything they need.

    Conclusion

    Hiding content from sighted users while keeping it accessible to assistive technologies is an essential skill for modern web developers. By avoiding display: none for important information, using the clip pattern for visually hidden content, and carefully leveraging aria-hidden or hidden, you can ensure everyone has a good experience on your site.

    Remember to keep the following points in mind:

    1. Use the clip pattern (.visually-hidden) to hide content from sighted users but keep it readable by assistive technologies.
    2. Use aria-hidden and hidden only when you truly want to hide content from all users, including those using assistive technologies.
    3. Pay attention to focusable elements, making sure you don’t accidentally trap keyboard users in hidden sections.
    4. Test frequently with various tools and real users to ensure your hidden content behaves as you expect.
    5. Localize your hidden text so that people using assistive technologies in other languages can also benefit.

    By following these guidelines, you’ll be well on your way to building inclusive websites that work for everyone. Your careful attention to accessibility shows that you value all your users, regardless of their abilities or the assistive technologies they use. Embracing these practices will help ensure a positive, welcoming, and user-friendly experience across the board.

    Greg McNeil

    December 31, 2024
    How-to Guides
    Accessibility, assistive technology, How-to, web developers, web development, Website Accessibility
  • How to Make Data Tables Accessible

    Data tables are a powerful way to present structured information, but without proper attention to accessibility, they can exclude users with disabilities. Whether you’re a developer, content creator, or website owner, learning how to make your tables user-friendly for everyone is an essential skill.

    Accessibility standards like WCAG (Web Content Accessibility Guidelines) provide the foundation for creating inclusive data tables. By following best practices such as structuring your tables properly, adding meaningful headers, and ensuring compatibility with assistive technologies, you can enhance usability while meeting legal and ethical standards.

    Understanding the Basics of Accessible Tables

    Before diving into the specifics, it’s important to understand what makes a table accessible. Accessible tables are designed to be navigable and understandable by all users, including those who rely on screen readers or keyboard navigation. This means paying attention to the structure, design, and additional information like captions and summaries.

    The foundation of an accessible table lies in its structure. HTML provides semantic elements like <table>, <thead>, <tbody>, and <th> to organize your data logically. Using these elements correctly ensures that assistive technologies can interpret the table properly. For example, headers defined with <th> tags allow screen readers to associate data cells with their corresponding column or row, creating a more intuitive experience for users.

    Adding Headers, Captions, and Summaries

    Headers are one of the most critical components of an accessible table. They guide users in understanding what each data point represents. To define headers, use the <th> element, and consider including the scope attribute to indicate whether the header applies to a column, row, or group of columns and rows. For example, <th scope="col"> signals that the header applies to an entire column, while <th scope="row"> applies to a row.

    Captions and summaries provide additional context for your table. A caption, placed within the <caption> tag, serves as a brief title or description of the table’s purpose. Summaries, while not an HTML element, can be included to provide a detailed explanation of the table’s content, especially if it’s complex. This can be added through the <summary> attribute or as part of surrounding content. These elements are particularly valuable for screen reader users, offering them a quick overview of what to expect.

    Ensuring Compatibility with Screen Readers

    Screen readers rely on well-structured and semantically correct HTML to interpret tables. To optimize compatibility, avoid using tables for layout purposes. While this practice was common in the past, it confuses screen readers by mixing presentational and data tables. Instead, use CSS for layout and reserve tables strictly for data.

    Another crucial consideration is avoiding merged cells unless absolutely necessary. While colspan and rowspan attributes can be used to merge cells, they can make navigation more challenging for screen reader users. If your table requires merged cells, ensure that the relationships between headers and data are clearly defined with attributes like headers and id.

    Making Tables Keyboard-Friendly

    Keyboard accessibility is vital for users who cannot use a mouse. Accessible tables should allow users to navigate logically through rows and columns using only their keyboard. Test your table to ensure that tabbing through the data follows a predictable order.

    One way to achieve this is by maintaining a logical document flow. Keep your table simple and organized to prevent users from getting lost. If the table is part of a larger webpage, include clear instructions and use skip links to help users bypass unrelated content.

    Simplifying Complex Tables

    Complex tables with nested headers or multi-level data can be difficult to navigate, even for experienced users. Simplifying these tables can go a long way toward improving accessibility. Consider breaking down large, complicated tables into smaller, more manageable ones. You can also use additional tools like expandable rows or columns to provide details without overwhelming the user.

    For situations where simplifying isn’t feasible, invest extra effort in defining relationships between headers and data. Use the headers and id attributes to explicitly associate each cell with its relevant headers. This ensures that screen readers can convey the relationships accurately, even in intricate tables.

    Improving Readability with Responsive Design and Contrast

    Accessibility isn’t just about assistive technologies—it’s also about making content visually readable for users with low vision or cognitive challenges. Responsive design is essential for ensuring that your tables are accessible across devices. Use CSS to make your tables adapt to different screen sizes without losing clarity or functionality.

    High contrast is another key factor. Choose colors that provide sufficient contrast between text and background. WCAG recommends a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Tools like WebAIM’s Contrast Checker can help you verify compliance.

    Testing Your Tables for Accessibility

    No matter how carefully you design your tables, testing is essential to identify and address potential issues. Start by using automated tools like the WAVE Web Accessibility Evaluation Tool to check for common errors. While these tools are helpful, they can’t catch everything, so manual testing is equally important.

    Test your table using a screen reader like NVDA or JAWS to experience it as a user with visual impairments would. Pay attention to how headers, captions, and data are announced. Does the screen reader navigate the table logically? Are all elements correctly identified and described?

    Keyboard testing is another critical step. Navigate through the table using only your keyboard to ensure that all interactive elements are accessible and functional.

    Why Accessible Tables Matter

    Accessible tables aren’t just about meeting legal requirements—they’re about creating a better user experience for everyone. By making your data tables accessible, you’re opening your content to a wider audience, including individuals with disabilities who rely on assistive technologies.

    Moreover, accessibility enhances usability for all users, not just those with disabilities. Features like clear headers, logical navigation, and responsive design make tables easier to use for everyone, whether they’re on a desktop computer or a smartphone.

    Conclusion

    Creating accessible data tables might require extra effort, but the benefits are well worth it. By following best practices like using proper structure, adding descriptive headers and captions, and ensuring compatibility with assistive technologies, you can make your tables both compliant and user-friendly.

    Remember, accessibility is an ongoing process. Stay informed about updates to guidelines like WCAG and continuously test your content to ensure it meets the highest standards. By prioritizing accessibility, you’re not just improving your website—you’re making the web a more inclusive space for all.

    Ready to take the first step? Partner with the experts at 216digital, who understand accessibility inside and out. Together, we can create a web that works for everyone—and protect your business in the process. Schedule your complimentary ADA briefing today to start your journey toward an accessible and compliant future.

    Greg McNeil

    December 11, 2024
    How-to Guides
    Accessibility, Data tables, How-to, web developers, web development, Website Accessibility
  • Progress Over Perfection: Steps Toward Digital Accessibility 

    In today’s digital world, creating websites and content that are accessible to everyone should be a top priority. But let’s face it — making your website completely accessible for every single user can feel like an overwhelming task. That’s where the concept of “progress over perfection” comes into play.

    Achieving digital accessibility isn’t a one-time fix. It’s an ongoing process of continuous improvement. If you aim for perfection from the start, you might get stuck, feel defeated, or even give up. But by focusing on making progress, even small steps, you can create a more inclusive online experience without the stress of reaching perfection right away.

    Let’s break down how you can start building a sustainable approach to digital accessibility with the right mindset, tools, and strategies.

    What Is Digital Accessibility?

    Before we dive into the “progress over perfection” mindset, let’s quickly talk about what digital accessibility really means. Simply put, it’s about making sure that all users, regardless of their abilities or disabilities, can access and use your website, apps, or digital content easily.

    This includes people who may be blind, deaf, have low vision, or have mobility challenges. It also covers people who have cognitive disabilities or those who just prefer to use assistive technology like screen readers, voice commands, or keyboard navigation.

    Digital accessibility can seem like a huge task at first, but it’s not about doing everything perfectly. It’s about making consistent improvements to ensure your site is usable by as many people as possible.

    The Problem with Perfectionism

    When you aim for perfection, the goal can feel so far out of reach that it becomes paralyzing. This is especially true with digital accessibility, where there are lots of technical guidelines and standards (like WCAG – Web Content Accessibility Guidelines) to follow. While these standards are great for ensuring accessibility, focusing on every little detail can slow you down.

    In reality, no website is perfect when it comes to accessibility. Users have different needs, and it’s impossible to design for every potential scenario at once. So, instead of feeling like you need to fix everything at the same time, shift your focus to continuous improvement. Every small step counts, and over time, those steps will add up to a more accessible and inclusive digital experience.

    Why Focus on Progress?

    The beauty of focusing on progress over perfection is that it’s achievable. It lets you start small, tackle the most pressing accessibility issues first, and then build on that foundation. As you implement changes, you’ll gradually improve the user experience, making it better for people with disabilities while also making your website more user-friendly for everyone.

    Here are some reasons why progress over perfection is the way to go for sustainable digital accessibility:

    1. You Don’t Get Stuck: Trying to achieve perfection can leave you frozen in place, unsure of where to start. By focusing on progress, you can tackle one problem at a time and move forward.
    2. It’s More Manageable: Rather than trying to fix everything at once, breaking down accessibility work into smaller tasks makes it more manageable and less overwhelming.
    3. You Can Build Momentum: When you make even small improvements, it creates a sense of accomplishment. This encourages you to keep making changes and adding new updates over time.
    4. It’s Realistic: Perfection doesn’t exist when it comes to accessibility. There will always be more to improve, so aiming for progress keeps you focused on what matters.

    Practical Tips for Achieving Digital Accessibility

    Now that we understand the importance of progress, let’s talk about some practical steps you can take to make real improvements to your site. You don’t need to do everything at once, but here’s how you can start moving toward a more accessible website today:

    Start with Low-Hanging Fruit

    When you’re just getting started, it’s helpful to identify and address the “low-hanging fruit” — the quick wins that will make the biggest impact with the least amount of effort. These might include:

    • Alt Text for Images: Add descriptive alt text to images so screen readers can convey the meaning of those images to users with visual impairments.
    • Keyboard Navigation: Make sure that all interactive elements (like forms, buttons, and links) can be accessed using only a keyboard.
    • Color Contrast: Ensure that text has enough contrast against the background so users with low vision can read it easily.

    By making these changes, you’re addressing immediate barriers that can make a huge difference in how accessible your website is for many users.

    Integrate Accessibility into Your Workflows

    To create long-term sustainability, accessibility shouldn’t be something you do only once or twice. It needs to be built into your everyday workflow. Whether you’re designing a new page, creating content, or updating a feature, think about accessibility from the start.

    Here are a few ways you can integrate accessibility into your routine:

    • Involve Accessibility from the Beginning: If you’re working on a new website or a redesign, include accessibility from the very start of the project. This way, accessibility considerations become part of the foundation.
    • Use Accessible Tools and Templates: Many website builders, content management systems (CMS), and templates have accessibility features built-in. Make sure you’re using those tools to save time and reduce errors.
    • Educate Your Team: Make sure everyone involved in content creation and site maintenance understands basic accessibility principles.

    Get Real Feedback from Users

    One of the best ways to improve accessibility is to hear directly from users. Real people with disabilities can give you valuable insight into how they experience your website and where the barriers lie. This is far more effective than guessing or relying solely on automated testing tools.

    You can:

    • Conduct User Testing: Recruit users with various disabilities to test your site and provide feedback. This can help you uncover issues you might have missed.
    • Engage with Your Audience: Ask for feedback through surveys or comments. Listen to your users, and if they point out areas for improvement, make a plan to address them.

    Use Tools for Continuous Monitoring

    To ensure your website stays accessible over time, use tools that can help you identify and fix problems as they arise. One such tool is a11y.Radar.

    A11y.Radar continuously scans your website for accessibility issues and provides you with actionable reports. This allows you to stay on top of accessibility improvements without needing to manually review your entire site. With regular scans, you can catch issues early and keep your site in good shape.

    It’s All About Consistent Improvement

    Remember, the goal of digital accessibility isn’t to be perfect; it’s to be inclusive. Every improvement you make is a step toward creating a better, more accessible experience for all your users. By focusing on progress over perfection, you’ll keep moving forward without getting stuck in the weeds.

    So, don’t be afraid to start small. Address the most pressing accessibility issues first, integrate accessibility into your workflows, engage with real users for feedback, and use tools to monitor your progress. Over time, you’ll create a website that’s not only accessible but sustainable in the long run — and that’s something to be proud of!

    If you’re ready to take the next step in your accessibility journey, schedule an ADA briefing with 216digital. Our experts can help you create a sustainable, actionable plan for achieving digital accessibility while mitigating risk. Let’s move forward together!

    Greg McNeil

    December 9, 2024
    Testing & Remediation, WCAG Compliance
    Accessibility, ADA Compliance, ADA Website Compliance, Web Accessibility Remediation, web development, Website Accessibility
  • Responsive Web Design: How It Relates to Digital Accessibility

    Users on mobile devices make up about two-thirds of all web traffic, so having a responsive web design is crucial. With assistive technology on mobile devices, such as Voiceover on iOS, getting better daily, users with disabilities are using mobile devices more than ever. In this article, we’ll explore how to ensure your mobile-friendly design is accessible to users with disabilities.

    What Is Responsive Web Design?

    Responsive web design is an approach to web development that ensures a site’s layout and content automatically adapt to different screen sizes and orientations. With RWD, a single website seamlessly adjusts its appearance and functionality, whether viewed on a desktop, tablet, or smartphone.

    The cornerstone of RWD lies in flexible grids, fluid images, and media queries that allow the design to respond to its environment.

    Why Is Responsive Web Design Important for Accessibility?

    Responsive web design is not just about aesthetics—it’s about usability. For users with disabilities, a responsive site can mean the difference between a smooth experience and complete frustration. Here’s how RWD contributes to digital accessibility:

    • Consistency Across Devices: Users who rely on assistive technologies, such as screen readers or magnifiers, benefit from consistent layouts and predictable navigation across devices.
    • Adaptability for Custom Settings: Responsive designs better accommodate user-specific settings, such as increased font size or high-contrast modes.
    • Ease of Interaction: RWD makes touch targets (like buttons) appropriately sized and spaced for mobile users, which is especially critical for people with motor impairments.
    • Improved Readability: Dynamic text resizing and responsive typography ensure readability for users with low vision.

    Responsive vs. Adaptive Web Design: Which Is Better for Accessibility?

    Although often used interchangeably, responsive and adaptive web design are distinct approaches.

    • Responsive Web Design (RWD): Using media queries, a single design adjusts fluidly to fit various screen sizes.
    • Adaptive Web Design (AWD): Multiple fixed layouts are created for specific screen sizes, and the appropriate layout is served based on the user’s device.

    When it comes to accessibility, RWD generally has the edge. Here’s why:

    • Device-Agnostic: RWD caters to an infinite range of screen sizes, while AWD is limited to the predefined breakpoints for which layouts are designed.
    • Consistency: RWD ensures a uniform experience, while AWD may cause discrepancies between layouts, confusing users who rely on assistive technologies.

    However, both approaches can support accessibility when implemented thoughtfully.

    Common Responsive Web Design Pitfalls That Hurt Accessibility

    Even well-intentioned responsive designs can fall short of accessibility standards. Here are some common mistakes and how to avoid them:

    Inconsistent Navigation

    When navigation menus change drastically between screen sizes, users may struggle to find what they need—especially those relying on screen readers or keyboard navigation.

    Solution: Use consistent and predictable navigation patterns across all breakpoints. Test to ensure screen readers announce menus accurately.

    Inadequate Focus Indicators

    Focus indicators are critical for users navigating with a keyboard, yet they often disappear or become less visible on smaller screens.

    Solution: Design focus states that are prominent across all devices.

    button:focus {  
      outline: 3px solid #0078d7;  
    }  

    Overly Small Touch Targets

    Tiny buttons or links on mobile devices can be difficult for users with motor impairments to tap accurately.

    Solution: Follow WCAG recommendations for touch target sizes (at least 44×44 pixels) and maintain adequate spacing.

    Ignoring User Settings

    Some responsive designs override user preferences, like zooming or high-contrast modes, which can render content inaccessible.

    Solution: Allow user overrides by avoiding !important in CSS styles and ensuring zoom functionality is not disabled.

    Best Practices for Accessible Responsive Web Design

    To build an inclusive, responsive website, focus on these foundational principles:

    Use Semantic HTML

    Start with a solid foundation by using semantic HTML elements like <header>, <nav>, and <main>. These provide structure and meaning, making your content easier to navigate with assistive technologies.

    Design Flexible Layouts

    Build layouts that adapt fluidly to different screen sizes. Use relative units like percentages or em instead of fixed units like pixels.

    .container {  
      width: 90%;  
      max-width: 1200px;  
      margin: 0 auto;  
    }   

    Implement Responsive Typography

    Readable text is crucial for accessibility. Use CSS techniques like clamp() to create scalable typography that adapts to the screen size:

    h1 {  
      font-size: clamp(1.5rem, 5vw, 2.5rem);  
    }  

    Test both manually and with automation, and invite feedback

    Whenever you complete development tasks or onboard new content or products, you should always use automated testing tools like WAVE and Google Lighthouse to ensure you do not introduce any new accessibility barriers. You should also regularly manually test your website using screen reading software. Ensure a link on your website invites user feedback if they encounter an accessibility barrier.

    Incorporate Media Queries Thoughtfully

    Media queries are the backbone of RWD. Use them to adjust layouts without sacrificing usability.

    @media (max-width: 768px) {  
      .nav {  
        display: none;  
      }  
      .mobile-menu {  
        display: block;  
      }  
    }   

    Leverage ARIA Sparingly

    Accessible Rich Internet Applications (ARIA) attributes can enhance accessibility but should not replace semantic HTML. For instance, use aria-expanded to indicate whether a collapsible menu is open or closed.

    <button aria-expanded="false" aria-controls="menu">Menu</button>  
    <div id= "menu" hidden>  
      <!-- Menu items -->  
    </div> 

    Optimize for Performance

    Slow-loading pages frustrate all users but can disproportionately affect those with disabilities. Compress images, minify CSS and JavaScript, and use responsive images to improve load times.

    Testing Responsiveness and Accessibility

    A responsive site isn’t automatically accessible—it needs testing. Here are some tools and methods to ensure your RWD supports digital accessibility:

    • Browser DevTools: Use responsive design modes to preview your site on various screen sizes.
    • Accessibility Testing Tools: Tools like Lighthouse can identify issues like missing alt text or insufficient contrast.
    • User Testing: Engage users with disabilities to test your site’s usability.
    • Mobile Testing: Use actual devices, not just simulators, to test responsiveness and accessibility together.

    Conclusion

    Many web owners focus specifically on the inclusivity of their desktop websites but do not specifically test their mobile views. With most traffic, including users with disabilities, using mobile devices, it’s more important than ever to ensure that all versions of your website, regardless of screen size, are accessible to everyone.

    If you’d like an expert evaluation of your mobile site’s accessibility, contact 216digital using the contact form below.

    Greg McNeil

    December 4, 2024
    How-to Guides
    Accessibility, ecommerce design, responsive web design, RWD, web development, Website Accessibility
  • Accessible Chatbots: Breaking Barriers in Support

    Nowadays, customers have come to expect support and product help on-demand, 24 hours a day, 7 days a week. It is only possible for some businesses to provide human assistance at all times – that’s where chatbots come in. These tools can be invaluable to users and business owners alike, but it’s essential to ensure that people with disabilities can gain access to the same support. Let’s explore the concept of accessible chatbots.

    Why Chatbot Accessibility Matters

    Imagine trying to resolve an urgent issue on a website, only to find the chatbot—your primary source of help—completely unusable. For many people with disabilities, this scenario is all too common.

    Accessible chatbots aren’t just about meeting legal requirements like ADA (Americans with Disabilities Act) compliance or adhering to  WCAG (Web Content Accessibility Guidelines) standards; they’re about creating a seamless experience for everyone. When designed thoughtfully, chatbots can be a powerful tool for inclusivity. But when accessibility is overlooked, they can alienate an entire segment of your audience.

    Common Barriers in AI Chatbots

    Incompatible with Screen Readers

    Many chatbots need more critical semantic HTML features like landmarks and incorrectly use HTML tags, causing a confusing or frustrating experience.

    Keyboard Navigation Failures

    Chatbots often lack keyboard support, requiring mouse clicks to open or interact. Users with disabilities rely on the ability to navigate content and functionality with alternative input methods like keyboards, voice commands, and gestures.

    Unclear or Missing Focus Indicators

    Focus indicators—the visual cues showing where a user is on a page—are often missing in chatbots. Without these, keyboard users may lose track of where they are in the conversation flow.

    Overly Complex or Jumbled Responses

    Chatbots tend to present information in long blocks of text or overly complicated formats. For users with cognitive disabilities, this can be overwhelming and hard to follow.

    Time Constraints

    Some chatbots automatically close after a period of inactivity, which can disadvantage users who need more time to read or type responses.

    Lack of Alternative Communication Options

    Chatbots often act as the sole method of contact, leaving users without alternative ways to reach support if they can’t use the chatbot.

    How to Build an Accessible Chatbot

    Making your chatbot accessible doesn’t have to be daunting. By following WCAG guidelines and implementing these best practices, you can create a more inclusive experience:

    Use Semantic HTML for Chatbot Elements

    Building an accessible chatbot does not require any specialized experience – you can apply the same general best practices to achieve accessible elements. Use the correct semantic HTML tags for each component you create, such as button or input elements.

    Here’s an example of an accessible chatbot button:

    <button aria-label="Open chatbot" id="chatbot-open-button">  
      Chat with us  
    </button>

    The aria-label ensures that screen readers convey the button’s purpose to users.

    Support Keyboard Navigation

    Your chatbot should be fully functional with just a keyboard. Test whether users can open, navigate, and interact with the chatbot using the Tab and arrow keys.

    For example, ensure focus moves logically through the chatbot interface:

    document.querySelector('#chatbot-input').focus();  

    Provide Descriptive ARIA Labels

    ARIA (Accessible Rich Internet Applications) roles and attributes can bridge gaps in accessibility, but they must be used carefully. Assign roles like aria-live to update users on dynamic content.

    <div role="alert" aria-live="polite" id="chatbot-messages">  
      Welcome! How can I assist you today?  
    </div>  

    Using aria-live ensures that screen readers announce new messages in real time.

    Design with Simplicity in Mind

    Avoid overwhelming users with large blocks of text. Break responses into smaller chunks and provide clear, concise answers.

    Allow for Adjustable Timing

    Let users control the session duration. If the chatbot times out, allow them to restart the session without losing previous messages.

    setTimeout(() => {  
      alert('The chatbot session has timed out. Click to resume.');  
    }, 300000);   

    Include Accessible Focus Indicators

    Make sure users can see which element is currently focused. Use CSS to style focus indicators:

    button:focus {  
      outline: 2px solid #005fcc;  
      outline-offset: 2px;  
    }  

    Provide Alternatives to Chatbots

    Not everyone can—or wants to—use a chatbot. Always include alternative ways to contact your business, like email or phone.

    Testing Chatbot Accessibility

    Testing is critical for identifying and fixing accessibility issues. Here are some methods to ensure your chatbot meets accessibility standards:

    Manual Testing with Screen Readers

    Test the chatbot using screen readers like NVDA or JAWS. Check if labels, navigation, and dynamic updates work as intended.

    Keyboard Navigation Tests

    Navigate the entire chatbot interface using only a keyboard. Make sure the focus moves logically, and that all interactions are possible.

    Automated Tools

    Use tools like Lighthouse to identify accessibility issues in your chatbot’s code.

    User Feedback

    Invite users with disabilities to test the chatbot and provide feedback. Their real-world experiences will highlight areas you may have missed.

    Meeting WCAG Standards for Chatbots

    The Web Content Accessibility Guidelines (WCAG) provide a roadmap for making chatbots more inclusive. Key criteria to consider include:

    • 1.3.1: Info and Relationships
    • Ensure that chatbot components are semantically structured and that relationships between elements are apparent.
    • 2.1.1: Keyboard Accessibility
    • All chatbot functions must be accessible via keyboard.
    • 2.4.7: Focus Visible
    • Ensure users can see where they are within the chatbot interface.
    • 4.1.2: Name, Role, Value
    • Use ARIA roles and labels to make interactive elements understandable to assistive technologies.

    Wrapping Up

    All the functionality on your website is helpful in some way to your users, or else you wouldn’t include it on your site. All functionality on your website should be accessible to everyone, especially chatbots.

    Remember to test your chatbot with screen readers, ensure keyboard compatibility, and always provide alternative ways to connect. Inclusive design benefits your business by reaching a broader audience and creating a better user experience for all.

    If you’re unsure if your chatbot is accessible to everyone, reach out to 216digital using the contact form below.

    Greg McNeil

    November 22, 2024
    How-to Guides
    Accessibility, Chatbots, web developers, web development, Website Accessibility
  • Skip Links: Improve Web Accessibility & Navigation

    More and more, digital accessibility has become a major talking point when browsing the web. One of the key components that improve accessibility for users with disabilities is something many users might not even notice: skip links.

    These simple yet powerful tools can make a huge difference in the web experience for individuals relying on keyboard-only interaction, screen readers, or other assistive technologies. In this article, we’ll explore the importance of skip links, their technical mechanics, and how you can implement them effectively on your website.

    What Are Skip Links and Why Are They Important?

    Skip links are navigational links that allow users to skip over repetitive content such as headers, navigation menus, or other elements they’ve already seen. For users relying on assistive technologies like screen readers, keyboard navigation, or switch devices, skip links enable them to jump directly to the main content of the page.

    When navigating a website using a keyboard (by pressing the Tab key), users typically encounter all of the page’s links and elements in a set order. This often means they have to cycle through the same menus, headers, and other repetitive content every time they visit a new page or reload an existing one. Skip links solve this problem by providing an easy way to bypass these elements, saving time and frustration for those who need alternative navigation methods.

    For example, imagine you’re using a screen reader to navigate a website. Without skip links, you might be forced to listen to the same navigation menu and header over and over again, even though you’re only trying to get to the main body of the page. Skip links allow you to bypass this content, going straight to the part of the page you want.

    The Key Benefits of Skip Links

    Improved Navigation for Keyboard-Only Users

    Many people with disabilities, including those with limited mobility or dexterity, use keyboards or alternative input devices to navigate the web. Skip links let users quickly navigate to the main content, bypassing headers, footers, and menus that they may have already accessed.

    Enhanced Experience for Screen Reader Users

    Screen readers announce every element on a webpage in the order they are tabbed through. Without skip links, users would have to hear the same menus and links repeatedly, making navigation time-consuming and tedious. Skip links streamline the experience by providing a shortcut to the main content.

    Better Usability for Assistive Technologies

    Skip links are a simple yet effective tool that benefits various assistive technologies, enhancing the overall usability of your website for a wide range of users.

    Increased Accessibility Compliance

    Many countries and regions have laws requiring websites to be accessible. For example, in the United States, the Americans with Disabilities Act (ADA) mandates that websites must be accessible to all users, including those with disabilities. Implementing skip links helps ensure your website is compliant with accessibility guidelines like Web Content Accessibility Guidelines (WCAG).

    How Do Skip Links Work?

    Skip links work by creating a link that, when activated, allows the user to bypass parts of the webpage and move directly to a more relevant section. These links are typically placed at the top of the page, visible only when the user navigates using the keyboard (by pressing the Tab key). The link itself usually says something like “Skip to main content,” “Skip to navigation,” or “Skip to footer,” depending on which section the user wants to bypass.

    The Technical Mechanics of Skip Links

    To create a skip link, you use basic HTML along with some helpful attributes to control the behavior and accessibility of the link. Here’s an overview of the technical aspects of skip links:

    HTML Structure with <a href> Tags

    The primary way to implement skip links is with the <a> (anchor) tag, which creates hyperlinks. These links should point to specific elements within the webpage, often with id attributes to mark the sections users can skip to.

    tabindex Attribute

    The tabindex attribute is used to control the tab order of elements. By default, links and form controls are included in the tab order. However, for skip links to work properly, they need to be made focusable before other content is tabbed through.

    aria-label and aria-hidden Attributes

    The aria-label attribute can be used to provide screen readers with a more descriptive label for the skip link. For example, you can use it to define a more readable label like “Skip to main content,” ensuring that screen readers announce the skip link’s purpose clearly. On the other hand, the aria-hidden attribute can be used to hide elements from assistive technologies when needed.

    A Simple Skip Link Example

    Here’s a simple HTML example of a skip link that allows users to skip directly to the main content of a webpage:

    <a href="#main-content" class="skip-link" tabindex="0" aria-label="Skip to main content">Skip to main content</a>
    <header>
    <nav> <!-- Navigation Links --> </nav>
    </header>
    <main id="main-content">
    <h1>Welcome to Our Website</h1>
    <p>This is the main content of the page...</p>
    </main>

    In this example:

    • The skip link (<a href="#main-content">) is placed at the top of the page and links to the main-content section identified by the id="main-content".
    • The tabindex="0" ensures that the skip link is focusable and can be reached when using the Tab key.
    • The aria-label="Skip to main content" helps screen reader users understand what the link does.

    Styling Skip Links

    While skip links are crucial for accessibility, they’re not always visually appealing by default. To make skip links blend in with your design, you’ll likely want to hide them until they’re needed and style them for better usability. Here’s how you can style skip links using CSS:

    .skip-link {
    position: absolute;
    top: -40px; /* Hide the link off-screen */
    left: 0;
    background-color: #000;
    color: #fff;
    padding: 10px;
    z-index: 100;
    }
    .skip-link:focus {
    top: 10px; /* Bring the link into view when focused */
    }

    In this example:

    • The .skip-link class hides the skip link off-screen with top: -40px until it’s needed.
    • When the link is focused (i.e., when the user tabs to it), it becomes visible by setting top: 10px.
    • You can customize the background color, text color, padding, and positioning to match your website’s design.

    JavaScript for Enhanced Skip Link Functionality

    In some cases, you may want to enhance the behavior of your skip link using JavaScript. For example, you might want to automatically focus the main content once the skip link is activated. Here’s how you can do that:

    document.querySelector('.skip-link').addEventListener('click', function(e) {
    e.preventDefault();
    document.querySelector('#main-content').focus();
    });

    This script listens for a click on the skip link and prevents the default action (i.e., jumping to the href target). Instead, it uses JavaScript to focus on the main content section, making it even easier for users to access.

    Testing Skip Links for Accessibility

    Once you’ve implemented skip links, it’s essential to test them to ensure they’re working as expected. Here are a few key tips for testing your skip links:

    1. Keyboard Navigation: Use the Tab key to cycle through the elements on your page. Ensure the skip link is the first item that can be focused and that it jumps you to the main content.
    2. Screen Reader Testing: Test your skip links with a screen reader (such as NVDA or VoiceOver) to ensure the skip links are announced correctly and work as expected.
    3. Cross-Browser Compatibility: Make sure your skip links work across different browsers and devices. Some older browsers might have quirks that affect the behavior of tabindex or CSS styling, so testing across multiple platforms is critical.
    4. Accessibility Tools: Use automated accessibility tools like Lighthouse to check for accessibility issues on your website. These tools can help identify missing or misused attributes related to skip links.

    Challenges with Skip Links

    While skip links are an essential tool for accessibility, there are some challenges you might encounter when implementing them:

    • Browser Inconsistencies: Different browsers and devices may render skip links or handle focus management differently. It’s important to test across various platforms to ensure consistent behavior.
    • Visibility and Styling: Skip links should be visible when needed but unobtrusive when not. Ensuring they are easily accessible but don’t clutter the design can require some careful styling.
    • Managing Focus Order: If your page has dynamic content (like modals or sticky headers), you may need to adjust the focus order or ensure that skip links still work as expected when these elements are present.

    Skip Ahead to Success

    Skip links are a simple but vital tool in improving the accessibility of your website. They help keyboard-only users, screen reader users, and others navigate your site more efficiently by skipping over repetitive content and jumping straight to the main sections of the page. By implementing skip links with proper HTML, CSS, and JavaScript, you can enhance the user experience for a wider audience, making your site more inclusive and accessible.

    If you’re ready to make your website ADA-compliant and accessible to everyone, schedule an ADA briefing with 216digital. Our team of experts will walk you through the process, address any questions, and help you create an inclusive, compliant, and user-friendly web experience. Don’t wait—take the first step toward a more accessible digital presence today.

    Greg McNeil

    November 21, 2024
    How-to Guides
    Accessibility, How-to, skip link, Web Accessibility, web developers, web development
  • Should Designers Hit Pause on Animation?

    Animation can bring a website to life, but have you ever considered how it impacts all users? While animations and gifs can make a site feel more dynamic, they can also cause some visitors discomfort—or worse—. Let’s explore why animations can be tricky from an accessibility standpoint and how you can design them to be both engaging and inclusive.

    Why Animation Can Be Problematic

    Animations aren’t just flashy extras—they can deeply affect how users experience your website, and not always in a good way.

    • Motion Sensitivity: Some people have vestibular disorders that make them sensitive to movement on screens. Animations like parallax scrolling or sliding elements can trigger dizziness, vertigo, or nausea.
    • Seizures: Flashing lights or strobing effects can be dangerous for users with photosensitive epilepsy. Even subtle flickers can cause issues.
    • Cognitive Overload: Busy or overly complex animations can overwhelm users with cognitive impairments, making it hard for them to focus or understand the content.
    • Assistive Technology Interference: Screen readers and other tools can struggle with animations that change content dynamically, leading to confusion.

    These challenges highlight why designers need to think critically about when and how they use animations.

    Does Your Design Really Need Animation?

    Not every project calls for animation. Before you add that fancy effect, ask yourself:

    • Does it serve a purpose?
    • Will it help users navigate or understand the site?
    • Could it distract or overwhelm someone?

    Animations should always have a clear function, like drawing attention to a call-to-action or giving feedback on an interaction. If the animation doesn’t improve usability, it might be best to skip it.

    Making Animations Accessible

    If you must use an animation, here are some tips to ensure it doesn’t cause issues for people with cognitive or visual impairments:

    1. Keep It Simple: Avoid overly elaborate or decorative effects. Subtle transitions or fades can be just as effective without being overwhelming.
    2. Mind the Timing: Speed matters. Too fast, and users might get lost; too slow, and they could grow impatient. Aim for a balance that feels natural.
    3. Give Users Control: All animations should have visual and accessible controls to pause and play the animation. Always respect the prefers-reduced-motion media query.
    4. Focus on Purpose: Every animation should add value. Whether it’s guiding users or making content clearer, make sure it serves a meaningful purpose.

    A Quick Fix with prefers-reduced-motion

    One of the easiest ways to address motion sensitivity is by using the prefers-reduced-motion media query. This CSS feature checks if a user has reduced motion enabled on their device and adjusts animations accordingly.

    Here’s how you can tone down animations for users who prefer less motion:

    @media (prefers-reduced-motion: reduce) {  
      .animated-element {  
        animation: none;  
        transition: none;  
      }  
    }  

    Want to simplify rather than completely disable? Try this:

    @media (prefers-reduced-motion: reduce) {  
      .fade-in {  
        animation: fade-in 0.5s linear;  
      }  
    }  
    @keyframes fade-in {  
      from { opacity: 0; }  
      to { opacity: 1; }  
    }  
    

    This approach keeps your design functional while reducing the risk of discomfort for sensitive users.

    What Does WCAG Say About Animation?

    The Web Content Accessibility Guidelines (WCAG) offer clear rules about animations. Two of the most relevant criteria are:

    • 2.3.1: Three Flashes or Below Threshold
    • Avoid animations that flash more than three times per second. It’s a crucial step in reducing the risk of seizures.
    • 2.3.3: Animation from Interactions
    • If animations are triggered by user actions, make sure they can be disabled without affecting functionality.

    Following these guidelines helps ensure your site is usable for everyone.

    Testing Your Animations

    Testing is an essential part of designing accessible animations. Here’s how to do it effectively:

    • Check Motion Settings: Turn on the “reduce motion” setting on your device (available on macOS, Windows, iOS, and Android) and see how your site responds.
    • Try Keyboard Navigation: Ensure animations don’t interfere with keyboard functionality. Can users still tab through links and buttons smoothly?
    • Use Automated Tools: Tools like Lighthouse can catch accessibility issues related to animations.
    • Gather Feedback: Get input from real users, especially those with disabilities. They’ll provide insights you might not have considered.

    Accessible Animation with JavaScript

    Sometimes, you’ll need JavaScript to handle animations. You can still make them accessible by pairing JavaScript with prefers-reduced-motion.

    Here’s a quick example:

    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');  
    if (reduceMotion.matches) {  
      // Turn off animations for users who prefer reduced motion  
      document.querySelector('.animated-element').style.animation = 'none';  
    } else {  
      // Keep animations for everyone else  
      document.querySelector('.animated-element').classList.add('run-animation');  
    }   

    This snippet ensures your animations adapt to user preferences without requiring manual toggles.

    Wrapping It Up

    Animations can be a powerful tool for creating engaging, interactive websites—but they should never come at the expense of accessibility. By keeping animations simple, purposeful, and user-controlled, you can deliver a better experience for all your visitors.

    Don’t forget to test your designs with real users and tools, and make use of features like prefers-reduced-motion to accommodate different needs. Thoughtful design is inclusive design, and accessible animations are a small change that can make a big difference. If you’re unsure if the animations on your website are accessible or would like an expert partner to help you get started, reach out to 216digital using the contact form below.

    Bobby

    November 14, 2024
    How-to Guides
    Accessibility, animation, How-to, web developers, web development, Website Accessibility
  • Understanding Focus Outlines for Web Accessibility

    Have you ever tried navigating a website without a mouse, relying only on your keyboard? It might seem unusual, but for many people with motor disabilities or visual impairments, this is their everyday reality. Focus outlines—the visual markers that highlight where you are on a page—are essential tools that make this possible.

    Unfortunately, these outlines often get overlooked or even removed during web design, leaving a significant number of users struggling to navigate sites effectively. Let’s break down what focus outlines are, why they matter, and how you can implement them to make your website more inclusive.

    What Is a Focus Outline?

    A focus outline is a visual indicator, often a highlighted border or underline, that appears around a web element when it gains keyboard focus. This outline helps users understand which interactive element they are currently on, whether it’s a link, button, form field, or other focusable component. For example, when a user tabs through a webpage, the focus outline moves from one element to the next, providing a visual cue about their current location on the page.

    This feedback is essential for users who cannot use a mouse and instead navigate by pressing the “Tab” key to move forward and “Shift + Tab” to move backward. For those relying on screen readers, focus outlines further aid in understanding the structure of a page, confirming the position on the screen, and reducing the cognitive load required to navigate the web effectively.

    Why Focus Outlines Matter for Accessibility

    Focus outlines aren’t just nice to have—they’re a must-have for accessibility. According to the Web Content Accessibility Guidelines (WCAG), specifically criterion 2.4.7: Focus Visible, mandate that any keyboard-operable interface must have a visible focus indicator. This ensures that users relying on keyboard navigation always know where they are on the page.

    Who Benefits from Focus Outlines?

    For users with motor disabilities, such as those who have difficulty controlling fine motor movements or are unable to use a mouse, keyboard navigation is a primary means of interacting with digital content. The focus outline serves as a reliable marker of where they are on the page, making navigation smooth and efficient. People with low vision or visual impairments who use high-contrast settings also rely on focus outlines for an additional layer of navigation support, enabling them to visually follow along.

    Legal and Ethical Responsibilities

    Beyond enhancing the user experience, implementing visible focus outlines is a legal and ethical responsibility for organizations. Without them, websites may fail to meet accessibility standards, putting them at risk of non-compliance with the WCAG guidelines. For organizations, following WCAG isn’t just about adhering to regulations; it’s about creating an inclusive experience that all users can navigate.

    How to Create Accessible Focus Outlines

    Making focus outlines accessible and noticeable is all about ensuring they stand out. Here are some tips:

    • Use Sufficient Color Contrast: Choose colors that contrast well with both the element and the background.
    • Choose a Noticeable Style: Solid, dotted, or dashed lines can all work, as long as they’re easily visible.
    • Adjust Thickness: A thicker outline can be more eye-catching and easier to see.

    How to Style Focus States Using CSS

    Outlines can be solid, dotted, or dashed lines, as long as they are visible. Adjusting the thickness can also make the outline more noticeable.

    Example: Basic Focus Outline with CSS

    button:focus,
    a:focus {
      outline: 3px solid #007acc;
    }

    In this example, we’ve applied a 3-pixel solid blue outline to buttons and links when they’re focused. Before finalizing colors, use tools like the WebAIM Contrast Checker to ensure they meet the recommended contrast ratio of at least 3:1 for user interface components.

    Add Background Effects

    For a more custom look, consider adding a background color or shadow effect:

    button:focus {
      outline: none;
      box-shadow: 0 0 5px 2px rgba(0, 122, 204, 0.8);
    }

    This replaces the default outline with a subtle glow, making the focused element stand out without clashing with your design. Just remember to test these styles to ensure they’re visible to everyone, including users with visual impairments.

    Avoiding Common Mistakes with Focus Outlines

    One of the most common pitfalls in web design is removing focus outlines entirely. Designers sometimes find default focus outlines unattractive and may remove them without providing a suitable replacement. While this might make the site look cleaner, it creates significant accessibility barriers for users relying on keyboard navigation. WCAG guideline 2.4.7 requires focus indicators for compliance, so removing focus outlines can result in a failure to meet accessibility standards.

    If you’re tempted to hide the default outline, remember that it’s better to customize it than to remove it. Replacing the outline with a custom design can enhance the aesthetics of your website without sacrificing accessibility. Just ensure that your custom design maintains a strong visual presence and sufficient color contrast.

    Another common mistake is creating focus outlines that blend too closely with the background. This can happen when designers use colors that don’t contrast well with surrounding elements or backgrounds. Remember, users with low vision may struggle to differentiate between similar shades, so it’s essential to test the visibility of focus outlines across various screens and devices.

    Testing Focus Visibility

    Testing is a crucial step to ensure your focus outlines are effective:

    1. Navigate Your Site Using Only the Keyboard: Press the “Tab” key to move through interactive elements and observe the focus outline.
    2. Check Every Interactive Element: Ensure that links, buttons, form fields, and other focusable components have a visible focus state.
    3. Assess Visibility and Consistency: The focus outline should be easily noticeable and consistent across your site.
    4. Accessibility Tools: Tools like Google Lighthouse or WAVE can check WCAG compliance, including focus outlines.

    Make Focus Outlines a Priority

    Focus outlines aren’t just a design detail—they’re a vital part of creating an inclusive web experience. By ensuring your site has clear and consistent focus indicators, you can make your website more accessible for everyone. So, take action today to ensure your website is accessible. Your customers—and your bottom line—will thank you!

    For personalized guidance on making your website ADA compliant, reach out to 216digital for an ADA briefing. Our experts are here to help you navigate the complexities of web accessibility and secure your business against potential legal risks.

    Kayla Laganiere

    November 13, 2024
    How-to Guides
    Accessibility, focus outlines, How-to, web developers, web development, Website Accessibility
Previous Page
1 2 3 4 5 6
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.