Ensure dialogs have an accessible name

When a dialog opens, screen readers should announce its purpose immediately so users know why their focus has shifted and what information is required.

Quick Reference

• All dialog and alertdialog elements must have a descriptive label
• Use aria-labelledby to point to a title or aria-label for a direct string
• Helps users understand the context and purpose of the modal

Check

Verify that every element with role="dialog" or role="alertdialog" has an accessible name.

Fix

Provide an accessible name for the dialog using aria-labelledby (pointing to the header) or aria-label.

Explain