Accessible Pop-ups & Captchas: Best Practices for the Accessibility Strengthening Act (BFSG)

From June 28, 2025, the Accessibility Strengthening Act (BFSG) becomes mandatory for digital products and websites. However, many websites violate the requirements – especially through non-accessible pop-ups and unsuitable captchas.

🚨 Problem: Often, pop-ups are inaccessible to screen readers, not operable via keyboard, or captchas are unsolvable for people with disabilities. This leads to poor user experience, increased bounce rates, and potential fines.

Why Pop-ups & Captchas Are Often Not Accessible

The most common barriers on websites arise from:

❌ Lack of keyboard control: Users without a mouse often cannot close pop-ups.

❌ Unreadable captchas: Distorted texts or image captchas are unsolvable for many people.

❌ Screen reader issues: Without ARIA tags, blind users cannot recognize pop-ups.

❌ Automatic pop-ups: Automatically opening windows overwhelm many users.

Best Practices for Accessible Pop-ups & Captchas

1. Designing Accessible Pop-ups Correctly – Combining Usability & Accessibility

✅ Keyboard controllable: Users must be able to navigate with Tab key & Enter.

✅ Activate Escape key (ESC) to close.

✅ Use ARIA tags (aria-labelledby, aria-describedby) for screen readers.

✅ No auto-pop-ups – users should actively decide when content opens.

💡 Good example of an accessible pop-up:

<div role="dialog" aria-labelledby="popup-title" aria-describedby="popup-text">
  <h2 id="popup-title">Newsletter Subscription</h2>
  <p id="popup-text">Enter your email address:</p>
  <button aria-label="Close" onclick="closePopup()">X</button>
</div>

2. Accessible Captchas: Alternatives to Image Verification

Visual captchas often pose a significant hurdle – especially for people with low vision, motor disabilities, or cognitive impairments.

🚫 Common problems:

• Audio captchas without transcripts are inaccessible to many users.
• Blurred text images are unreadable for people with low vision.
• Captchas without accessible alternatives violate WCAG 2.1.
• Tasks with time pressure.

✅ Accessible Captcha Alternatives:

✔ Simple calculation tasks (e.g., 4 + 3 = ?)

✔ Text-based logic questions ("Write the word 'Accessible'")

✔ Audio captchas with clear speech and assistance for blind users

✔ Automatic spam detection without user input

❗ Don't know if your pop-ups & captchas are accessible? Act now with navable!

Checklist: Accessible Pop-ups & Captchas

Accessible Pop-ups

• ✅ Keyboard Accessibility: Pop-up must be reachable and closable via keyboard (e.g., with Esc).

• ✅ Focus Management: Keyboard focus must be set to the pop-up upon opening and must not leave it.

• ✅ Screen Reader Announcement: Pop-up content must be announced by screen readers (e.g., aria-modal="true", role="dialog").

• ✅ Clear Close Option: A clearly visible and labeled close button is mandatory.

Accessible Captchas

• ✅ Alternative for Visually Impaired: Offer audio captchas as an alternative to visual tasks.

• ✅ Alternative for Hearing Impaired: Provide text-based alternatives for audio captchas.

• ✅ Simple Tasks: Captcha tasks should be logical and not overly complex.

• ✅ No Time Limits: Avoid strict time limits for solving.