Modals

Accessibility

• Modal should have the role="dialog" attribute.
• Content behind the modal should not scroll while the modal is open.
• Modal should have an aria-labelledby attribute where the value is the ID of the modal title (you don't need or want the #).
• Modal should have an aria-describedby attribute where the value is the ID of a div that contains a description of the modal (you don't need or want the #).
• Pressing the ESC key should close the modal and return the focus to the element that triggered the modal.
• If the modal contains a form, pressing the Enter key should submit that form.

Usability

When to use

• When the focus on the user must be focused on a single, or limited number, of elements. For example, when confirming or canceling a required action.
• The flow the user is in would otherwise be interrupted by a distinct page.

Do not use when

• Content that must be linkable (have a distinct URL) or searchable.
• The contents of the modal is a form longer than 4 fields.

Guidelines

• Retain form input: All data entered into a modal should be retained until the modal is submitted. Thus if a user enters data, dismisses the modal, and then reopens the modal the form data should be populated in the form fields.

Usability

When to use

• When an action is required by the user before they may continue.
• When it is necessary to redirect the user to another part of the site.

Guidelines

• These modals are simply containers for an alert. Thus the modal should adhere to the guidelines for the appropriate alert.
• Modals that manage destructive actions should be triggered by a red, secondary button and should use the error alert style. However, unlike the deafult error alert these modals should allow the user to dismiss them.</a>

Accessibility

• Unfortunately, we have a number of these modals and we should excise them as quickly as possible. Content behind these modal has to scroll to support the egregious form lengths on mobile devices.

Usability

When to use

• Never. Long forms do not belong in modals.

Guidelines

• Do not create new instances of modals that contain long forms.
• Retain form input: All data entered into a modal should be retained until the modal is submitted. Thus if a user enters data, dismisses the modal, and then reopens the modal the form data should be populated in the form fields.