Although most websites will include a button (or link) to close the modal, they often forget the keyboard user who rely on closing things with the escape key.
It doesn’t take much to include this functionality. In fact, 7 lines of vanilla Javascript…
The code above is listening to every keystroke and if one happens to be the escape key it will attempt to run a function called closeMenu();
The conditional wrapper ensures that the function is only triggered when the menu is active by checking for a class on the body tag. If this check was not made then it could be triggered, for example, when someone fills in a form.
The closeMenu() function itself contains a set of actions that ultimately hides the modal.
Lines 1-3 sets some variables, assigning elements in the DOM.
Line 6 assigns an attribute to the menu panel to hide it. We have a CSS class targeting the hidden attribute…
But you could easily replace this with code that directly applies a hidden class, something like this…
Line 7 removes the class we use to identify the active menu in our script. This is added by a separate function that opens the modal.
Lines 8-11 apply aria attributes and states.
There is the last piece in the puzzle on how to open the modal, but that information is available in another article…
Love them or hate them, there is more to the modal than meets the eye. Modals are also known as Modal Dialog, Dialog Box, Pop-up, Pop-up Window, Overlay, Alert box. Whatever you prefer to call it, you must ensure it is created to be accessible for everyone.
Simon Leadbetter,
The Accessibility Guy at Kindera
