How to improve accessibility on modals in Webflow

Memberscripts needed

1. https://www.memberstack.com/scripts/hide-with-esc

Tutorial

Cloneable

‍

Why/Use Cases

- Add greater accessibility to your site.

- Improve your site’s UX.

Hiding elements with the escape key on a Webflow site

It’s always a good idea to have a more accessible site that caters to as many users as possible. This guide will help you set up modals on your site that can be closed by simply pressing the escape key.

To automatically add watermarks to the images on your Webflow site, we’re going to use MemberScript #132 – Hide Elements With Escape Key. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

Begin by creating your modal, setting it to display: none, and using a Webflow interaction to set it to display:block when clicked.

Once that’s done, add this attribute to the modal:

· ms-code-close-esc=””

Making it work

Now that you’ve got everything set up in Webflow, all you need to do is add the MemberScript #132 custom code to your page or sitewide, before the closing body tag.

Keep in mind that when pressing the escape key, all elements with the attribute from above will be set to display:none.

Conclusion

That’s everything, you can now go ahead and test the functionality on your live site.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you hide elements on your site when pressing the escape key.

Take me to Cloneable!