The element appears and functions like a modal dialog but is missing required ARIA role(s) and/or attribute(s).

Link to The element appears and functions like a modal dialog but is missing required ARIA role(s) and/or attribute(s). copied to clipboard
Rule ID:
custom-dialog
User Impact:
Critical
WCAG :
4.1.2.b

Rule

The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.

Information, structure, and relationships conveyed through presentation MUST be programmatically determined or available in text.

Background

Every user interface control must have a role along with any applicable states and properties so that screen reader users know how to interact with the control. Native HTML elements - such as <button>, <a>, <input>, <select> - already have a role, and their necessary states and properties - such as the checked/unchecked state of a checkbox - are automatically conveyed so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant role(s) and any applicable states and properties using ARIA as well as expected keyboard interactions.

How To Fix

A dialog is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window.

Fix this issue by using the following roles and attributes:

  1. The element that serves as the dialog container has a role of dialog (role=”dialog”).
  2. All elements required to operate the dialog are descendants of the element that has role dialog.
  3. The dialog container element has aria-modal set to true (aria-modal=”true”).
  4. The dialog has either:
    • A value set for the aria-labelledby property that refers to a visible dialog title.
    • A label specified by aria-label.
  5. Optionally (if focus is set to an element other than the heading text inside the dialog) the aria-describedby property is set on the element with the dialog role to indicate which element or elements in the dialog contain content that describes the primary purpose or message of the dialog. Specifying descriptive elements enables screen readers to announce the description along with the dialog title and initially focused element when the dialog opens.

References