How to Create a Web Accessible Modal Window with Magnific Popup

November 29, 2018 By Andrew Gehman

• Facebook
• Instagram
• LinkedIn
• Twitter

Modal windows offer a visually cool way to have users interact with content. For users who rely on a keyboard to navigate your site, modal windows can be quite problematic if not created with accessibility in mind. I’ll show you the method I use when creating accessible modal windows using the Magnific Popup plugin and jQuery. Here’s how to create a web accessible modal window with Magnific Popup:

Magnific Popup

I won’t spend much time delving into details here on how to set up and use Magnific Popup. They have pretty strong documentation on their site. I’ll simply share the code I’ve used and refer to some of the key features of the plugin that will assist us in making our modal window accessible. To get Magnific Popup up and running, you’ll need to load jQuery as well as the Magnific Popup Javascript and CSS files. You can get the code from their GitHub repo.

4 Keys to a Web Accessible Modal Window

These are the main 4 keys that must be included for a web accessible modal window:

1. Proper accessible HTML for the modal window
2. When the modal is open, send focus into the modal window
3. “Trap” the mouse inside the modal
4. On close, return the focus to the last element

1. Proper Accessible HTML for the Modal Window

HTML for the Modal

In the example below, I begin with some basic HTML, some text, and a button element that will be used to launch our modal.

For our Modal window itself, we’ll create a div element and give it an HTML role of ‘dialog.’  The dialog role defines content in a window (or dialog) that is separate from the rest of the page, and will allow assistive technology to properly identify it as a window.

We will also add ARIA roles of aria-labelledby and aria-describedby. The aria-labelledby attribute is given the ID of the element that ‘labels’ our modal window. In our case, it would be the H1 tag with the ID of “modal-title.” The aria-describedby attribute is assigned the ID of an element that will give more details about the element. The aria-describedby attribute is optional and really only needs to be used when there is additional information available to describe the element.

The ‘.mfp-hide’ class is part of the magnific popup styles and will hide the modal ( #mymodal ) by default.

<!-- Page Content -->

<div class="page-wrapper">

  <h1>Web Accessible Modal Window with Magnific Popup</h1>
  
  <p>This is an example of how to create an accessible modal window using the Magnific Popup plugin</p>

  <button data-mfp-src="#mymodal" class="modal-btn">Modal Popup</button>
  
</div>

<!-- Modal Content Below -->

<div id="mymodal" class="mfp-hide" role="dialog" aria-labelledby="modal-title" aria-describedby="modal-content">
 
  <h1 id="modal-title" class="modal-title">This is My Modal Title</h1>
                    
  <div id="modal-content">

    <p>Making modals is fun! Your favorite flavor of ipsum goes right here.</p> 

  </div>

</div>

CSS for the Modal

Keep in mind that when you setup Magnific Popup, you’ll be including the Magnific Popup css file. The Magnific Popup css will provide basic styles for your modal. The code below is my css customizations which include styling the modal itself, the button to launch the modal, and the close button. You’ll want to customize your css to match your own design.

 // Styling the Modal window
#mymodal {
  position: relative;
  background-color: #FFF;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;                
}


// extra styling
.page-wrapper {
  text-align: center;
}

button.modal-btn {
  border: 1px solid steelblue;
  background: #FFF;
  color: steelblue;
  padding: 10px 20px;
  font-size: 16px;
  &:hover {
     background: steelblue;
    color: #FFF;
  }
}

.mfp-close:focus {
  border: 1px solid steelblue;
}

JavaScript for the Modal

Magnific Popup gives you a few default content types and ways to initialize the popup. We will be using the ‘inline’ content type and initializing our modal through a button click.

We want to make sure we are waiting for the document to load before running the script, thus we’ve wrapped it in a jQuery $(‘document’).ready(). This is really all we need to get the modal working, but we’ll need a bit more work to make it accessible.

$(document).ready(function() {  
  $('.modal-btn').magnificPopup({
    type:'inline',
  });
});

2. When the Modal is Open, Send Keyboard Focus into the Modal Window

We want to be able to send the focus “into” the modal, most likely to the first focusable element within the modal. This could be an input element or a button, such as the button to close the modal window. Modals should at least have a button to close them. For our basic modal,  we will send the focus to the close button. We can do this through Magnific Popup by adding focus:”.mfp-close” to our script. The ‘.mfp-close’ is the classname of the close button.

$(document).ready(function() {  
  $('.modal-btn').magnificPopup({
    type:'inline',
    focus:".mfp-close",
  });
 });

If you happen to have a very long modal window, and the first focusable element is quite a ways down the document, enough so that it will cause some content at the top to be out of view, you may want to set the focus to another element higher up in the modal. If we wanted to do this, we could add tabindex=”-1″ to the h1#modal-title ( this will allow the element to be programmatically focusable, but not included in the tab order ) and set the focus: ‘.modal-title’ in the Magnific Popup script. This will set the focus to the h1#modal-title.

3. Trapping Keyboard Focus Inside the Modal Window

We want to ensure that the user cannot tab or click outside of the modal window until the modal has been closed. Everything outside of the modal should be “inert.” If the focus is not ‘trapped’ in the modal window and is free to move to other parts of the page (outside of the modal) it becomes very confusing for the user. Again, we can set this through Magnific Popup by adding closeBtnInside:true to the script.

$(document).ready(function() {  
  $('.modal-btn').magnificPopup({
    type:'inline',
    closeBtnInside:true,
    focus:".modal-title",
  });
});

4. Restore Keyboard Focus After Closing the Modal

We also want to ensure that when we close our modal window, or hit the escape button on our keyboard, the focus returns to the HTML element that opened the modal. This can be achieved by adding the autoFocusLast: true option to our script.

$(document).ready(function() {  
  $('.modal-btn').magnificPopup({
    type:'inline',
    closeBtnInside:true,
    autoFocusLast: true,
    focus:".modal-title",
  });
});

Here’s an example of our completed modal on Codpen:

See the Pen Web Accessible Modal Window with Magnific Popup by Andrew Gehman (@AndrewGehman) on CodePen.0

Be sure to check out the Magnific Popup documentation for more options!

Now we have an accessible modal window that keyboard-only users can navigate with ease.