WCAG-Compliant Accessible Modal System in JavaScript

The Accessible Modal System JavaScript library allows developers to create accessible and responsive modal dialogs that meet WCAG accessibility guidelines. It implements keyboard navigation, focus management, and screen reader support to build inclusive web interfaces.

This modal library prioritizes accessibility through ARIA attributes, keyboard controls, and responsive design. It manages focus trapping, handles video content, and locks background scrolling – all while maintaining a flexible styling system.

Accessibility Features:

• Keyboard Support: Close the modal with the Escape key, cycle through elements with Tab, and reverse cycle with Shift + Tab.
• Focus Management: Automatic focus on the first focusable element or title, trapping focus within the modal while open, and restoring focus to the trigger when closed.
• ARIA Attributes: role="dialog" identifies the modal, aria-modal="true" signals modal functionality, aria-labelledby aria-label connects the modal to its title, and accessible names are provided for buttons.
• Video Support: The system supports embedded videos (like YouTube) and includes logic to reset video playback upon modal close.

How to use it:

1. Add the Accessible Modal System’s JavaScript and CSS files to your HTML:

<link rel="stylesheet" href="/path/to/accessible-modals.css">
<script src="/path/to/accessible-modals.js"></script>

2. Create a modal cover element for the background overlay:

<div class="modal-cover"></div>

3. Define the modal dialog’s HTML structure, including the title and content. Adjust the `modal-large`, `modal-medium`, or `modal-small` class based on your preferred modal size:

<div id="myModal" class="modal-dialog modal-medium" role="dialog" aria-modal="true" aria-labelledby="titleId">
  <div class="modal-dialog-wrap">
    <div class="modal-dialog-content">
      <h2 id="titleId" tabindex="-1" class="dialog-label">
        Modal Title
      </h2>
      <!-- Modal Content Here -->
    </div>
    <button class="modal-close" aria-label="Close modal">&times;</button>
  </div>
</div>

4. The modal system also supports Youtube videos embedded using iframe:

<div id="myModal" class="modal-dialog modal-large" role="dialog" aria-modal="true" aria-labelledby=""> 
  <div class="modal-dialog-wrap"> 
   <div class="modal-dialog-content">  
       <h2 class="sr-only" tabindex="-1">My Video</h2>
      <iframe width="560" height="315" data-src="https://www.youtube.com/embed/jrHPi8Fgq_A?si=cJsNcV0nq2ttkGgB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
   </div> 
   <button class="modal-close" aria-label="Close modal">&times;</button> 
  </div> 
</div>

5. Create a trigger button that will open the modal:

<a href="#" role="button" class="modal-trigger" data-reveal-id="myModal">
  Launch Modal
</a>

6. Override the default styles of the modal:

.modal-cover {
  background: #121212;
  opacity: 0;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  transition: opacity 0.25s ease;
  visibility: hidden;
}
.modal-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
  visibility: hidden;
  height: fit-content;
  z-index: 999;
  overflow-y: auto;
  max-height: 100%;
  display: block;
}
.modal-dialog-content {
  background: white;
  padding: 3em;
  position: relative;
  border-radius: 4px;
}