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:
Modal Pop-ups
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.
Want to learn more about making your sites accessible?
When you use Greyd.Suite, you only need to focus on the design and the content. If you would like to know more about the accessibility of Greyd.Suite and the advantages of building your projects with it, feel free to book a digital coffee with me!
