Skip to contentSkip to footer
Grey owl in a tree

Photo: Zdeněk Macháček

Alert

Introduction

Alerts help draw attention to important messages, like confirmations or warnings, that visitors should not miss while browsing the page.

Confirm and Warn

Natura11y provides two feedback alert styles: Confirm and Warn.

Each alert should include an icon to help convey its meaning. Use icons from the Natura11y Icons library.

HTML
<div
  class="alert alert--confirm"
  aria-labelledby="alert-confirm-label"
  aria-describedby="alert-confirm-description"
  role="alert">


  <div class="alert__title h5">
    <span class="icon icon-confirm" aria-hidden="true"></span>
    <span class="alert__title__text" id="alert-confirm-label">
      Alert Confirm
    </span>
  </div>


  <div class="alert__description" id="alert-confirm-description">
    <p>
      Thank you for your feedback. A confirmation message has been sent to your email. Return to our
      <a href="#1">homepage</a>.
    </p>
  </div>


</div>
Figure 1
Figure 1 notes
LinesDetails
1-5

Use .alert on the wrapper.

Add .alert--confirm or .alert--warn to choose the alert style.

The aria-labelledby value points to the alert title.

The aria-describedby value points to the alert description when one is present.

Use role="alert" when the message should be announced right away.

7-12

The .alert__title class groups the icon and title text.

The title text has an id so aria-labelledby can point to it.

14-19

The .alert__description class is optional. When it is included, its id should match aria-describedby.

Links inside an alert automatically inherit the alert’s text color.

Inverse Color Modifier

For a bolder alert look, add --inverse to the alert--confirm or alert--warn classes.

HTML
<div class="alert alert--confirm--inverse">
  ...
</div>


<div class="alert alert--warn--inverse">
  ...
</div>
Figure 2

Title Only Alert

You can create a title-only alert by omitting the .alert__description element entirely.

HTML
<div
  class="alert alert--confirm--inverse"
  aria-labelledby="alert-title-only-label"
  role="alert"
>


  <div class="alert__title h5">
    <span class="icon icon-confirm" aria-hidden="true"></span>
    <span class="alert__title__text" id="alert-title-only-label">
      Alert Confirm
    </span>
  </div>


</div>
Figure 3

Dismissable Alerts

To make an alert dismissable, place a close button as the first child of .alert. Add data-alert-close to the button; the JavaScript uses this attribute to wire up the dismiss behavior.

Add aria-live="assertive" and aria-atomic="true" to the .alert element itself so assistive technology announces when the alert is removed.

HTML
<div
  class="alert alert--confirm"
  aria-live="assertive"
  aria-atomic="true"
  role="alert"
  aria-labelledby="alert-confirm-label"
  aria-describedby="alert-confirm-description">
  <button
    class="button button--icon-only"
    aria-label="Close alert"
    data-alert-close
    type="button">
    <span class="icon icon-close" aria-hidden="true"></span>
  </button>


  <div class="alert__title h5">
    <span class="icon icon-confirm" aria-hidden="true"></span>
    <span class="alert__title__text" id="alert-confirm-label">
      Alert Confirm
    </span>
  </div>


  <div class="alert__description" id="alert-confirm-description">
    <p>Thank you for your feedback.</p>
  </div>
</div>
Figure 4
Figure 4 notes
LinesDetails
3-4

Add aria-live="assertive" and aria-atomic="true" to dismissable alerts so screen readers can announce alert changes.

8-14

The close button needs data-alert-close. Natura11y JavaScript uses this attribute to dismiss the alert.

Place the close button before .alert__title so it appears in the close button area of the alert layout.

More Style Variations

For additional alert styles, you can exclude the .alert--confirm or .alert--warn classes. Instead, use color utilities or border utilities for different styles.

HTML
<div
  class="alert theme-secondary text-align-center border-radius-2"
  aria-labelledby="alert-mail-label"
  aria-describedby="alert-mail-description"
  role="alert">


  <div class="alert__title h5">
    <span class="icon icon-mail" aria-hidden="true"></span>
    <span class="alert__title__text" id="alert-mail-label">
      You have new mail
    </span>
  </div>


  <div class="alert__description" id="alert-mail-description">
    <p>
      You have <strong>(4)</strong> unread messages waiting in
      <a href="#1">your account dashboard</a>.
    </p>
  </div>


</div>
Figure 5

Form

Accessibility