modal-role

Description

All modals in a webpage should have their role defined as dialog.

Assistive technologies like screen readers can easily identify a modal if defined with role="dialog". This enables a smooth experience for users of such technologies.

If the role is not defined or incorrectly defined, assistive technologies might behave unexpectedly and hamper the user experience.

Example

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

Without a defined role, assistive technologies like screen readers might not identify this as a modal. This can create confusion in the user experience.

In contrast, the following example defines role="dialog" in the HTML code.

With the role correctly defined as dialog, assistive technologies like screen readers can quickly identify the modal. This improves the user experience and the accessibility of the modal.

How to fix?

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

• Identify any modals used on your webpage.
• Check if it defines role="dialog".
• If the role is defined incorrectly or not defined, modify it to role="dialog".

Reference

• WCAG 4.1.2: Name, Role, Value (Level A)
• Modal dialog example