Skip to main content
No Result Found

modal-accessible-name

Severity: Serious

Description

Modals must have labels that can be read by assistive technologies.

Without a unique label for each modal, users of assistive technologies won’t get a consistent user experience. You can use the aria-label attribute to label a modal. If there are multiple modal, use the aria-labelledby attribute instead.

Example

Consider the following example in which a modal is defined without a unique label.

Incorrect code sample
Copy icon Copy

Without a defined label, assistive technologies like screen readers can find it difficult to identify the modal. This can create confusion in the user experience.

In contrast, the following example defines aria-label to the modal.

Corrected code sample
Copy icon Copy

With the aria-label correctly defined, assistive technologies like screen readers can uniquely identify the modal. This improves the user experience and the accessibility of the modal.

How to fix?

Follow these steps to fix the modal-accessible-name rule if it gets flagged:

  • Identify any modals used on your webpage.
  • If there is only a sigle modal, use the aria-label attribute to define a unique label to the modal.
  • If there are multiple modals, use the aria-labelledby attribute to define unique labels to each modal.

Reference

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle