Notification

Notification are a type of alert. Notifications succinctly message relevant information. They’re timely, easy to understand, and have a clear purpose. Be straightforward in tone and action to help guide people through.

On this page

Use Cases

The user should be able to:

  • Informed in a timely manner
  • Take an action for example accepting a notification request
  • Navigate from a notification using a link
  • Have enough contrast on light and dark backgrounds to see notifications
  • Navigate to and interact with Buttons and links with keyboard

Interaction and Style

Relevant WCAG Requirements:

  • Info and Relationships

    Ensure information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. This means use proper HTML elements to structure your content, so it makes sense when read by assistive technology.

    WCAG 2.1 Understanding 1.3.1

  • Keyboard

    Ensure all functionality of the content is operable through a keyboard interface. This allows users who can't use a mouse or touchscreen to navigate and use your content.

    WCAG 2.1 Understanding 2.1.1

  • Name, Role, Value

    For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

    WCAG 2.1 Understanding 4.1.2

  • Error Identification

    If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text. This helps users understand what they need to correct when they've made an error.

    WCAG 2.1 Understanding 3.3.1

Keyboard Navigation

KeyAction
TabFocuses within the notification.
Enter/SpacebarDismisses the notification (if dismissible).

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.