Challenge - Accessible dialog
Write a fully accessible modal with <dialog> and ARIA.
Make the dialog accessible
An accessible <dialog> window is built on three relationships. aria-modal="true" tells screen readers the background is inert. aria-labelledby points to the window title and aria-describedby to its description; both reference an id.
To move focus into the window, include a button or an element with a tabindex value. The close button must have text content so keyboard users can dismiss the window. Together these four relationships complete the modal pattern.
Exercise Write an accessible modal dialog
Write a <dialog> element. Add aria-modal="true". Point to the title with aria-labelledby and the description with aria-describedby; both values must match the relevant ids. Inside the dialog place an <h2> heading, a <p> description, and a <button> close button with content.
Show example solution
Build the dialog with aria-modal and label/description relationships.
Example solution:
<dialog aria-modal="true" aria-labelledby="settings-title" aria-describedby="settings-desc">
<h2 id="settings-title">Settings</h2>
<p id="settings-desc">This window manages your settings.</p>
<button>Close</button>
</dialog>Test yourself
-
Which attribute makes the dialog modal?
- role="modal"
- aria-haspopup="dialog"
- aria-modal="true"
- data-modal="yes"
Show answer
aria-modal="true" — Correct. aria-modal="true" signals the background is inert.
-
Set the title relationship
<dialog aria-modal="true" aria-labelledby="____"><h2 id="dialog-title">Settings</h2></dialog>Show answer
<dialog aria-modal="true" aria-labelledby="dialog-title"><h2 id="dialog-title">Settings</h2></dialog> -
What should happen first when the modal opens?
- Move focus to the first focusable element in the dialog
- Reload the page
- Hide all background elements
- Close the dialog immediately
Show answer
Move focus to the first focusable element in the dialog — Correct. Focus must move into the window so keyboard users can navigate inside.