Fully Accessible Modal Window Plugin With jQuery - modal-window.js

modal-window.js is a lightweight jQuery plugin that helps you create a fully accessible modal window for keyboard and screen reader users. Based on WAI-ARIA role and state markup.

When the modal is displayed:

• Marks the main page as hidden using aria-hidden= 'true' state.
• Make the modal window visible using aria-hidden= 'false' state.
• Inserts an overlay to prevent clicking and make a visual change to indicate the main page is not available.
• Attaches a listener to redirect the tab to the modal window if the user somehow gets out of the modal window.
• Saves current focus.

When the modal is closed:

• Removes the overlay in order to make the main screen available again.
• Marks the modal window as hidden using aria-hidden= 'true' state.
• Mark the main page as visible using aria-hidden= 'false' state.
• Removes the listener which redirects tab keys in the main content area to the modal.
• Set focus back to element that had it before the modal was opened.

How to use it:

1. Include the latest version of jQuery library and the jQuery modal-window.js plugin on the webpage.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="modal-window.js"></script>

2. Add the aria-hidden="false" attribute to the main container.

<div id="mainPage" aria-hidden="false">
  ...
</div>

3. Add the WAI-ARIA role and state markup to your modal window as follows:

<div id="modal" 
     aria-hidden="true" 
     aria-labelledby="modalTitle" 
     aria-describedby="modalDescription" 
     role="dialog">
  <div role="document">
    <div id="modalDescription" class="screen-reader-offscreen">
      Modal Description
    </div>
    <button id="modalCloseButton" class="modalCloseButton" title="Close">
      <img id="cancel" src="x.png" alt="close the modal">
    </button>
  </div>
</div>

4. Create a background overlay for the modal window.

<div id="modalOverlay" tabindex="-1"></div>

5. Create a button to trigger the modal window.

<button id="startModal">Open</button>

6. Style the modal window in the CSS.

#modalOverlay {
  width: 100%;
  height: 100%;
  z-index: 2; /* places the modal overlay between the main page and the modal dialog*/
  background-color: #000;
  opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  margin: 0;
  padding: 0;
}

#modal {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  border: 3px #fff solid;
  background-color: #16A085;
  color: #fff;
  z-index: 3; /* places the modal dialog on top of everything else */
  position: fixed;
  top: 25%;
  left: 25%;
  display: none;
}

#modal h1 { text-align: center; }

.modalCloseButton {
  float: right;
  position: absolute;
  top: 10px;
  left: 92%;
  height: 25px;
  border: 0;
  background-color: #16A085;
}

.modalCloseButton img { border: 0; }

.screen-reader-offscreen {
  position: absolute;
  left: -999px;
  width: 1px;
  height: 1px;
  top: auto;
}

---

This awesome jQuery plugin is developed by gdkraus. For more Advanced Usages, please check the demo page or visit the official website.