This modal demonstrates simple accessibility features:
- role="dialog" and aria-modal="true"
- aria-labelledby pointing to the dialog title
- focus is moved into the dialog and trapped while open
- Escape and overlay click close the dialog
Modal Dialog Demo
This is an example page showing a simple accessible modal dialog component. The modal is closed by default. Use the button below (it has the class "trigger") to open it.
Some focusable controls to demonstrate focus management:
When the modal is open, focus is trapped inside it, and pressing Escape or clicking the overlay will close it.