Modal Patterns for Web Accessibility

Shawn Sandy (Ally.Cafe) ~ June 10, 2024

Modals, or dialog boxes, are an integral part of web interfaces, providing essential interactive elements for users. Properly implemented, they enhance user experience without creating accessibility barriers. This article delves into different modal patterns, their impact on accessibility, and best practices to ensure they are usable by everyone, including those with disabilities.

Simple Alert Modal Alert modals are used to present critical information or confirmation messages. They are typically non-interactive beyond acknowledging the message.

Example Use Case: Warning about unsaved changes.

Accessibility Considerations:

Focus should immediately move to the modal when it appears.
Provide a clear and descriptive message.
Include a mechanism to dismiss the alert (e.g., an “OK” button).

Example Code:

<div role="alertdialog" aria-labelledby="alertTitle" aria-describedby="alertMessage" aria-modal="true" tabindex="-1">
  <h2 id="alertTitle">Unsaved Changes</h2>
  <p id="alertMessage">You have unsaved changes. Are you sure you want to leave?</p>
  <button onclick="closeAlert()">OK</button>
</div>

Form Modal Form modals contain interactive elements such as input fields, buttons, and dropdowns, allowing users to enter data.

Example Use Case: User registration form.

Accessibility Considerations:

Ensure all form elements are accessible.
Manage focus within the modal.
Provide clear labels and instructions.

Example Code:

<div role="dialog" aria-labelledby="formTitle" aria-modal="true" tabindex="-1">
  <h2 id="formTitle">Register</h2>
  <form>
    <label for="name">Name</label>
    <input id="name" type="text" required>
    
    <label for="email">Email</label>
    <input id="email" type="email" required>
    
    <button type="submit">Submit</button>
    <button type="button" onclick="closeForm()">Cancel</button>
  </form>
</div>

Confirmation Modal Confirmation modals seek user confirmation for actions such as deleting content or confirming an order.

Example Use Case: Deleting a user account.

Accessibility Considerations:

Focus on the modal and its first actionable element.
Clearly describe the action being confirmed.
Provide clear options for confirming or canceling the action.

Example Code:

<div role="dialog" aria-labelledby="confirmTitle" aria-modal="true" tabindex="-1">
  <h2 id="confirmTitle">Delete Account</h2>
  <p>Are you sure you want to delete your account? This action cannot be undone.</p>
  <button onclick="confirmDelete()">Yes, Delete</button>
  <button onclick="closeConfirm()">Cancel</button>
</div>

Best Practices for Accessible Modals

Focus Management Ensure that when the modal opens, focus is moved to the first interactive element within the modal. When the modal is closed, focus should return to the element that triggered the modal.

Example:

function openModal(modal) {
  const firstFocusableElement = modal.querySelector('input, button, textarea, select, a[href]');
  firstFocusableElement.focus();
}

function closeModal(modal, trigger) {
  modal.style.display = 'none';
  trigger.focus();
}

ARIA Attributes Use appropriate ARIA roles and properties to make modals accessible. This includes using role="dialog" or role="alertdialog", aria-labelledby for the modal title, and aria-describedby for the modal content.
Keyboard Accessibility Ensure that users can navigate through modal content using the keyboard. Allow users to close the modal using the Escape key.

Example:

modalElement.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    closeModal(modalElement, triggerElement);
  }
});

Descriptive Labels Provide descriptive labels for modal elements to ensure that screen readers can effectively communicate the purpose and content of the modal to users.
Focus Trap Ensure that focus remains within the modal while it is open. This prevents users from accidentally tabbing out of the modal and losing context.

Example:

modalElement.addEventListener('keydown', (event) => {
  if (event.key === 'Tab' && !modalElement.contains(document.activeElement)) {
    event.preventDefault();
    modalElement.querySelector('input, button, textarea, select, a[href]').focus();
  }
});

Resources

For further reading on creating accessible modals, consider these resources:

By following these patterns and best practices, you can ensure that your modals are accessible to all users, providing a better user experience and compliance with accessibility standards.

Found an error, typo, or bug please edit on github or open an issue or ticket

Edit on Github Open an issue