Notices

Skill Level: 
Intermediate

Notices are a great way to notify users about time sensitive information, such as errors or success messages. To use the notice plugin, you will need to follow these steps:

  1. Add the HTML markup for the notice to the page. An example of the markup, with specific parts highlighted can be seen below. The parts include:
    notice container
    A <div> element with a class of .wdn_notice. All of the markup for the notice is contained within this container.
    (optional) notice-type class
    This class will style the notice. By default (no class provided) the notice is purely informational. Optional classes include .affirm (success), .alert (warning), and .negate (error)
    (optional) overlay location attribute
    The overlay location is defined by the data-overlay attribute. This optional attribute allows placing the notice over specific sections of the page. Possible values are header and maincontent.
    (optional) duration attribute
    The notice can be displayed for a specific amount of time and then automatically hidden. The duration can be specified by the data-duration attribute. The value of the attribute must be an integer of seconds. Note that it is a best practice to not hide important information automatically. It is impossible to know whether or not the content has been read by the user unless they interact with the notice and manually close it. The use of this attribute is discouraged under most circumstances.
    (optional) close button
    The close button must be contained in a <div> element with a class of .close. The close button itself must be an <a> element, with text that describes the action ("close this notice").
    message container
    The message container must be a <div> element with a class of .message. The message must contain a title, which is marked up with a .title class. It must also contain content, which should be placed in <p> elements.
  2. Load the notice plugin with <script>WDN.initializePlugin('notice');</script>
<div class="wdn_notice {notice-type}" data-overlay="{overlay-location}" data-duration="{duration}">
  <div class="close">
    <a href="#">Close this notice</a>
  </div>
  <div class="message">
    <p class="title">Important Alert!</p>
    <p>This is my content. <a href="#">This is some link text</a></p>
  </div>
</div>

Example

This is my Title!

This is my content. This is some link text.

Great Success!

This is my content. This is some link text

Denial Notice!

This is my content. This is some link text

Important Alert!

This is my content. This is some link text


<div class="wdn_notice">
  <div class="close">
    <a href="#">Close this notice</a>
  </div>
  <div class="message">
    <p class="title">This is my Title!</p>
    <p>This is my content. <a href="#">This is some link text</a>.</p>
  </div>
</div>
<div class="wdn_notice affirm">
  <div class="close">
    <a href="#">Close this notice</a>
  </div>
  <div class="message">
    <p class="title">Great Success!</p>
    <p>This is my content. <a href="#">This is some link text</a>
    </p>
  </div>
</div>
<div class="wdn_notice negate">
  <div class="close">
    <a href="#">Close this notice</a>
  </div>
  <div class="message">
    <p class="title">Denial Notice!</p>
    <p>This is my content. <a href="#">This is some link text</a>
    </p>
  </div>
</div>
<div class="wdn_notice alert">
  <div class="close">
    <a href="#">Close this notice</a>
  </div>
  <div class="message">
    <p class="title">Important Alert!</p>
    <p>This is my content. <a href="#">This is some link text</a>
    </p>
  </div>
</div>
<script>
  WDN.initializePlugin('notice');
</script>

Accessibility Considerations: 

  • Do not auto-hide notices after a certain amount of time by using the data-duration attribute. A user may not have a chance to read the entire message or may not even have a chance to notice it before it is removed.
  • If the notice is critical, place it near the top of the page to ensure that it is one of the first things read. A screen reader does not always follow the visual order of elements so it is important to place the notice markup at the at the top of the maincontent before any other content is provided.
  • Be sure that all notices, especially error messages, are clear and understandable. If an action needs to be taken, such as correcting for a form field, provide a link to the specific form field.
  • Do not convey meaning by color alone. Use the notice title to convey the meaning. For example, if you are displaying an error, be sure to include the text "error" in the notice title.
Contributed By: 
IIM