Enhancing Web Accessibility: Locking the TAB Button within Modals and Menus

This is a very important accessibility feature to use on your site.

You might not know this, but many users use keyboard navigation. Some of them have motor disabilities, some may use a keyboard for navigation because of preference or efficiency.

The point is your site must be accessible with the keyboard alone.

First of all, I hope you already know you should highlight all focusable elements on your site (like links and buttons) when they are on focus. At least when they are focused by the keyboard TAB button.

There’s a very useful pseudo-class in CSS called :focus-visible. In simple words, it applies to an element when it is focused by the TAB button. You can read more about it on MDN Web Docs.

But let’s get back to the case.

So you have a site with a fullscreen menu or some other section that opens full screen size. Something like this:

A site with a fullscreen menu

Then a user reaches to that section with a keyboard navigation (TAB button) and opens it by hitting the ENTER button:

What should happen after the user reaches the last link in the section?

Unfortunately, it’s a very common case when the user keeps navigating to the next links outside that full screen section.

As a result, users get totally lost on your site. They don’t see focused links anymore (because they are hidden below the fullscreen section) and yet they keep navigating on the page.

A good example of how it should work demonstrates the Fancybox JS plugin. Go to their examples section, click on any picture and then navigate through the opened modal only with your keyboard. You won’t get outside that modal until you close it.

Lock TAB inside Fancybox

So what’s the solution?

It’s quite simple — when the fullscreen section was opened, the user should be able to navigate only within that section by a keyboard.

This is what we expect to get:

To achieve that, let’s write some JavaScript code to lock the TAB within the fullscreen menu:

// Get the menu button element
const menuBtn = document.querySelector(".menu-btn");

// Get the close menu button element
const closeMenuBtn = document.querySelector(".close-btn");

// Get the fullscreen menu element
const fullscreenMenu = document.getElementById("fullscreenMenu");

// Function to toggle the menu
function toggleMenu() {
  fullscreenMenu.classList.toggle("active");
  menuBtn.classList.toggle("active");
}

// Add event listener to the menu button for the 'click' event
menuBtn.addEventListener("click", toggleMenu);
closeMenuBtn.addEventListener("click", toggleMenu);

// Add event listener to the 'keydown' event on the document
document.addEventListener("keydown", function (e) {
  const target = e.target;
  const shiftPressed = e.shiftKey;

  // If TAB key pressed
  if (e.keyCode === 9) {
    // If inside a fullscreen menu (determined by attribute role="dialog")
    if (target.closest('[role="dialog"]')) {
      // Find the first or the last input element in the dialog parent (depending on whether Shift was pressed).
      // Get the focusable elements (links and buttons)
      let focusElements = target
        .closest('[role="dialog"]')
        .querySelectorAll("a[href], button");
      let borderElem = shiftPressed
        ? focusElements[0]
        : focusElements[focusElements.length - 1];

      if (borderElem) {
        // If the current target element is the first or last focusable element in the dialog, prevent the default behaviour.
        if (target === borderElem) {
          e.preventDefault();

          // move focus to the first element when the last one is reached and vice versa
          borderElem === focusElements[0]
            ? focusElements[focusElements.length - 1].focus()
            : focusElements[0].focus();
        }
      }
    }
  }
});

Here’s the demo how it should be:

Thus, we can prevent elements from focusing outside full screen menus or modal popups while they are opened.

Check my other articles about web optimisation:

• RAM Technique in CSS
• Lazy Load for videos with plain JS
• Dynamic font-size using only CSS3

If you find this article helpful — don’t hesitate to like, subscribe and leave your thoughts in the comments 😊

Read more posts on my Medium blog

Thanks for reading!

Stay safe and peace be with you!