Modal
A dialog overlay often used to communicate information requiring immediate user attention or action.
Page sections
Type
Default
Usage
A modal can be useful for microinteractions that require the user to maintain their context. However, because a modal is also highly disruptive, it should be used sparingly, like when relaying critical information upon which a user needs to act in order to proceed with their workflow.
Behavior
Avoid showing modals without the user taking action to prompt them.
Always allow the modal to be dismissible, by:
- Clicking/tapping the close icon
- Pressing the escape key
- Clicking outside the modal area
Always block content under the overlay. Users must either complete the task in the modal or close the modal to return to the main content.
Visual style
Display modals in the center of the viewport on desktop and tablet.
CTA buttons should be in the footer section of the modal.
Content strategy
- Use Title Case for short (~1 – 3 word) headlines
- Use Sentence case for longer headlines written as sentences (e.g. Claims are currently unavailable)
- Typically include 1 – 2 buttons, primary and secondary
Accessibility
Characteristics
- Manually triggered by user
- Display additional information and may include a call to action
Keyboard/focus expectations
- Enter/Spacebar activates trigger on manually activated modals
- Focus is trapped within modal until it is closed
- All buttons in modal receive keyboard focus and operable with a keyboard alone
- Tab/Shift + Tab move focus to the next/previous focusable element
- Escape closes the dialog
- When the dialog is closed, focus returns to the trigger element
Screen reader expectations
- Announces dialog when it appears. Ex. “Web Dialog…”
- “X” close button, upper right corner, is identified as a “Close” button. Ex. “…Close Button”
- For dynamic content (e.g. Price a service) errors will be read in order of appearance within the content.