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
  • How to Make Your Website’s Pop-Ups Accessible

    Pop-ups are often used on websites to capture leads, promote special offers, or guide users through certain actions. However, while they can be powerful tools for engagement, they can also be a nightmare for users, especially those with disabilities. An inaccessible pop-up can frustrate users, prevent them from completing tasks, or even drive them away from your site.

    To ensure your pop-ups enhance the user experience for everyone, including those using assistive technology, it’s essential to focus on accessibility. Let’s dive into the challenges of pop-ups and explore actionable steps and coding techniques to make them accessible.

    Challenges of Website Pop-Ups for Accessibility

    Hard to Close or Dismiss

    One of the most common complaints about pop-ups is how difficult they can be to close. Whether it’s a tiny “X” button or a disappearing background overlay, some pop-ups seem almost impossible to dismiss without frustration. For users with mobility impairments, small targets like these can be especially problematic. Additionally, people who rely on keyboards or screen readers may not be able to easily navigate to the close button.

    Improperly Labeled Pop-Ups

    Screen reader users rely heavily on clear labels and descriptions to understand the content on a page. When a pop-up appears without proper labeling, it can be incredibly confusing. If there’s no clear announcement of what the pop-up is for or if the content isn’t properly described, these users may struggle to engage with the pop-up at all.

    Focus Trap

    A “focus trap” happens when a user is unable to move out of the pop-up window using their keyboard. This can cause frustration and make it difficult, if not impossible, to return to the main content. For users who rely on keyboard navigation, a focus trap can completely halt their browsing experience.

    Disruption of Browsing Experience

    A poorly timed or intrusive pop-up can disrupt the browsing experience for all users, but it’s especially challenging for people with disabilities. Imagine navigating a website with a screen reader, and a pop-up interrupts your flow. If the pop-up isn’t well integrated or easy to dismiss, it can leave users feeling lost or overwhelmed.

    Now that we’ve identified the challenges, let’s explore how to address these issues and ensure your pop-ups are accessible to everyone.

    Best Practices for Accessible Pop-Ups

    Make Sure Pop-Ups Are Easy to Close

    One of the easiest ways to make your pop-ups more user-friendly is to ensure they’re easy to close. Provide a large, clearly visible close button, and place it in a predictable spot, like the top-right corner of the pop-up. Avoid small, hard-to-click targets, especially for users with mobility issues.

    Code Tip: Include a Keyboard Shortcut

    Make sure the pop-up can be dismissed using the Esc key. Adding this functionality allows keyboard users to close the pop-up quickly, without needing to navigate to a specific button.

    document.addEventListener('keydown', function(event) {
      if (event.key === "Escape") {
        closePopup();
      }
    });

    In this example, the Esc key is programmed to trigger the closePopup() function, providing an easy way to dismiss the pop-up.

    Properly Label the Pop-Up for Screen Readers

    When a pop-up appears, it should be immediately announced to users who rely on screen readers. This helps provide context so they can understand what’s happening on the page. You can do this by using ARIA (Accessible Rich Internet Applications) attributes.

    Code Tip: Use ARIA Attributes for Accessibility

    <div role="dialog" aria-labelledby="popupTitle" aria-describedby="popupDescription">
     <h2 id="popupTitle">Special Offer</h2>
      <p id="popupDescription">Get 20% off your next purchase when you sign up for our newsletter.</p>
    </div>

    In this code, the role="dialog” attribute lets screen readers know that a pop-up window (dialog box) has appeared. The aria-labelledby and aria-describedby attributes provide titles and descriptions that help users understand what the pop-up is about.

    Prevent Focus Trapping

    A common accessibility mistake with pop-ups is trapping focus within the pop-up window, which prevents keyboard users from returning to the main content. To avoid this, ensure that users can freely navigate between the pop-up and the rest of the page.

    Code Tip: Manage Focus Correctly

    When the pop-up opens, move the user’s focus to the first interactive element (like a form field or close button). When the pop-up closes, return focus to the element that triggered it, allowing users to continue where they left off.

    const popup = document.getElementById("popup");
    const triggerButton = document.getElementById("triggerPopup");
    triggerButton.addEventListener('click', function() {
      popup.style.display = "block";
      popup.querySelector('input').focus(); // Move focus to the first element in the popup
    });
    function closePopup() {
      popup.style.display = "none";
      triggerButton.focus(); // Return focus to the triggering element
    }

    Avoid Disrupting the Browsing Experience

    Pop-ups should never interrupt the user’s browsing experience unexpectedly. It’s important to trigger pop-ups at the right time and make them easy to interact with.

    • Don’t use pop-ups on page load – This can be jarring for users, especially those using screen readers. Instead, trigger pop-ups based on user action, like clicking a button or scrolling to a specific section of the page.
    • Use overlays carefully – Ensure that any background overlay that appears when a pop-up opens doesn’t obscure important content or make it difficult for users to navigate.
    • Provide Accessible Text for Pop-Up Links and Buttons

    You should clearly label and make the buttons and links in your pop-up easy to understand.Avoid generic text like “Click Here” or “Submit.” Instead, use descriptive text that explains the action.

    Example:

    • Good: “Sign Up for Our Newsletter”
    • Bad: “Submit”

    This helps all users, including those using screen readers, understand exactly what will happen when they click on a button.

    Keep the Design Simple and Clear

    Simplicity is key when it comes to accessible pop-ups. Avoid cluttering the pop-up with too much information or distracting animations. Use high-contrast colors and large, readable fonts to make the content easy to digest.

    Test with Real Users and Assistive Technologies

    The best way to ensure your pop-ups are truly accessible is to test them with real users, especially those who rely on assistive technologies. Tools like screen readers, voice commands, and keyboard-only navigation can help you understand how users will interact with your pop-up.

    Tools for Testing Pop-Up Accessibility:

    • Screen readers: Test your pop-up with screen readers like NVDA (NonVisual Desktop Access) or JAWS (Job Access With Speech).
    • Keyboard navigation: Make sure all interactive elements in the pop-up can be accessed using only a keyboard.
    • Accessibility checkers: Use automated tools like WAVE or Axe to scan your site for accessibility issues.

    Make a Pop with 216digital

    Making sure your website’s pop-ups are accessible isn’t just about ticking boxes—it’s about making sure everyone has a great experience on your site. Simple steps like ensuring your pop-ups are easy to close, clearly labeled, and don’t trap users can make a big difference in how people interact with your content.

    Whether you’re a website owner, developer, or content creator, making your pop-ups accessible means more people can engage with what you have to offer. It also shows that you care about creating a web experience that everyone can enjoy.

    To take your pop-ups from good to great, consider scheduling an ADA briefing with 216digital. We’ll help you make thoughtful adjustments and test your pop-ups with assistive technologies to ensure they enhance, rather than hinder, the user experience. Let’s work together to make sure your pop-ups are welcoming and accessible to all your visitors!

    Greg McNeil

    September 13, 2024
    How-to Guides
    digital accessibility, How-to, pop-ups, Web Accessibility, web development
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.