How to trap focus inside modal to make it ADA compliant

Learn how to keep focus inside modal when pressing tab

Photo by Safar Safarov on Unsplash

If you have ever worked on any website which you want to make ADA compliant( which means the website should be entirely accessible using just keyboard) then you will be knowing that, one of the requirement while making site accessible is to not allow focus go outside the modal once the modal is opened.

So the people who are disabled or blind or cannot browse website using mouse should be able to open and close the modal by just using keyboard keys.

Making website ADA compliant is absolutely necessary as per Americans with Disabilities Act (ADA) Standards even if it’s an e-commerce site.

For example, take a look at University of Washington website HERE

As you can see, the entire website is keyboard accessible, means you can browse the website using just tab key, arrow keys and pressing enter key to open any menu or click anything.

So in this article, we will see how can we make a modal ADA compliant means once the modal is opened, it should be navigable using keyboard
tab, shift + tab and enter key and focus should be trapped inside modal and should not go out after pressing tab key multiple times.

Checkout below demo where focus is not trapped inside modal.

As you can see, once the modal is opened, when we keep pressing tab, each element of the modal is focused but as you keep pressing tab, the focus goes out of the modal and other website elements in the header are focused. If website has lot of data then we will have to keep pressing tab to bring focus back to opened modal which is very inconvenient.

This is the default behavior for every modal you have came…