How to improve accessibility on modals in Webflow

Ledenafschriften nodig

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

Les

Kloonbaar

‍

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=””

Het laten werken

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.

Conclusie

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

Als u ons demoproject wilt gebruiken om u op weg te helpen, klikt u op de knop hieronder om het aan uw Webflow site toe te voegen.

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

Take me to Cloneable!