Modal Dialogs | University IT

Must haves

Semantic dialog markup and label
1. Use <dialog> or role="dialog" for the container
2. Provide a descriptive aria-label or use aria-labelledby to reference a heading in the dialog
Focus management
1. Focus moves into the dialog when it is triggered
2. Focus stays within the dialog until it is dismissed
3. Focus returns to a logical location when the dialog is closed
Closable with ESC and a close button

Do	Don't
`<dialog aria-labelledby="dialog-title">` `<button aria-label="close dialog">x</button>` `<h2 id="dialog-title">Update Profile</h2>` `…` `</dialog>`	`<div class="dialog">` `<div class="btn">x</div>` `<div class="title">Update Profile</div>` `…` `</div>` Here there is no semantic markup to indicate the dialog role and a label for it. The close button also lacks a role and “x” is not a descriptive label for a button. The heading in the dialog fails to use a heading element.