Hey there! Today, I want to talk to you about web accessibility and the modal component.

First things first, what is web accessibility? Web accessibility refers to the practice of making websites usable by as many people as possible. This includes individuals with disabilities, such as those who are visually impaired or have mobility impairments.

Now, let’s talk about the modal component. A modal is a dialog box or popup window that is displayed on top of the current page. It’s often used to display content or forms that require user interaction, like a login form or a video player.

But here’s the thing: modals can be a real pain for users with disabilities. They’re often not keyboard accessible, which means that users who rely on a keyboard to navigate the web can’t use them. They can also cause issues for screen readers, which are used by individuals who are visually impaired.

So, how can we make modals more accessible? Here’s a quick example of a modal coded in HTML, CSS, and JavaScript:

<div class="modal">
  <div class="modal-content">
    <span class="close-btn">&times;</span>
    <p>Modal content goes here!</p>
  </div>
</div>

<button id="open-modal-btn">Open Modal</button>

.modal {
  display: none; /* hidden by default */
  position: fixed; /* stay in place */
  z-index: 1; /* sit on top */
  left: 0;
  top: 0;
  width: 100%; /* full width */
  height: 100%; /* full height */
  overflow: auto; /* enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* dark background */
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* center */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* width of the modal */
}
.close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close-btn:hover,
.close-btn:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

// Get the modal
var modal = document.querySelector(".modal");
// Get the button that opens the modal
var btn = document.querySelector("#open-modal-btn");
// Get the <span> element that closes the modal
var span = document.querySelector(".close-btn");
// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

This is a basic modal example, but there are a few things you can do to make it more accessible. For example, you can add aria attributes to the modal and close button to let screen readers know that they’re interactive elements. 

<div class="modal" tabindex="-1" aria-modal="true" aria-labelledby="modal-title">
  <div class="modal-content">
    <span class="close-btn" aria-label="Close modal" aria-controls="modal-content">&times;</span>
    <p>Modal content goes here!</p>
  </div>
</div>

You can also add a focus trap to ensure that keyboard users can’t tab out of the modal while it’s open.

// Add a focus trap to the modal
modal.addEventListener("keydown", function(event) {
  if (event.key === "Tab") {
    event.preventDefault();
    var focusableElements = modal.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])");
    var firstFocusableElement = focusableElements[0];
    var lastFocusableElement = focusableElements[focusableElements.length - 1];
    if (event.shiftKey) {
      if (document.activeElement === firstFocusableElement) {
        lastFocusableElement.focus();
      }
    } else {
      if (document.activeElement === lastFocusableElement) {
        firstFocusableElement.focus();
      }
    }
  }
});

It’s also important to make sure that the modal can be closed with the keyboard, not just the mouse. You can do this by adding a “keydown” event listener to the modal and close button that listens for the “Escape” key to be pressed.

// Close the modal with the "Escape" key
modal.addEventListener("keydown", function(event) {
  if (event.key === "Escape") {
    modal.style.display = "none";
  }
});
span.addEventListener("keydown", function(event) {
  if (event.key === "Escape") {
    modal.style.display = "none";
  }
});

By following these simple steps, you can make sure that your modals are more accessible to users with disabilities. Of course, accessibility is a constantly evolving field, and there are many other considerations to keep in mind when building an accessible website. But these examples can get you started on the right foot.

More information can be found in the documentation

Thank you for your read. Peace!