Making Modals Accessible with ARIA and HTML
To make a modal dialog accessible in HTML, you need to ensure it has the correct roles, names, descriptions, and keyboard interactions so that screen reader and keyboard users can use it effectively.
Use
role="dialog"(oralertdialogfor urgent modals) so assistive technologies know it’s a modal.Add
aria-labelledbyto reference the modal’s title element (gives it an accessible name).Use
aria-describedbyto reference additional instructions or content inside the modal.Trap focus inside the modal so keyboard users can’t tab outside while it’s open.
Return focus to the previously focused element when the modal closes.
Provide a clear, accessible close button (
<button aria-label="Close"></button>if icon-only).Ensure the background content is visually hidden or marked
aria-hidden="true"when the modal is open.
In short: aria-labelledby provides the modal’s name (usually its heading), aria-describedby provides supporting details, and aria-label can be used for controls like the close button.
<div role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-desc"><h2 id="dialog-title">Subscribe to Newsletter</h2><p id="dialog-desc">Enter your email to receive updates.</p><button aria-label="Close">✖</button>
Always provide a visible title for the modal (not just aria-label).
Use semantic HTML for headings and paragraphs inside the modal.
Make sure all interactive elements are keyboard accessible.
Announce the modal opening by shifting focus to the first focusable element inside it.