A window that's overlaid on the page, suspending previous interactivity until the modal is interacted with.
Modals must be initiated by user interactions, whether they are intentional or unanticipated. Triggers can be any CTA, icon, image, text link, interaction or operation step.
Modal content must require users to interact in order to proceed. The buttons at the bottom of a modal can be replaced by a custom set of controls.
If more than one button is used ...
Modal content should be brief and involve a single decision to discourage the need for an internal scrollbar. For content that will likely require scrolling, or that involves more than a single decision, consider using an off canvas or workflow page.
Users should be able to dismiss a modal by two methods - selecting its X button, or one of the buttons at the very bottom.
Selecting outside of a modal (on the tinted background) to close it is an optional feature, but discouraged because users who are accustomed to advertisements appearing in modal overlays may instinctively close them before looking at their content.
Never initiate modals on top of existing modals.
Never replace one modal with another without returning to the parent page content.
Often times a modal will precede navigation to a new browser tab or window, especially when this is to a third-party site. Navigation links to the same domain should not open a new browser tab or window, unless the current context is highly sensitive (for example, the checkout workflow).
If the content for the new tab or window can comfortably fit within a modal, then it's preferable to show the content within a modal without requiring users to navigate away from the current context.
A modal window should always be used before navigating away from a Dell Technologies site if the destination is a third-party site that collects sensitive or private data, or if the action involves downloading software.
Tab and Shift + Tab do not move focus outside a modal. Modal dialogs do not provide a means for moving keyboard focus outside the modal window without closing the dialog.
Tab key moves focus to the next tabbable element inside the modal. If focus is on the last tabbable element, moves focus to the first tabbable element inside the modal.
Shift + Tab keys moves focus to the previous tabbable element inside the modal. If focus is on the first tabbable element, moves focus to the last tabbable element inside the modal.
Escape key dismisses the modal. This is equivalent to selecting a close "X" or "Cancel" button within the modal.
Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.
Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.
To be determined.
The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.
Please follow the best practices for modal dialogs from WAI-ARIA authoring practices 1.1.
Please also refer to these recommendations for dialogs from WAI-ARIA 1.1.
You may refer to these examples of modal dialogs from WAI-ARIA practices 1.1.