User Guide

Global Alert Component + Content Fragment

A Global Alert displays a prominent message at the top of the screen. Global Alerts bring a user’s attention to a significant situation, such as a site-wide service disruption or other critical information that will impact most users. Global Alerts are not sticky and should scroll with the other content on the page.

 

Global Alerts are authorable only by the Governor's Office or site admins. Agency authors should use the In-Page Alerts to add alerts. These are added on a page-by-page basis and have the same functionality as Global Alerts.

Overview

Component name: Global Alert

Authors who can use component: any

Templates/page types that can use component: all

Required or optional: optional

Authoring Fields

Creating an Global Alert as a Content Fragment

1.       From the landing Navigation page, click on Content Fragments.

Navigation page featuring Content Fragments

2. On the left hand panel, select the folder where the CF is needed. It can be used by any pages in this folder. Once selected, click “Create” in the upper righthand corner.

Content fragments featuring create button in upper right corner

3.  New Content Fragment

  1. Location pathfinder: This field shows the URL of the folder selected in Step 2. It does not need to be edited.
  2. Content Fragment Model dropdown: Select “Alert.”
  3. Properties fields

 i. Title: Optionally provide a title for your Alert. Adding a title automatically creates a name as well.

ii. Name: Provide a name for your Alert. Only mandatory field in Properties.

iii. Description: Optionally provide a description for your Alert.

Property fields of new global alert content fragment

4. Click “Create and open” to add detail to the Alert CF immediately. Click “Create” to create the Alert and exit the authoring dialog- it can always be edited later.

Editing the Global Alert Content Fragment

1.  Alert Type dropdown: Select from Informative, Warning, and Critical.

a. Informative: These alerts are blue, with an information icon. Use neutral alerts for important time-sensitive information. Examples: important dates, recent content updates, new policies or system notifications.

b.  Warning: These alerts are yellow, with an alert icon. Warning alerts tell the user something urgent or help the user avoid a problem. Examples: travel information, content trigger warnings or location closures.

c.  Critical: These alerts are red, with an error warning icon. Critical alerts should only be used for active emergency situations that could pose a health or safety risk. Examples: severe weather threats or natural disasters.

2. Title field: Add a title to display on the Alert.

3. Title Heading Level dropdown: Select from h2 – h6. The Alert can be placed anywhere on a page; choose H-level accordingly.

4. Start Date and Time picker: Select the date and time that the Alert should begin displaying on the page.

5. End Date and Time picker: Select the date and time that the Alert should disappear from the page.

6. Description field: Add a description to display on the Alert. Keep the description short and direct, with 140 characters maximum.

7. Link Label field: If adding a CTA, use this field to add a link label to display on the Alert’s CTA button.

8. Internal Link URL: If adding an internal CTA, use the "Add content path" pathfinder to link to another page on the site. This page may contain more information about the Alert’s contents, or may have an action for residents to take. Only one of Internal and External Link URL fields may be filled.

9. External Link URL: If adding an external CTA, add the link here. Only one of Internal and External Link URL fields may be filled.

10. Disable Close selector: If toggled off, the Alert has a close icon, and may be dismissed. If toggled on, the Alert has no close icon, and cannot be dismissed from the page. Default off.

Global Alert Content Fragment in its editing state with fields to edit
Global Alert Content Fragment in its editing state with focus on the link fields

13.   From the top right corner, select Publish.

14. From the Publish 1 Content Fragments modal, select “Publish service” and “Publish.”

15. The Alert CF is now published.

Adding the Global Alertcomponent to the Header

1. From the navigation landing page, click on Experience Fragments. Click through to the Global folder, then Header. Select the checkbox, then the Edit button. On the authoring screen:

a. Option 1- double click on “Drag components here.” A modal titled “Insert New Component” will pop up. Type “Global Alert” in the search bar, or scroll to the Global Alert in the list. Double click to add to page.

b. Option 2- on the left hand rail, navigate to the Components tab. Type “Global Alert” in the search bar, or scroll to the Global Alert in the list. Double click to add to page.

2. With the edit wrench, open the component.

Global alert content fragment with edit wrench

3. Alert Content Fragment pathfinder: Select the Alert which should display on the page.

Global alert with path

4. Click “Done.”

5. The Alert now appears on all pages below the Header. View it before publishing by selecting “View as Published” from the Page Information Menu (in horizontal menu, click icon with 3 slider buttons, and select from dropdown).

Published Global Alert displaying on a page below the Header

Accessibility

1.  A global alert must be contained within a <section> element. The <section> element must have an ARIA role of alert. The alert role is used to communicate an important and usually time-sensitive message to the user. When this role is added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user.

2.  The <section> element must have an aria-labelledby attribute that matches the id attribute of the alert title.

3.  If a CTA is included within in alert, the alert should be sequenced programmatically before the X (close) button.

4. The <button> for the X (close) button should have an aria-label attribute set to "Close Alert".

Other Tips

1. Do not use Alerts for emphasis of regular content, such as job postings. Alerts should be used only for timely, urgent notifications.

2. Make sure to keep time-sensitive Alerts up only for the duration of the crisis.

3.  Alerts should describe the impact on the resident, as well as actions they should take.

4.  Limit the amount of text in an Alert. Write concise headings and copy, and include only one link per Alert.

5.  Use a link to direct users to further information if needed.

6. Select a Neutral, Warning, or Critical Global alert depending on the usage of the alert

a. Neutral: Use neutral alerts for important time-sensitive information. For example, important dates, recent content updates, new policies or system notification

b. Warning: Warning alerts tell the user something urgent or help the user avoid a problem. For example, travel information, content trigger warnings or location closures.

c.  Critical: Critical alerts should only be used for active emergency situations that could pose a health or safety risk. For example, severe weather threats or natural disasters.