Modal dialog example
This example demonstrates an accessible modal dialog. The trigger button has the class "trigger" and opens the dialog when activated. Press Escape to close, or use the Close button.
Demo
Click the button below to open the modal. When the modal is open, keyboard focus is trapped inside it and the background content is hidden from assistive technologies via aria-hidden. Focus returns to the trigger after the dialog closes.
More page content
This is additional page content to show that background elements become inaccessible to screen readers while the modal is open. Long text, URLs, or tokens will wrap and won't cause horizontal scrolling on narrow viewports.