To label a modal dialog for screen readers, which attribute pairing is appropriate?

To label a modal dialog for screen readers, which attribute pairing is appropriate?

• A. aria-describedby on the body only.
• B. aria-labelledby with the modal using an id on the title.
• C. aria-pressed on the dialog.
• D. aria-hidden on the dialog while open.

Answer: (B)

Labeling a modal dialog for screen readers relies on giving the dialog a clear accessible name that the user can hear when it opens. The best way to do this is to use aria-labelledby on the dialog and point it to the id of the element that serves as the dialog’s title. For example, if the title element has id="dialog-title", the dialog should include aria-labelledby="dialog-title". When the modal appears, the screen reader announces the dialog and uses the title text as its name, helping the user understand what the dialog is about and what actions are available. Optional descriptive text can be provided with aria-describedby to give more context, but it doesn’t replace the label. Using aria-pressed is meant for toggle buttons and aria-hidden would hide the dialog from assistive tech, which defeats the purpose of a modal.

Labeling a modal dialog for screen readers relies on giving the dialog a clear accessible name that the user can hear when it opens. The best way to do this is to use aria-labelledby on the dialog and point it to the id of the element that serves as the dialog’s title. For example, if the title element has id="dialog-title", the dialog should include aria-labelledby="dialog-title". When the modal appears, the screen reader announces the dialog and uses the title text as its name, helping the user understand what the dialog is about and what actions are available.

Optional descriptive text can be provided with aria-describedby to give more context, but it doesn’t replace the label. Using aria-pressed is meant for toggle buttons and aria-hidden would hide the dialog from assistive tech, which defeats the purpose of a modal.