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" (or alertdialog for urgent modals) so assistive technologies know it’s a modal.
Add aria-labelledby to reference the modal’s title element (gives it an accessible name).
Use aria-describedby to 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.
0-2 years experience
2-5 years experience
5-8 years experience
8+ years experience
