Skip to main content

Notifications

Notifications provide unobtrusive, short-lasting, contextual feedback to the user.

Accessibility

  • If it’s an important message like an error, use role="Prompt" aria-live="assertive", otherwise use role="status" aria-live="polite" attributes.
  • Notifications should not be visually hidden if they are not being used. If you do not want a screen reader to pick up a toast, use the aria-hidden='true' HTML attribute and/or {display: none;} in your CSS.
  • When constructing a Notifications message, consider how it will be read by a screen reader:
  • Write out dates, e.g., December 1, 2018 and not 12/1/2018.
  • Avoid non-text symbols like “/” and “+”.
  • When describing a date or time range use “to” instead of “–”.
  • Notifications should be used sparingly and only in instances that warrant removing the user from their current task. Too many toasts can be disorienting to users with cognitive issues.
Last updated December 2, 2022.