Accessible Modal

›

Modals are used extensively now to create custom, Navigation , Lightboxes, slideouts and a multitude of other popups. But modals are not accessible on their own. In fact they can make a website impossible to navigate for some people with disabilities.

Webflow has come up with a solution with a bit of script pasted into Before </body> Tag and classes either used on their own or as combo classes to create one base component that can be duplicated, re-styled and re-used for modals throughout the site. Yes including Collection Lists and using the same javascript instance. No script duplication required.

Webflow provides a great technical how to guide and clonable and this page attempts to built on top of that knowledge to explain the why.

Structure Is Key

The Modal built built with the javascript snippet provided by webflow is a self contained component. Understanding this is important and will save you hours of trying to figure out why a Modal visually works as intended but is not actually accessible and throws no errors when debugging.

The modal consists of main parts as outlined in the webflow guide a modal-wrapper, modal-container, and modal-close_area. And it is triggered to open with modal-open_btn and modal-close_btn. What is just as important to realize is all of these elements are wrapped in a Div.
‍
If for instance you remove the modal-open_btn and place it somewhere else on the page your modal will still visually work as intended with interactions but the javascript will not affect it in the same way and it will Not be accessible.

Example 1. Below is a working accessible Modal. Keyboard accessible with the focus within modal. Notice how the focus stays within the modal and can be closed with either the X close button or the ESC Key

Example 2. Below is a modal with the accessibility broken. The open-modal_btn has been removed from the modal component structure. Notice how even though visually they are similar and the focus switches at first to the to the modal as desired. The tabbing through the elements escapes the modal and continues to other links on the page. It also can only be closed by clicking or tabbing to the X close button and not with the ESC Key.

Animated Gif demonstrating an improperly structured modal that renders it inaccessible

Build the structure

Following the webflow template. and finsweet client first naming let's call the outer div modal_component and nest inside that modal-open_btn and modal-wrapper. Inside modal-wrapper nest modal-container and modal-close_area.

The modal_component does not require any styling. It is needed as the outermost DIV to contain all the modal parts. Set the modal-wrapper to position fixed with the Z-Index of 9999, Overflow to Scroll. And a background Color to a dark color with opacity of around 80%. Color and opacity will vary depending on design.
‍
The modal-container can be styled however you wish and contain any content. For best accessibility practices the modal-close_btn needs to be present in the modal-container. So that the modal can be closed by clicking the button or pressing the ESC Key.

Lastly the modal-close_area set to position Fixed - Full this enables the modal to be closed with either the ESC Key or clicking anywhere outside of the modal-container

A word on Interactions

Set up the interactions however you wish. Both the open and closing. And add the open interaction to the modal-open_btn and closing interaction to both modal-close_btn and modal-close_area. Do note when using keystrokes or screen reader functionality the modal will instantly close as the Javascript overrides the close interaction. It is the way it was written.

Or Use an already built Component

The beauty of this setup is you can build a modal from scratch or pull one like the contact form from the Relume Library

Add the attributes

Attributes are added to the different elements to set properties for accessibility. The first element to add attributes to is the modal-wrapper.
Add role ="dialog" - Dialog is the accessible name for the modal popup. Add aria-modal = "true" and Add aria-label or aria-labelledby to add descriptive text for the screen reader to let the user know a popup has opened or give instructions.

Add the role = "button" to modal-close_btn and modal-open_btn respectively . Webflow buttons are not semantic HTML buttons at the time of writing this and therefore the aria role is needed to give properties of buttons to the links.

To the modal-close_area add tabindex ="-1" This allows the focus to be set programmatically in the javascript. So that it can be interacted with. This allows the ESC Key to close the modal. Lastly add aria-hidden = "true" hiding it from the accessibility tree.

Add the Javascript

Add the Javascript viewable in the custom code in the clonable. Or from the source the webflow accessibility checklist. It is advisable to keep the naming convention and use combo classes to differentiate between the different types of modals if you have several on the page. But you do not have to duplicate the javascript. The modals run one from javascript instance.