Accessibility-Enhanced Modal

Implement an accessible modal by managing focus, adding keyboard navigation, and ARIA attributes to improve the experience for screen reader users.
<div id="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" tabindex="-1">
  <h2 id="modalTitle">Modal Title</h2>
  <p>Some content for the modal.</p>
  <button id="closeModal">Close</button>
<button id="openModal">Open Modal</button>
HTML structure for the modal, with ARIA attributes for accessibility. The modal can be focused due to tabindex="-1" and is recognized as a dialog by screen readers because of the role attribute.
#modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 400px;
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

#modal[aria-modal='true'] {
  display: block;
CSS for the modal. Initially hidden, it becomes visible when aria-modal is true. Positioned in the center of the screen.
document.addEventListener('DOMContentLoaded', function() {
  var openButton = document.getElementById('openModal');
  var closeButton = document.getElementById('closeModal');
  var modal = document.getElementById('modal');

  function openModal() { = 'block';
    modal.setAttribute('aria-modal', 'true');

  function closeModal() { = 'none';

  openButton.addEventListener('click', openModal);
  closeButton.addEventListener('click', closeModal);

  document.addEventListener('keydown', function(event) {
    if (event.keyCode === 27) closeModal(); // Close on Escape
JavaScript to handle the opening and closing of the modal, manage focus to ensure keyboard navigation, and add keyboard listener for the Escape key to close the modal.