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.

Next lesson: Challenge - ARIA tabpanel

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies