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
  • 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
  • Keyboard Navigation: A Guide to Accessible Web Testing

    Have you ever tried using the internet without a mouse?

    For millions of people, that’s not just a thought experiment—it’s how they navigate the internet every day. Whether it’s because of physical limitations, visual impairments, or using assistive tech, the keyboard is their main tool. But here’s the thing: if your website doesn’t work smoothly with a keyboard, you’re not just creating a frustrating experience—you’re leaving people behind. 

    So, how does your site stack up? Let’s dive into why keyboard navigation matters and how it plays a key role in building an accessible web.

    Why Keyboard Navigation Matters

    Keyboard navigation is a lifeline for users who can’t rely on a mouse due to physical limitations, visual impairments, or the use of assistive technologies. Moreover, it’s an excellent starting point for testing overall web accessibility. If your website works seamlessly with a keyboard, you’re likely on track to create an inclusive experience for all users.

    How to Navigate a Website with Keyboard Shortcuts

    Before you start testing your website’s accessibility, it’s helpful to understand the most common keyboard shortcuts users rely on. These shortcuts allow people to move through links, buttons, forms, and other interactive elements.

    • Tab Key: Moves focus to the next interactive element.
    • Shift + Tab: Moves focus to the previous element.
    • Enter or Spacebar: Activates a focused element, such as clicking a link or button.
    • Arrow Keys: Scroll through pages or navigate dropdown menus.
    • Escape (Esc): Closes modals, dropdowns, or pop-ups.
    • Ctrl + F: Opens a search bar (in most browsers) to find specific content on the page.

    For Mac users on Safari, enabling full keyboard navigation is a quick adjustment:

    1. Open Safari Preferences.
    2. Go to the Advanced tab.
    3. Check the box next to “Press Tab to highlight each item on a webpage.”

    With these basics in mind, you’re ready to put your website to the test.

    Testing Your Website for Keyboard Navigation

    Keyboard testing doesn’t require fancy tools—just a keyboard, a browser, and a little know-how. Follow this step-by-step guide to evaluate your site’s accessibility.

    Start with the Basics: Can You Navigate Without a Mouse?

    Unplug your mouse and navigate through your homepage and other key pages using only the keyboard. Can you access all essential features and content?

    Check Focus Indicators

    Focus indicators are crucial for users who rely on visual cues. As you use the Tab key, ensure there’s a visible outline around the element currently in focus. Check for the following:

    • The focus indicator is easy to see and contrasts well with the background.
    • The focus moves logically through elements in the order they appear on the page.

    If the focus jumps around or disappears, it creates a frustrating experience for users.

    Test Interactive Elements

    Interactive elements like buttons, links, and form fields should be fully accessible. Specifically:

    • Can you submit a form using the Enter or Spacebar key?
    • Can you open and close modals or dropdown menus with the keyboard?
    • Do navigation menus function seamlessly?

    Verify Skip Navigation Links

    Skip navigation links allow users to bypass repetitive elements, like menus, and jump straight to the main content. To check this:

    • Ensure the skip navigation link is present and functional.
    • Verify it’s one of the first focusable elements when using the Tab key.

    Watch Out for Keyboard Traps

    Keyboard traps occur when users get stuck in an element, like a modal or widget, and can’t move forward. Ensure users can exit these areas by pressing the Escape key or tabbing out.

    Tips for Better Keyboard Navigation

    Creating an accessible website doesn’t happen by accident. Here are a few tips to enhance keyboard navigation for all users:

    • Design with Focus in Mind: Use CSS to style focus outlines for clarity and visibility. Avoid removing focus outlines entirely.
    • Ensure Logical Focus Order: Use semantic HTML (e.g., <button> and <a>) and avoid custom elements that might disrupt natural focus flow.
    • Leverage ARIA Roles and Labels: Use ARIA (Accessible Rich Internet Applications) roles and labels to make custom components like sliders or dropdowns keyboard accessible.
    • Test Regularly: Accessibility is not a one-and-done task. Regular testing ensures your website stays accessible as it evolves.

    Common Challenges and How to Address Them

    Even with the best intentions, challenges may arise. Here are some common issues and solutions:

    • Invisible Focus: Use the :focus pseudo-class in CSS to style interactive elements for better visibility.
    • Complex Widgets: Components like carousels or accordions can lack keyboard support. Build these elements with accessibility in mind or use accessible libraries.
    • Poorly Labeled Links: Ensure all links and buttons have clear, descriptive text or labels so users know what action they’ll perform.

    Why Focus on Keyboard Navigation?

    Beyond accessibility, testing your website for keyboard navigation improves overall user experience and usability. Keyboard accessibility is often a foundation for ensuring compatibility with screen readers and other assistive technologies. If your website works well for a keyboard user, it’s likely on its way to meeting broader accessibility standards like WCAG 2.1.

    Next Steps: Make Your Website Keyboard-Accessible

    Keyboard navigation is more than just a best practice—it’s a cornerstone of inclusive design that invites everyone to participate fully on the web. By ensuring your site is keyboard-accessible, you create a welcoming experience for users of all abilities, reinforce your brand’s commitment to accessibility, and lay a strong foundation for broader ADA compliance.

    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

    December 24, 2024
    How-to Guides, Testing & Remediation
    Accessibility testing, keyboard accessibility, Keyboard Navigation, User Experience, Web Accessibility
  • How to Test a Website for Accessibility

    Making sure your website works for everyone, including people with disabilities, isn’t just the right thing to do—it’s essential. Accessibility testing helps you find and fix issues that could make your site tough to use for people with visual, hearing, cognitive, or mobility impairments. Whether you’re a web developer, IT pro, or content creator, knowing how to test for accessibility can save you headaches—and money—later.

    In this guide, we’ll cover some simple, effective ways to check your site’s accessibility. Don’t worry; you don’t need to be an expert to get started. Let’s dive in!

    Why Website Accessibility Testing Matters

    Accessibility testing ensures your website is welcoming to everyone, regardless of their abilities. It also helps you stay in line with important standards like the Web Content Accessibility Guidelines (WCAG) and legal requirements like the Americans with Disabilities Act (ADA).

    But it’s not just about compliance—it’s about creating a better experience for all your users. For example:

    • Clear, organized content helps screen readers and makes reading easier for everyone.
    • Good color contrast improves visibility, whether you’re in bright sunlight or a dim room.
    • Keyboard-friendly navigation benefits people who can’t use a mouse and even power users who prefer shortcuts.

    Accessibility doesn’t just check a box—it enhances your site for everyone.

    Quick Accessibility Testing Methods

    You don’t need a deep dive into the world of accessibility to start testing your website. There are three main ways to test:

    1. Automated Testing
    2. Manual Testing
    3. Assistive Technology Testing

    Each method offers unique insights. Using them together? That’s your golden ticket to a more accessible site.

    Automated Accessibility Testing

    Automated tools are perfect for a quick scan. They flag common issues like missing alt text, messy headings, or poor color contrast. Think of them as a helpful starting point, not the end-all solution.

    Here are a few tools to get you started:

    • WAVE (Web Accessibility Evaluation Tool): This browser extension highlights issues like missing alt text and improper ARIA attributes. Bonus: It’s free and super easy to use.
    • Google Lighthouse: Built right into Chrome’s DevTools, it gives your site an accessibility score and helpful feedback.
    • WebAIM’s Contrast Checker: This tool ensures your text and background colors meet WCAG’s contrast requirements.

    Pro Tip: Automated tools are great, but they’re not perfect. They might miss subtler issues or flag things that aren’t actually problems. Treat them as step one, not the whole process.

    Manual Accessibility Testing

    Sometimes, you need a human touch. Manual testing simulates real-world user experiences to catch what tools can’t.

    Try These Tests:

    • Keyboard Navigation Test:
      • Use the Tab key to move around your site. Can you access every link, button, and form?
      • Is there a visible focus indicator (like a highlight) on selected elements?
      • Does the navigation flow make sense?
      • If you can’t complete tasks like filling out a form or navigating menus, there’s work to do.
    • Color Contrast Test:
      • Use WebAIM’s Contrast Checker to make sure your text is easy to read against its background.
      • Aim for a 4.5:1 contrast ratio for normal text and 3:1 for large text (18px or larger).
    • Alt Text for Images:
      • Check your images. Does the alt text describe their content or purpose?
      • Decorative images? They should have empty alt text (e.g., alt=””).
    • Forms and Error Messages:
      • Are form labels clear?
      • Do error messages explain what went wrong and how to fix it?

    For further details on manual testing, please read our article “The Human Touch: Manual Testing for Web Accessibility.”

    Testing with Assistive Technologies

    If you want the real deal, test your site with the tools your users rely on. Screen readers like NVDA (NonVisual Desktop Access) offer invaluable insights into how accessible your site really is.

    What to Check:

    • Is the content reading in a logical order?
    • Are links clear and descriptive?
    • Does alt text accurately describe images?

    Testing with assistive tech gives you a firsthand look at your site’s usability.

    Common Accessibility Issues to Watch For

    As you test, keep an eye out for these usual suspects:

    • Missing or unhelpful alt text.
    • Low color contrast.
    • Skipped heading levels (like jumping from H2 to H4).
    • Keyboard traps where navigation gets stuck.
    • Forms without labels or clear error messages.
    • No visible focus indicators for buttons or links.

    The Limitations of Quick Tests

    Quick tests are awesome for a first pass, but they won’t catch everything. For example:

    • They might miss problems with interactive elements or dynamic content.
    • They don’t always account for users with cognitive disabilities.

    For a deeper dive, consider a professional audit. Experts can evaluate your site with advanced tools, manual reviews, and assistive tech to ensure you’re fully WCAG-compliant.

    Why Overlays Aren’t the Solution

    You might’ve seen tools promising quick fixes with overlays or widgets. Sounds tempting, right? But these “solutions” often create more problems than they solve.

    Here’s Why Overlays Fall Short:

    • They don’t address underlying code issues.
    • They can clash with screen readers and other assistive technologies.
    • They frustrate users instead of helping them.

    Real accessibility starts with your site’s design and development, not a temporary patch.

    Wrapping It Up: A Holistic Approach to Accessibility

    Testing your website for accessibility doesn’t have to be overwhelming. By starting with automated tools like WAVE or Google Lighthouse and layering in manual checks for keyboard navigation, color contrast, and assistive technology testing, you can create a more inclusive experience for all users.

    But remember, quick tests are just the beginning. Regular testing and professional audits ensure your website meets accessibility standards and provides the best possible user experience.

    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

    December 16, 2024
    How-to Guides, Testing & Remediation
    Accessibility, Accessibility Remediation, Accessibility testing, Web Accessibility Remediation, Website Accessibility
  • Why Accessibility Is Key to UX Success

    Here’s a secret: websites that are easier to use for people with disabilities are easier to use for everyone. Applying simple HTML5 core concepts like semantic markup and landmark regions will naturally make your website easier to navigate with a keyboard and have a more logical structure. This is great for onsite SEO, user experience (UX) – and web accessibility, with no additional effort required.

    How Web Accessibility Enhances UX

    At its core, web accessibility is about removing barriers that might prevent people from using your site. When a website is accessible, it’s usable by everyone—regardless of their abilities, devices, or environments.

    Here’s how accessibility directly impacts UX:

    Improved Usability for All

    Accessible design benefits people with disabilities and creates a better experience for everyone. Features like straightforward navigation, readable fonts, and intuitive layouts make your site easier to use, regardless of age, device, or tech-savviness.

    Inclusive Design for Diverse Audiences

    Accessibility ensures your site is usable for people with visual, auditory, cognitive, or motor disabilities. For example:

    • Screen reader support helps blind or low-vision users navigate content.
    • Keyboard-friendly navigation aids people with motor impairments.
    • Clear text and structure assist individuals with cognitive challenges.

    Enhanced Mobile Experience

    Basic accessibility principles—like scalable typography, responsive layouts, and touch-friendly designs—naturally improve mobile usability. Mobile users account for significant web traffic.

    The Benefits of Accessible Design

    Investing in web accessibility isn’t just the right thing to do—it’s also good business. Here are some key benefits:

    Reaching a Wider Audience

    Approximately 15% of the global population lives with some form of disability. By ensuring your site is accessible, you’re inviting millions of potential customers to engage with your content and services.

    Boosting SEO

    Accessible websites often perform better in search engine rankings. Practices like adding alt text for images, using descriptive headings, and providing transcripts for videos improve your SEO by making your content easier for search engines to index.

    Building a Positive Brand Image

    A commitment to accessibility shows your audience that you care about inclusivity. This fosters trust, strengthens your reputation, and makes your brand socially responsible.

    Legal Compliance and Risk Reduction

    Accessible websites help you comply with regulations like the Americans with Disabilities Act (ADA) and Web Content Accessibility Guidelines (WCAG), reducing the risk of lawsuits or fines.

    Overcoming Challenges in Accessibility

    Despite its benefits, implementing accessibility can come with challenges:

    Misconceptions About Accessibility

    Some believe accessibility only benefits a small audience or that it’s too costly or complex to implement. In reality, accessibility improves UX for all users and can be cost-effective when integrated early.

    Technical Hurdles

    Developers might need help understanding WCAG guidelines or implementing complex ARIA roles. Clear documentation and ongoing education can address this.

    Resistance to Change

    Most teams have enough on their plates and do not want to add any additional steps to their existing workflows. However, building a general awareness of accessibility concepts will naturally improve your site’s inclusivity without any extra work.

    Strategies for Integrating Accessibility Into UX Design

    To create a truly inclusive experience, accessibility needs to be a priority from the start. Here’s how to integrate it into your design process:

    Start Early in the Design Process

    Accessibility is most uncomplicated to implement when it’s considered from the beginning. Start with semantic HTML, readable fonts, and a logical content structure.

    Focus on User Testing

    Test your site with real users, including those with disabilities. Tools like screen readers and keyboard navigation can simulate some experiences, but real feedback is invaluable.

    Use Accessibility Tools

    Incorporate tools like:

    • Lighthouse: Google’s tool for auditing accessibility, performance, and SEO.
    • WAVE: An accessibility evaluation tool that highlights issues directly on your site.

    Educate Your Team

    Train designers, developers, and content creators to understand accessibility principles and WCAG guidelines. Make accessibility a team-wide responsibility.

    Iterate and Improve

    Accessibility isn’t a one-and-done task. Regularly review your site for compliance, usability, and opportunities for improvement.

    Practical Tips for Accessible UX

    Here are some specific ways to improve accessibility while enhancing UX:

    Prioritize Clear Navigation

    Ensure menus are intuitive and consistent across devices. Use breadcrumbs, logical page hierarchy, and descriptive labels to guide users.

    Provide Text Alternatives

    Add alt text to images, video captions, and audio content transcripts. This makes your media accessible to screen readers and enhances SEO.

    Design for Keyboard Navigation

    Ensure all interactive elements—buttons, links, forms—are reachable and operable using just a keyboard.

    button:focus {  
      outline: 3px solid #005fcc;  
    }  

    Ensure Sufficient Color Contrast

    Low contrast can make text unreadable for users with low vision. Use tools like the Contrast Checker to verify WCAG-compliant contrast ratios.

    Use ARIA Sparingly

    Accessible Rich Internet Applications (ARIA) roles can enhance accessibility but shouldn’t replace semantic HTML. Use ARIA roles to clarify interactive components, like modals or accordions.

    Accessibility’s Role in a Better Web

    When accessibility and UX align, everyone wins. Your site becomes more straightforward to use, more engaging, and more inclusive. For users with disabilities, accessible design opens doors to equal participation in the digital world. For businesses, it means more satisfied customers, better performance metrics, and a stronger reputation.

    As the web continues to evolve, let’s commit to creating digital spaces that are open and enjoyable for all. Accessibility isn’t a barrier—it’s the foundation of great UX.

    If you would like to evaluate your site’s user experience for everyone, including users with disabilities, reach out to 216digital using the contact form below.

    Greg McNeil

    December 12, 2024
    How-to Guides, The Benefits of Web Accessibility
    Accessibility, Accessible Design, User Experience, UX, Web Accessible Design, 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
  • Small Design Choices, Big Accessibility Wins for All E-Commerce

    In the ever-evolving world of online shopping, small design choices can have a massive impact on customer experience—especially when it comes to accessibility. The beauty of accessible design isn’t just about meeting legal requirements; it’s about creating a shopping environment where everyone, regardless of their abilities, can navigate, interact, and complete purchases effortlessly. For e-commerce businesses, embracing accessibility means happier customers, improved loyalty, and ultimately, higher sales. Let’s explore some easy-to-implement design changes that can create big wins for your e-commerce store.

    Skip Navigation Links: A Keyboard and Screen Reader Lifesaver

    For many e-commerce users, particularly those who rely on screen readers or navigate using keyboards, skip navigation links are game-changers. These simple links allow users to bypass repetitive menus and jump straight to the main content.

    Imagine browsing an e-commerce site with dozens of product categories listed in a navigation bar. For someone tabbing through every link, it could feel like running a marathon before even reaching the product descriptions. Skip navigation links eliminate this hassle, ensuring users can quickly find what they’re looking for. Plus, it’s not just about accessibility—it’s about efficiency for all users.

    How to Implement

    Here’s an example of a skip navigation link implemented in HTML and CSS:

    <a href="#main-content" class="skip-link sr-only">Skip to Main Content</a>
    
    .sr-only { 
      position: absolute; left: -10000px; 
    } 
    .skip-link { 
      color: black; background-color: white; padding: 12px; border: 2px solid black; border-radius: 5px; z-index: 999; 
    } 
    .skip-link:focus-visible { 
      left: 0px; 
    }
    

    Add an id to the main content section to link to it:

    <div id="main-content">
      <!-- Main content goes here -->
    </div>

    This ensures the link appears only when focused, providing a seamless experience for keyboard users.

    Quick Links: Streamline Product Page Navigation

    E-commerce product pages often pack in a wealth of information, from product descriptions and specifications to reviews and related products. While comprehensive details are a plus, they can also feel overwhelming. That’s where quick links come in.

    By adding anchor links at the top of product pages, you give customers the option to jump directly to the section they care about most. Whether it’s “Customer Reviews,” “Specifications,” or “Add to Cart,” quick links make the browsing experience smooth and satisfying. This small touch can be a big win for users with disabilities, who might otherwise struggle to scroll through dense pages.

    How to Implement

    Use anchor links combined with id attributes:

    <nav>
      <ul>
        <li><a href="#description">Description</a></li>
        <li><a href="#specs">Specifications</a></li>
        <li><a href="#reviews">Customer Reviews</a></li>
      </ul>
    </nav>
    
    <section id="description">
      <h2>Product Description</h2>
      <p>Details about the product...</p>
    </section>
    
    <section id="specs">
      <h2>Specifications</h2>
      <p>Technical details...</p>
    </section>
    
    <section id="reviews">
      <h2>Customer Reviews</h2>
      <p>What customers are saying...</p>
    </section>

    Anchor links make navigation more accessible for all users, particularly those using assistive technologies.

    Repeated Call-to-Actions: Boost Engagement on Lengthy Pages

    Sometimes, e-commerce pages are lengthy by necessity—think of category pages featuring hundreds of products or detailed FAQs. Repeating key call-to-action (CTA) buttons, like “Add to Cart” or “Subscribe,” ensures users always have easy access to the next step.

    Why does this matter? For users with mobility issues or those navigating on mobile devices, scrolling back to the top for a CTA can be frustrating. A well-placed button at regular intervals keeps the experience seamless and reduces the risk of abandonment.

    To learn more about CTA’s and web accessibility, check out our article “Why ‘Click Here’ Hurts Your Website’s Accessibility.“

    How to Implement

    Here’s an example of a repeated CTA in HTML:

    <section>
      <p>Great deals await! Don’t miss out.</p>
      <a href="/checkout" class="cta-button">Add to Cart</a>
    </section>
    <section>
      <p>Ready to buy? Click below.</p>
      <a href="/checkout" class="cta-button">Add to Cart</a>
    </section>

    Enhance with CSS for visibility:

    .cta-button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      text-decoration: none;
      font-size: 16px;
      border-radius: 5px;
    }
    .cta-button:hover {
      background-color: #0056b3;
    }

    High Contrast Colors: Accessibility Meets Visual Appeal

    Choosing high-contrast color combinations is one of the simplest yet most impactful accessibility adjustments an e-commerce site can make. Text should always stand out against its background, ensuring readability for users with low vision or color blindness.

    For instance, pairing black text on a white background is a classic high-contrast choice. Avoid combinations like light gray text on a white background—it may look sleek, but it’s a nightmare for users with visual impairments. Use online contrast checkers to ensure your color scheme meets Web Content Accessibility Guidelines (WCAG) standards.

    Descriptive Alt Text: Elevate Your Product Images

    Images play a starring role in e-commerce. From close-up shots of fabrics to 360-degree views of products, visuals help customers make informed decisions. But what about users who can’t see the images?

    Enter descriptive alt text. This essential element of accessible design provides text-based descriptions of images, allowing screen readers to convey their content. For example, instead of “Image of a shirt,” use something like “Blue cotton button-down shirt with long sleeves and a slim fit.” Not only does this help visually impaired users, but it also boosts your SEO, making your e-commerce site more discoverable.

    How to Implement

    Add descriptive alt text to your images in the alt attribute:

    <img src="blue-shirt.jpg" alt="Blue cotton button-down shirt with long sleeves and a slim fit">

    Accessible Forms: Smooth Checkout Experiences

    Forms are a staple of e-commerce, whether for creating accounts, signing up for newsletters, or completing purchases. Yet, poorly designed forms can alienate customers with disabilities.

    To ensure your forms are accessible:

    • Use clear labels for every field, even if it seems obvious.
    • Include error messages that explain the problem in plain language, like “Please enter a valid email address.”
    • Add focus indicators to show users where they are on the page as they tab through the form.

    These small changes make the checkout process easier for all customers while reducing cart abandonment rates.

    How to Implement

    Use clear labels, error messages, and focus indicators:

    <form>
      <label for="email">Email Address</label>
      <input type="email" id="email" name="email" required>
      
      <span id="error-message" style="color: red; display: none;">
        Please enter a valid email address.
      </span>
      <button type="submit">Submit</button>
    </form>

    Add JavaScript to show error messages dynamically:

    document.querySelector('form').addEventListener('submit', function(event) {
      const emailField = document.getElementById('email');
      if (!emailField.value.includes('@')) {
        event.preventDefault();
        document.getElementById('error-message').style.display = 'block';
      }
    });

    Ensure focus indicators are clear for keyboard users:

    input:focus {
      outline: 2px solid #007bff;
    }

    Accessibility Benefits Everyone

    While these features are designed with accessibility in mind, they often enhance the overall e-commerce experience for all users. For example, quick links and repeated CTAs aren’t just for users with disabilities—they make navigating long pages faster for everyone. High-contrast colors don’t only help users with low vision; they’re also easier to read in bright sunlight on mobile devices.

    Inclusive design doesn’t just expand your audience; it builds trust. Customers recognize and appreciate when a business goes the extra mile to ensure their shopping experience is smooth and enjoyable.

    The Payoff: Happier Customers and Higher Sales

    By incorporating accessibility features, you’re not just meeting legal obligations—you’re investing in your customers’ satisfaction. When customers feel valued and supported, they’re more likely to complete purchases, leave positive reviews, and return for future shopping. The result? A stronger, more inclusive e-commerce brand that thrives in today’s competitive market.

    Ready to take the next step? Schedule an ADA briefing with 216digital today to explore how accessibility can elevate your e-commerce site. Simply use the contact form at the bottom of this page to get started. Let’s work together to create a better online shopping experience for all!

    Make the change. Create an e-commerce experience that works for all—and watch as those small design choices turn into big accessibility wins!

    Greg McNeil

    December 6, 2024
    How-to Guides, The Benefits of Web Accessibility
    Accessibility, e-Commerce, ecommerce website, How-to, Web 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
  • The Human Touch: Manual Testing for Web Accessibility

    Developing an accessible website goes far beyond simply checking off boxes for legal or regulatory compliance. It’s about making sure that every person, regardless of ability, can comfortably interact with and understand your online content. While automated tools are excellent for quickly spotting many accessibility problems, they can only take you so far. To catch the subtler issues—the ones that can truly affect the user experience—you need the human touch.

    This guide will walk you through the essentials of manual testing. By following these steps, you’ll ensure that your website meets the standards of the Web Content Accessibility Guidelines (WCAG) and provides an inclusive experience for everyone.

    Why Manual Testing is Important

    It might seem tempting to rely only on automated tools for accessibility testing. After all, these tools are fast, can scan entire sites in minutes, and give you neat reports listing potential issues. While that’s helpful, there’s an important piece of the puzzle they can’t fill in on their own.

    Studies suggest that automated tools detect only about 30% of accessibility barriers on a website. That means a whopping 70% of potential issues can go unnoticed if you don’t involve human testers. Why does this happen? Because many aspects of accessibility are about meaning, clarity, and usability—qualities that a computer program can’t fully judge.

    For example, an automated tool can tell if an image tag has “alt” text, but it can’t determine if that text accurately describes what’s in the image. A tool might confirm that you’ve included headings, but it can’t decide if those headings help users understand the structure and purpose of your page.

    Manual testing allows you to catch these subtle issues. By combining automated scans with hands-on checks, you’ll create a complete approach to accessibility. This balanced method ensures that both the technical side and the real-life user experience are taken into account, leading to a more inclusive and welcoming digital environment.

    What Is Included in a Manual Audit?

    If you’re aiming for a website that not only checks the boxes on WCAG compliance but genuinely serves people of all abilities, a manual audit is key. The process involves a series of steps, from planning your testing scope to verifying that users can interact with your site in many different ways. Below, we’ll break down some core areas to consider in your manual testing efforts.

    Developing a Testing Plan

    Think of your testing plan as your roadmap. Before you begin, decide which pages, sections, and features of your site you’ll test. Maybe you’ll start with your homepage, or perhaps you’ll focus on your online store’s product pages, since that’s where most visitors end up. Consider the parts of your site that handle important tasks, like your checkout process or contact forms. These areas often matter most to users and should be top priorities.

    Creating a well-structured plan helps you stay on track. As you test, keep good notes. Document where you find issues, what kind of barriers they create, and ideas for fixing them. This record will not only guide your repair work but also help you understand how your site’s accessibility improves over time.

    Evaluating Keyboard Navigation

    A simple yet powerful first step is to test your website using only a keyboard. Many individuals rely on a keyboard instead of a mouse because of physical or visual impairments. To do this, unplug your mouse and try navigating your site with the Tab, Shift + Tab, Enter, and arrow keys.

    As you move through links, buttons, menus, and form fields, watch for a visible highlight or outline showing which element is currently selected (often called the “focus indicator”). If your focus gets “stuck” or disappears, that’s a sign of a problem. Users who depend on keyboard navigation should be able to move through your entire site easily and understand exactly where they are at all times.

    If you find any trouble spots—like a pop-up menu that traps the focus—make note of it. Fixing these issues can make your site smoother and more intuitive for a wide range of visitors.

    Manual Testing Compatibility with Screen Readers

    Screen readers, such as NVDA, JAWS, and VoiceOver, help users with visual impairments navigate the web by reading page content aloud. To test compatibility, pick one of these tools and open your website. As you listen, ask yourself: Is the content announced in a clear, logical order? Do headings, links, and images make sense when read aloud?

    Pay special attention to images. If an image conveys important information, its alt text should describe what’s shown and why it matters. If an image is only decorative, it should have a null alt attribute, so the screen reader will skip it. Your goal is to ensure that someone who can’t see the screen can still understand what’s there and how to interact with it.

    Checking Color Contrast

    Good color contrast isn’t just about making your site look nice—it’s about ensuring that everyone can read your content comfortably. People with low vision or color blindness might struggle to read text that doesn’t stand out enough from the background.

    Use tools like WebAIM’s Contrast Checker to test your text and background color combinations. If the contrast is too low, adjust your colors until they meet the guidelines. Even a small improvement can make a big difference in how well users can read and engage with your content.

    Reviewing Captions for Multimedia Content

    Videos and audio clips add depth and interest to your site, but they also need to be accessible. Captions ensure that users who are deaf or hard of hearing can understand spoken content. If your videos have dialogue, instructions, or any important information, make sure they come with accurate captions that match the timing and meaning of the audio.

    In some cases, you might need audio descriptions for users who can’t see the visuals. If your video shows data charts, important text, or other key details, consider adding a voice-over description to explain what’s on the screen.

    Ensuring Accessible Forms

    Forms are essential parts of many websites, whether they’re for signing up for a newsletter, making a purchase, or submitting a support request. Yet forms often pose accessibility challenges when they’re not labeled or organized correctly.

    To test form accessibility, try navigating your forms using a keyboard and a screen reader. Do form fields have clear labels that the screen reader announces as you move through them? When errors occur, do the error messages explain the problem in simple terms and guide the user to fix it?

    Paying extra attention to forms can go a long way toward making your site welcoming and easy to use.

    Testing Skip Navigation Links

    Skip navigation links are small but mighty features. They let users skip over repetitive elements—such as large navigation menus—and jump straight to the main content. This is especially helpful for those who rely on a keyboard or a screen reader, as it saves them from having to tab through the same menu items over and over.

    To check for skip navigation links, start navigating your site from the top. See if there’s a “Skip to main content” link or something similar. If it’s missing, adding one can make browsing much more efficient for many users.

    Verifying Link Text

    Have you ever seen a link that just says “click here”? Without surrounding context, that’s not very helpful. People using screen readers often scan links out of their context, so vague link text can be confusing.

    Review all the links on your site and ask yourself: Does the text describe the link’s purpose? For example, “Click here for our latest report” is less helpful than “Download our latest report.” The latter tells users exactly what they’ll get if they follow that link.

    Reviewing Dynamic Content

    Modern websites often feature dynamic elements like pop-ups, slideshows, or modal windows. While these can be visually appealing and helpful, they can also cause confusion if not set up properly. For instance, a modal window might appear over the rest of the content, but if a screen reader user isn’t informed that it popped up, they might continue reading the content behind it without knowing there’s something else to consider.

    Test these features by opening them with a keyboard and listening with a screen reader. Make sure the screen reader announces the new content and that it’s easy to close the pop-up and return to the main page content. Users should feel in control of their experience at all times.

    Documenting Issues and Prioritizing Fixes

    As you work through manual testing, keep detailed notes. Write down any issues you find, along with the steps you’ll need to correct them. Consider how severe each problem is: Does it block users from completing critical tasks, or is it a minor inconvenience?

    By sorting issues into categories—such as “high priority” or “low priority”—you can tackle the most urgent problems first. This approach helps you make steady progress and ensures that you address the biggest barriers right away.

    Building a More Inclusive Website with 216digital

    Manual testing might feel like a big job, but it’s a crucial part of creating a web experience that works for everyone. By planning your testing, checking keyboard navigation, using screen readers, ensuring proper color contrast, reviewing captions, making forms accessible, adding skip links, refining link text, and handling dynamic content correctly, you’ll identify and fix the issues that really matter.

    When your website meets WCAG guidelines and is comfortable to use for people of all abilities, you strengthen your brand’s reputation and reach a wider audience. It’s not just about avoiding legal risks or ticking compliance boxes—though that’s important, too. It’s about showing that you value every visitor and believe they deserve equal access to your information, products, and services.

    If you’re looking for personalized help in making your website ADA compliant, consider reaching out to 216digital. Our experts can provide an ADA briefing and guide you through the finer points of web accessibility, ensuring that you create an inclusive, user-friendly online environment that supports everyone who visits your site.

    Greg McNeil

    December 3, 2024
    How-to Guides, Testing & Remediation
    Accessibility, Accessibility testing, manual audit, Manual Testing, WCAG
  • 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
Previous Page
1 … 3 4 5 6 7 … 9
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.