Notifications provide important, contextual information that may or may not not require the user to take action.
Page-level notifications should appear below the page title and above the content.
Section-level notifications should appear below the section header and above that section's content.
Alerts and errors are displayed with the following priority:
Alerts and errors may include an optional title.
Minor modifications can be made to the paragraph styling for an alert or error, but its heading styling should not be changed. Use screenreader-only text because notifications should be readable without a style sheet.
Navigation should be precise to each identified error and without the necessity to navigate the entire form. Notifications may include an optional list of one or more anchor links if the alert is specific to features farther down the page.
In cases with limited space, an appropriate icon (success, informational or error) can be used to trigger a tooltip that houses the notification message.
Important: See the Content Style Guide for detailed information about writing notifications, alerts and error messages.
Alerts and errors do not include marketing or promotional content.
Alerts and errors do not use interstitial or modal transitions that leverage static content.
Sufficient details should be provided for the user to address any user error. Error message text should be associated with each feature in error so that all errors are understandable and potentially correctable.
Consider next steps. When the user is required to do something in response to notification, let them know what they need to do and make that task as easy as possible. Think about how much context to provide with your message.
Write the message in concise, human readable language; avoid jargon and computer code.
Be polite in error messages — don’t blame the user.
Notifications are an opportunity to educate users because users will read a message that helps them resolve an error even if they won’t read documentation.
Don’t overdo it. Too many notifications will either overwhelm or annoy the user and are likely to be ignored.
Understand the user’s context. Don’t include notifications that aren’t related to the user’s current goal.
Alerts include success messages and important information that do not require action by the user.
Can be collapsed and reopened.
Errors notify users that something has gone wrong, giving their progress either a temporary or permanent “stop”.
Cannot be collapsed due to their importance.
Catastrophic errors appear by themselves, without the distraction of other error and alert types.
Error notifications are automatically removed, independent of other error messages, when each error state is resolved.
The meaning of an error notification should be conveyed through means other than color alone (i.e. an icon and explicit title).
Badges are the smallest type of notification and are typically used to:
Any of the brand approved colors for containers may also be used for badges so long as the implementation follows usage and accessibility guidelines.
No badge is shown for a numeric badge if the badge count number is zero.
Badge counts in excess of 999 will display “999+” for numeric badges.
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 alert and message dialogs from WAI-ARIA authoring practices 1.1.
Please also refer to these recommendations for alert dialogs from WAI-ARIA 1.1.
You may refer to this example of an alert dialog from WAI-ARIA practices 1.1.
You may also refer to these tutorials for user notifications from Web Accessibility Tutorials.