Accessible Modal

A lightweight, accessible modal window with focus trapping, ESC-to-close, and full ARIA support.

Demo

Open the live demo to try focus trapping, ESC-to-close, and everything else in action.

Screenshot

A screenshot will be added here soon.

What's included

• Focus trapping - Tab and Shift+Tab cycle only through elements inside the open dialog.
• ESC to close - standard, expected dialog behaviour, optional per instance.
• Full ARIA support - role="dialog", aria-modal="true", and an automatic aria-labelledby if you don't set one yourself.
• Scroll locking - the background page can't be scrolled while the modal is open, with scrollbar-width compensation so the page doesn't jump.
• Focus return - focus goes back to whatever element opened the modal when it closes.
• Zero dependencies - one JS file, one optional CSS file, works with any stack.

Usage

<button data-modal-open="my-modal">Open modal</button>
<div id="my-modal" data-modal>
	<div class="accessible-modal-box">
		<button class="accessible-modal-close" data-modal-close aria-label="Close">&times;</button>
		<h2>Modal title</h2>
		<p>Modal content.</p>
	</div>
</div>
<link rel="stylesheet" href="accessible-modal.css">
<script src="accessible-modal.js"></script>

Any element with data-modal is turned into a modal automatically on page load - no JavaScript required for the common case. For more control (custom options, dynamically-created modals), instantiate it directly: new AccessibleModal('#my-modal', { initialFocus: '#first-field' }).

Download

This download includes:

• accessible-modal.js
• accessible-modal.css
• demo.html
• README.md