...
Do not use modals for system-initiated content such as informational and warning messages, see Page Alerts instead
Do not use modals for decisions that will require additional information
Do not use modals during challenging, time-sensitive, or important workflows. Modals break the users' focus and can cause them to forget where they were
Best
...
practices
Do
Fill 25% of the screen when viewing on desktop. This size should be increased on smaller viewports
Disable background content to draw the user's attention to the modal
Keep the content in modals concise, clear, and action-oriented so users can quickly understand the action they need to take
Set the keyboard focus to the modal when it appears, ensuring that keyboard or assistive technology users can easily interact with the modal's content. When the modal is closed, ensure that focus is returned to its original location from before the modal was activated
...
G202: Ensuring keyboard control for all functionality
2.4.3: Focus
...
order
To ensure web content is accessible to users of assistive technology, WCAG criterion 2.4.3 emphasizes the importance of a logical focus order similar to the flow a sighted user would follow. For modals, this means that once activated, the focus should be programmatically set to the modal so the user is aware of its presence and can interact with its content. Once the modal has been dismissed or the intended action has been completed, focus should return to its original location before the modal is activated.
SCR37: Creating custom dialogs in a device-independent way
4.1.2: Name,
...
role,
...
value
Using ARIA (Accessible Rich Internet Applications) names, roles, and values can help assistive technologies and their users identify UI components and their purpose, making them more understandable and usable. Using ARIA with modals will help convey the purpose of the dialogue, announce the content to screen reader users, prevent interactions with background content, and ensure the modal is treated as separate from background content.
Modal Dialog Example - Role, Property, State and Tabindex Attributes
Key
...
component features
Telerik Blazor Dialogue Component - Overview
...
The call to action, typically in the form of a button, prompts the user to perform the action the modal is requesting of them. The text on this button should be action-oriented and make it clear to the user what decision or action they are performing.
Dismiss
...
modal
Modals should include a way for the user to close or dismiss the modal without performing the action being requested by them. This is typically done through a close or cancel button, or an icon such as an “X”.
Background
...
disabled
When a modal is activated, background content is typically disabled to draw the user’s attention to the modal. A translucent overlay is often applied as well, further emphasizing the modal while reassuring the user they can return to their workflow afterward.
...
| Info |
|---|
Pending: Will add examples of this component implemented in MAACE applications. |
Resources
External
...
resources
Modal and Nonmodal Dialogs: When (& When Not) to Use Them
...