Site Wide Notice

Emergency Notice

Emergency notices are used to let website visitors know of any emergencies currently in progress.

It is important that these notices are easy to add and that they do not require a full site publish. We have implemented this notice system to be as simple as possible in TERMINALFOUR.

We have defined a content type called "Emergency Notice". Simply adding and approving this content in a section witll trigger an auto-publish.
This content type has 3 elements. 

  1. Site Wide Banner – This is a plain text element and is for the text you want to appear in the banner at the top of every page of your site
  2. Description – This is a HTML element and is for the more detailed content on the page that the user will arrive when they click the banner (what you are reading now)
  3. Notice Type – This is a Select Box where you can choose the severity of your notice.

The three notice types we have created for this demo are:

  • Emergency (Outputs as a red banner that cannot be dismissed)
  • Warning (Outputs as an orange banner that can be dismissed)
  • Notice (Outputs as a blue banner that can be dismissed)

Dismissed notices will be hidden for 24 hours from the time the user dismisses them. We manage this through a cookie in which we save the content ID. If you need to update a notice and all users must see this notice even if they have dismissed an earlier version then you can just create a new piece of content. This ensures the notice has a new content ID and will be shown to the user.

There is no limit to the number of notices you can have on your site at the same time at any notice level.

How it works

When you save a Notice a JSON file is created that contains all the current active notices.

When a user visits a page some Javascript checks this JSON file to see if there are any live notices. If a notice is found in the JSON file we first check it's notice type. If the notice type is emergency then we show it on the screen. If the notice type is "warning" or "notice" then we check to see if the user has already dismissed this notice before we display it on the screen.

Every 10 seconds this script runs again. This means that a user does not need to re-load the webpage to see a new notice.

Screen readers

All modern screen readers including Apple's VoiceOver are supported with these notice. We use "aria-live" attributes to inform the screen reader of the severity of the notice. If an emergency notice is injected onto a page the screen reader will read this aloud immediately. For lower severity notices the screen reader will finish the block of text it is reading, wait for the user to be idle and then read the notice. More information on aria-live attributes can be found in the WAI-ARIA specification.