Making an Accessible Modal
A modal dialog should be usable by everyone, including keyboard-only and screen reader users. Accessibility requires handling focus, roles, labels, and keyboard interaction properly.
Focus Management – Move focus into the modal when it opens and return it to the triggering element when it closes.
Focus Trap – Keep focus inside the modal while it is open, preventing users from tabbing into the page behind it.
Keyboard Support – Allow closing with the Escape (Esc) key, and ensure all interactive elements are reachable with Tab/Shift+Tab.
ARIA Roles – Use
role="dialog"orrole="alertdialog"to announce the modal as a dialog to screen readers.Accessible Labels – Provide a clear label using
aria-labelledby(for the modal title) andaria-describedby(for extra instructions or content).Background Inertness – Hide or mark the page content outside the modal as inert/inaccessible while the modal is open.
These practices ensure users can navigate, understand, and dismiss the modal without confusion or barriers.
Always return focus to the element that opened the modal.
Ensure modal content is concise and focused on a single task.
Don’t rely on color or visuals alone—make instructions text-based as well.
Test with a screen reader and keyboard to confirm expected behavior.