Page Notes

This page demonstrates some code that can be used to show toast messages accessibly!

Once the toaster script is included on your page, you can show toasts by invoking GW.Controls.Toaster.showToast. There are two parameters, one for content and one for options.

content
This is what will show up in the toast - it can be plain text or HTML. If you're going to put interactive content inside it, like links, you should make it persistent or with a long timeout, as described below.
opts
Optional. An object with some properties you may set.
omitPreamble
Boolean. If set to true, the screen-reader only preamble to the message to indicate what it is will be omitted. Use this if you're including text like Message: or something similar.
persist
Boolean. If set to true, the toast will display until the user clicks a button to dismiss it. This is recommended for toasts with interactive content.
invisible
Boolean. If set to true, the toast will not visually display on the screen, but will still be indicated to assistive technology.
timeout
Number. Set this to the number of milliseconds until the toast vanishes. The default is 4000 (or four seconds). If the persist attribute is set, this won't do anything.
delay
Number. Set this to the number of milliseconds until the toast shows. The default is no delay.

The toasts are all in a live region, so they'll be announced to assistive tech as they appear.

Files

Markup

  • toasterDemo.html

Scripts

  • toasterControl.js
  • personalizationControl.js

Styles

  • toasterDemo.css