Modal Dialog Component — Accessible Example

This page demonstrates an accessible modal dialog component. The modal is closed by default. Use the keyboard to open (Enter/Space on the button), navigate inside, and close (Escape).

Main page content

This area represents the main content of the page. When the modal opens, this content will be marked as inert to assistive technology.

Try tabbing through the page to see keyboard focus move to the Open Modal button. When the modal opens focus will move into the dialog and be trapped there.

Example link