Modal Dialog Example

This page demonstrates an accessible modal dialog component. Click the button below to open the modal.

Opens a modal dialog containing example content

Example Modal Dialog

This is an example of an accessible modal dialog. The modal is closed by default and opens when the trigger button is activated.

Key accessibility features include:

Proper ARIA roles and labels
Keyboard navigation support (ESC to close, Tab to navigate)
Focus management (focus trapped within modal when open)
Screen reader announcements
High contrast focus indicators

You can close this modal by clicking the close button (×), pressing the Escape key, or clicking outside the modal.