Table of Contents
Creating a custom modal dialog with JavaScript can enhance user experience on your website. When implementing such dialogs, it is crucial to include accessibility features to ensure all users can interact with your modal effectively. This guide walks you through the process of building an accessible custom modal dialog.
Why Accessibility Matters in Modal Dialogs
Accessibility ensures that users with disabilities can navigate and interact with your modal dialogs. Features like focus trapping, appropriate ARIA labels, and keyboard navigation are essential. Without these, users relying on screen readers or keyboard navigation may find your modal unusable.
Basic Structure of a Custom Modal
A typical modal includes a container, content area, close button, and overlay. Here’s a simple HTML structure:
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" aria-describedby="modalDesc">
<div class="modal-content">
<h2 id="modalTitle">Modal Title</h2>
<p id="modalDesc">This is an accessible modal dialog.</p>
<button class="close-btn" aria-label="Close modal">Close</button>
</div>
</div>
Implementing Accessibility Features with JavaScript
Key accessibility features include trapping focus within the modal, allowing closing with the Escape key, and setting focus to the modal when it opens. Here’s how to implement these:
Focus Trap: When the modal opens, focus should move to the first focusable element inside it. While the modal is open, Tab and Shift+Tab should cycle through focusable elements only within the modal.
Escape Key: Pressing Escape should close the modal and return focus to the element that opened it.
Focus Management: When closing, focus should return to the button or link that triggered the modal.
Sample JavaScript Code for Accessibility
Here’s a simplified JavaScript example to add accessibility features:
const openModalBtn = document.querySelector('#openModal');
const modal = document.querySelector('.modal');
const focusableEls = modal.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
let lastFocus;
openModalBtn.addEventListener('click', () => {
lastFocus = document.activeElement;
modal.style.display = 'block';
focusableEls[0].focus();
});
document.addEventListener('keydown', (e) => {
if (modal.style.display === 'block') {
if (e.key === 'Escape') {
modal.style.display = 'none';
lastFocus.focus();
} else if (e.key === 'Tab') {
const focusIndex = Array.prototype.indexOf.call(focusableEls, document.activeElement);
if (e.shiftKey) {
if (focusIndex === 0) {
e.preventDefault();
focusableEls[focusableEls.length - 1].focus();
}
} else {
if (focusIndex === focusableEls.length - 1) {
e.preventDefault();
focusableEls[0].focus();
}
}
}
}
});
Conclusion
Implementing an accessible custom modal dialog requires attention to focus management, ARIA roles, and keyboard navigation. By following best practices and using JavaScript to enhance accessibility, you can create dialogs that are usable by everyone, including users with disabilities.