When does your pop-up need a close button?

Anne-Mieke Bovelett, accessibility specialist, explains why itโ€™s so important to have a close button on popup modals.

A frightened man biting his nails stands in front of a dilapidated door with no handle, illustrating the frustration of encountering a popup modal without a close button.
Portrait of Anne-Mieke Bovelett, a woman wearing long blonde dreads in a ponytail, big rounded silver rimmed glasses, a black shirt, with a subtle smirk on her face.

Anne-Mieke Bovelett /

30.07.2024


Always. A popup or modal without a close button is like locking someone in, in a room, by removing the door handle.

Usability and accessibility go hand in hand

Lately more general questions about accessibility are coming in through the Greyd Support team, and this is one of them. As I have the honor of guiding Team Greyd in their accessibility journey, I think itโ€™s a good time to explain why a close button is necessary on a pop-up modal.

Setting a close button is something you can do by default in Greyd.Suite

In general, including a close button in pop-ups enhances usability for all users, providing a clear and straightforward method to dismiss the pop-up regardless of their method of interaction or specific accessibility needs.

The scenarios for a close button

A close button on a pop-up is necessary for accessibility in the following scenarios:

When a pop-up takes over the entire screen or significantly interrupts the main content, such as modals or dialog boxes, a close button ensures users can easily exit the pop-up and return to the main content.

Not everyone knows that when itโ€™s coded correctly, you can also close a modal popup with the Escape key or by clicking (desktop) or tapping (mobile) outside it!

Not adding a close button is called a keyboard trap.

When the content is non-escapable

If the pop-up contains content that requires user interaction before proceeding (e.g., form validation errors, consent notices), a close button allows users to dismiss the pop-up if they choose not to interact with it.

When navigating by keyboard

For users navigating with a keyboard, a close button is essential as it allows them to dismiss the pop-up without relying on a mouse. Ensuring the button is focusable and operable using keyboard shortcuts is crucial. In Greyd.Suite this is standard!

For screen reader users

A close button provides a clear and explicit way for users relying on screen readers to understand how to dismiss the pop-up, especially if the screen reader announces the presence of the button.

On mobile and touchscreen devices

On touch devices, users may have difficulty interacting with other dismissal methods (e.g., tapping outside the pop-up). A close button offers a clear and accessible way to close the pop-up.

When there are complex interactions

If the pop-up includes complex content or multiple steps, a close button ensures users can exit at any point without confusion or getting trapped.

For visually impaired users

For users with visual impairments, having a consistent and prominently placed close button ensures they can locate and use it easily.

In general, including a close button in pop-ups enhances usability for all users, providing a clear and straightforward method to dismiss the pop-up regardless of their method of interaction or specific accessibility needs.

Good usability increases your conversion

Something seemingly as simple as a close button is good usability. Itโ€™s also one of the Success Criteria in the WCAG 2.2 Guidelines, and as such making sure you have that (at a clickable size of at least 24 by 24 pixels) it is actually not just a nice to have.

And in case youโ€™re not sure if you can relate: havenโ€™t we all been upset at one or more points in time where that sign-up form or pop-up ad actually a close button, but it was so tiny that you could not seem to touch it on your smartphone?

Many a visitor will leave a site when that is the case. And thatโ€™s the opposite of what we want, isnโ€™t it!

Greyd.Suite is continuously working on making sure that their output is accessibility-ready

Accessibility-ready means that you donโ€™t have to worry about the technicalities โ€œunder the hoodโ€. And that is a big worry less to have these days, with the European Accessibility Act (EAA) coming into effect in June 2025.

Itโ€™s something I see many a commercial page builder struggle with these days, as the clock is ticking and they are working hard on remediation. Greyd had and still has the advantage of a fresh codebase. Itโ€™s one of the reasons why I chose them as my favorite to build websites with, long before I became a Product Ambassador.


Portrait of Anne-Mieke Bovelett, a woman wearing long blonde dreads in a ponytail, big rounded silver rimmed glasses, a black shirt, with a subtle smirk on her face.

By Anne-Mieke Bovelett

Besides being an avid accessibility advocate, web designer and public speaker, Anne-Mieke Bovelett is a passionate copywriter. She’s a well-known member of the WordPress community and can regularly be found at WordCamps and meetups all over the world.

Recent in Greyd.Suite

People on a tech conference in the background, hotel booking form in the frontend

How to create dynamic event booking forms

Read more

A businessperson calculating finances with a stack of coins in the foreground, progressively increasing in height from left to right, symbolizing growth. In the personโ€™s hand, a small tree grows out of a pile of coins, representing financial growth and sustainability.

Scalability with Greyd.Suite

Read more

Screenshot of the Greyd.Suite license plans

How to find the right Greyd.Suite plan

Read more

A group of three people, two men and one woman, are smiling and looking at a computer screen together. The man on the left is of African descent, the man in the middle has gray hair, and the woman has blonde hair styled in a braid. The lower part of the image features a partially visible computer screen displaying an online shop with various products.

How to counter arguments against accessibility

Read more

Stylized screenshot of the Greyd website, and a rovbot hand in the background.

How Greyd innovates

Read more