Alerts and notifications

Usage

From Rivet Design System Alerts

Alerts are used to display brief important messages to users. They are designed to attract the user’s attention, but not interrupt their work.

Load alerts via static HTML or server side scripting over javascript whenever possible. For dismissable alerts, do not auto remove; give people the ability to dismiss the alert. Dismissable alerts and alerts that are dynamically added to the content after page load must have appropriate accessibility attributes outlined below.

When to use

• To notify people about system status including error, warnings, and updates.
• To notify people they’ve successfully completed a task.
• Use along with inline validation alerts to summarize multiple errors on longer forms.

When to use something else

• When it’s necessary to interrupt the person’s workflow.
• When input/action is required to continue working.
• If action taken by the person will result in losing/destroying their work, require confirmation.

Accessibility

• Use the role="alert" attribute.
• Alerts that have a dismiss or close button use the role="alertdialog" attribute.
• Use the aria-labelledby attribute to link the alert title with the alert element.
• Dynamically rendered alerts are automatically announced by most screen readers; note that screen readers will not inform people of alerts that are present before a page has finished loading.

Alert list accessibility

Alert lists can be particularly useful for summarizing multiple errors on a page, and providing links to the invalid fields. These summaries are especially helpful for people with visual impairments, who will not receive the visual cue provided by multiple inline alerts appearing on the page when a form is submitted.

Microcopy

• Alert title is clear and concise. “Success” rather than “Application was submitted successfully”
• Alert message is descriptive and clearly articulates the problem encountered or the information needing conveyance. “The user ID and password you entered do not match” is more clear than “Unauthorized”.
• Where appropriate, alert title is a link to the position on the page where the invalid element can be found.
• Alert message ideally provides next steps where appropriate.

Example

(good copy)

(bad)

Notes

• Avoid using error messages that automatically disappear.
• Write helpful alert messages. For errors, include a brief description of the problem and how to fix it.

Code

Page level messages

Page level messages present at the top of the page below the header but above the main content area.

Informational notice

<div class="alert alert-info" role="alert" aria-labelledby="alert-title">
  <h2 id="alert-title">Scheduled system maintenance</h2>
  <p>The system will be unavailable August 1st due to scheduled system maintenance.</p>
</div>

Success notice

Often a response to a form submission on a confirmation page. The message is a response to an action.

<div class="alert alert-success" role="alert" aria-labelledby="alert-title2">
  <h2 id="alert-title2">Thank you</h2>
  <p>We have received your request. Request status is available in My Account.</p>
</div>

Warning notice

Use for announcing scheduled outages and upcoming closures.

<div class="alert alert-warning" role="alert" aria-labelledby="alert-title3">
  <h2 id="alert-title3">Closing soon</h2>
  <p>The Library is closing soon. If you need assistance, go to a service desk.</p>
</div>

Error notices

This most commonly occurs with web forms, but it may also be applied to unplanned service failures.

<div class="alert alert-danger" role="alert" aria-labelledby="alert-title4">
  <h2 id="alert-title4">Errors</h2>
  <p>The form needs attention. Please enter the correct date.</p>
</div>

Inline messages

Use inline messages for web form validation. In addition to the alert message, include an id for the input field to be described by.

Informational inline alerts

<p class="alert alert-inline alert-info">
 <svg class="glyph" aria-hidden="true" focusable="false" viewBox="0 0 16 16" width="16" height="16">
  <g fill="currentColor">
  <path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,2a6,6,0,1,0,6,6A6,6,0,0,0,8,2Z" />
  <path d="M8,12a1,1,0,0,1-1-1V8A1,1,0,0,1,9,8v3A1,1,0,0,1,8,12Z" />
  <circle cx="8" cy="5" r="1" />
  </g>
 </svg>
   Provide your university email address ending in umn.edu.
</p>

Success inline alerts

<p class="alert alert-inline alert-success">
 <svg class="glyph" aria-hidden="true" focusable="false" viewBox="0 0 16 16" width="16" height="16">
  <g fill="currentColor">
   <path d="M10.2,5.4,7.1,9.53,5.67,8.25a1,1,0,1,0-1.34,1.5l2.05,1.82a1.29,1.29,0,0,0,.83.32h.12a1.23,1.23,0,0,0,.88-.49L11.8,6.6a1,1,0,1,0-1.6-1.2Z" />
   <path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14a6,6,0,1,1,6-6A6,6,0,0,1,8,14Z" />
  </g>
 </svg>
 The password meets security requirements.
</p>

Warning inline alerts

<p class="alert alert-inline alert-warning">
 <svg class="glyph" aria-hidden="true" focusable="false" viewBox="0 0 16 16" width="16" height="16">
  <g fill="currentColor">
   <path d="M11,9H5A1,1,0,0,1,5,7h6a1,1,0,0,1,0,2Z" />
   <path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,2a6,6,0,1,0,6,6A6,6,0,0,0,8,2Z" />
  </g>
 </svg>
 Connection times out in 2 minutes.
</p>

Error inline alerts

<p class="alert alert-inline alert-danger">
 <svg class="glyph" aria-hidden="true" focusable="false" viewBox="0 0 16 16" width="16" height="16">
  <g fill="currentColor">
   <path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14a6,6,0,1,1,6-6A6,6,0,0,1,8,14Z" />
   <path d="M10.83,5.17a1,1,0,0,0-1.41,0L8,6.59,6.59,5.17A1,1,0,0,0,5.17,6.59L6.59,8,5.17,9.41a1,1,0,1,0,1.41,1.41L8,9.41l1.41,1.41a1,1,0,0,0,1.41-1.41L9.41,8l1.41-1.41A1,1,0,0,0,10.83,5.17Z" />
  </g>
 </svg>
 Email address is required.
</p>