How to Make Accessible Popups

Welcome to another installment of Accessibility Weekly! This week we’re going to talk about best practices and techniques to make sure that popups or modals are usable by everyone.

Elements of Accessible Popups

Whether you have a message that pops up automatically when someone visits the website (such as a cookie notice or email list opt-in form) or a modal that opens on user interaction (such as a search form that opens after clicking on a button in the nav), here is the expected behavior for accessible popups or modals:

• When the popup appears, screen reader users should be notified of its presence with a clear and concise message.
• When the popup opens, the keyboard focus should be automatically shifted into or around the popup.
• All interactive elements within the popup or modal, such as buttons, form fields, and links, should be keyboard accessible, allowing keyboard-only users to interact with them using the “Enter” key or other keyboard commands.
• All interactive elements in the popup should have clear focus indicators when tabbed to.
• There should be a “focus lock” on the popup so that it is not possible to tab outside and beyond it while it is still open.
• If the popup contains important information or instructions, screen reader users should be able to access this content using screen reader commands, such as reading the content within a dialog or reading alternative content provided for users who cannot view the popup or modal.
• If there are any errors or validation messages within the popup, screen reader users should receive clear and descriptive error messages that are announced by the screen reader – usually, you should AJAX these in so that the page doesn’t reload. If the page does reload, then the popup needs to open on reload with the appropriate focus, and the message should be announced.
• Keyboard-only users should be able to close or dismiss the popup or modal using the “Escape” key and via a close button.
• When the popup or modal is closed or dismissed, screen reader users should be informed of the closure, and focus should be returned to the element previously focused on before the popup opened.

Making Accessible Popups in WordPress

When you need to add popups to the WordPress sites you’re building, there are two options: use a plugin or code them yourself.

My go-to plugin for accessible popups in WordPress is Popup Maker. Their free plugin handles accessibility really well, including all the fancy JavaScript to manage focus as the modal is opened, closed, and tabbed within.

A word of caution: most page builders (Elementor, Beaver Builder, Divi, etc.) all get popup accessibility wrong. It’s better to use a popup plugin such as Popup Maker to create modals and popups rather than relying on the popup tools in a page builder. Also, use extreme caution with mobile menus – in many cases, mobile nav menus behave like popups and can introduce accessibility problems if they are not coded with accessibility in mind.

If you need something custom or want to avoid adding another plugin, here’s a CodePen example of an accessible modal. This example has a modal triggered by a button click that shifts focus onto the modal when it opens, and locks focus within the modal so the user cannot accidentally tab out of it, then returns focus to the button when the modal is clicked.

Additional Resources

• ARIA Authoring Practices Guide Modal Dialog Example
• ARIA: dialog role, MDN Web Docs