3 things every accessible modal needs

Modals are everywhere — newsletter signups, alerts, contact forms. But without a few accessibility basics in place, they can confuse users or completely block keyboard and screen reader navigation.

Here are three things every accessible modal needs:

1. Focus Management
   When a modal opens, keyboard focus should automatically shift to it, typically to the first interactive element. And when it closes, focus should return to the button or link that opened it. If focus isn’t managed, keyboard and screen reader users can get lost or stuck behind the overlay.
2. Overlay Semantics
   Use role="dialog" (or role="alertdialog" for time-sensitive alerts), and pair the modal with a heading using aria-labelledby. These ARIA attributes help screen readers understand what’s happening and how to interact with the modal content.
3. A Working Close Button
   Every modal needs a visible, keyboard-accessible way to close it – typically a button with aria-label="Close" and support for the Escape key. Without this, users may have no clear way to exit the overlay.

That’s it. Three steps that help everyone interact with your modal content without frustration.

Using a plugin or theme? Don’t assume it handles this for you. Many prebuilt modals miss one or more of these steps, and it’s not always obvious until you test with a keyboard or screen reader.