Accessible Modals & Dialogs

The HTML5 <dialog> element provides built-in accessibility features. Use showModal() to open and close() to close. The dialog automatically traps focus and handles Escape key. Use <form method="dialog"> to close dialog on form submission. Always provide a visible close button.

For custom dialogs, use role="dialog" or role="alertdialog". Set aria-modal="true" to indicate modal behavior. Trap focus within the dialog using JavaScript. Provide aria-labelledby pointing to the dialog title. Use aria-describedby for additional description. Ensure backdrop is properly handled.

Alert dialogs use role="alertdialog" for critical messages requiring immediate attention. They should have a clear, concise message and typically one or two action buttons. The alertdialog role causes screen readers to interrupt current reading to announce the message. Use for confirmations, warnings, or critical errors.