Accessible name for dialog elements

How to give a dialog an accessible name?

Use aria-labelledby to reference a visible heading inside the dialog, or use aria-label for a dialog without a visible title:

<!-- Using aria-labelledby with a visible heading -->
<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm deletion</h2>
  <p>Are you sure you want to delete this item?</p>
</div>

<!-- Using aria-label when there is no visible heading -->
<div role="dialog" aria-label="Confirm deletion">
  <p>Are you sure you want to delete this item?</p>
</div>

Prefer aria-labelledby when a visible title is present, as it connects the visible text to the dialog programmatically.

Why is this important?

When a dialog opens, screen readers announce its name to give context about its purpose. Without a name, users do not know what the dialog is about before exploring its contents. This is especially confusing for alert dialogs that require immediate action.