The many lives of a notification

Notifications: a field guide

Human Interaction

• No control
• No review

Classifications and terms

What is a “Live Region”?

aria-live

assertive vs. polite

ARIA Roles

• alert
• status

• log
• marquee
• timer

ARIA attributes

• aria-atomic : what is read?
• aria-relevant : when is it read?
• aria-busy : maybe don't read this.

The <output> element

The output element represents the result of a calculation performed by the application, or the result of a user action.

(Also, just read Scott's article)

Domestic Notifications

Loading...

Type	Polite
Habitat	Wide-ranging; can be found almost anywhere.
Rarity	Common
Risk	Low

Form errors

Type	Polite for inline errors, assertive after submit
Habitat	Found exclusively within forms
Rarity	Common
Risk	Medium

Search results

Type	Polite and concise
Habitat	Any search or filter interface
Rarity	Common
Risk	Medium

Progress indicators

Type	Polite / progressbar
Habitat	Wide-ranging; often found with upload and download UI
Rarity	Common
Risk	Low

Toasts

x NOAP.

Feeds and Chat messages

Type	Log + assertive or polite
Habitat	Within application-style interfaces, usually where they are the main feature
Rarity	Uncommon
Risk	High

Live charts and data

e.g. a stock ticker or CPU usage graph

Type	marquee (unsupported)
Habitat	Specialized scenarios, primarily within applications
Rarity	Rare
Risk	High

Timers

Type	timer (unsupported)
Habitat	Booking sites, tests, specialized cases
Rarity	Rare
Risk	High

Feral Notifications

How to recognize and avoid dangerous live regions in the wild

Control hints

Habitat	Non-standard controls, or ARIA patterns with poor support
Rarity	Medium
Defense	Use standard, supported HTML and ARIA, simplify UI, write static instructions

Context changes

e.g. popups opening, SPA navigation with focus management

Habitat	Dropdowns, dialogs, single page apps, and complex controls
Rarity	Common
Defense	Drop the live region, and let the focus change do the work

ARIA state changes

Habitat	Accordions, menus, toggle buttons, and any widget that changes state
Rarity	Uncommon
Defense	ARIA state attributes

The quick wrap

i.e. <ul class="search-results" aria-live="assertive"> ... </ul>

Habitat	Primarily found in application interfaces with many content changes
Rarity	Uncommon
Defense	Custom live regions with tailored, concise text

Tips for getting along with your new notification

So you've decided to implement a new notification, but things aren't going well; now what?

1. Keep it concise

2. Don't use special characters or non-text content

3. Set a timeout to remove notification text

4. Handle insertion vs. updates wisely

6. Create a notifications center

7. Debug with a mutation observer

						function observeElement(element) {
						  const onMutuate = function(mutationsList, observer) {
						    for(let mutation of mutationsList) {
						      if (mutation.type === 'childList') {
						        console.log('A child node has been added or removed.');
						      }
						      else if (mutation.type === 'attributes') {
						        console.log(`${mutation.attributeName} was modified.`);
						      }
						    }
						  };
						  const observer = new MutationObserver(onMutuate);
						  observer.observe(element, config);
						}
					

8. Don't use a live region!

Instead:

• Move focus
• Write clear UI instructions

The future of notifications

File support issues

Get involved in standards!
Let them know what you think

marquee, timer, or something new, could enable UI like this:

Push for browsers, screen readers, and specs to handle common use cases for you

at forums like the Web We Want

And finally, use your powers wisely

Links

• Codepen with Live region support tests and results
• Mutation observer gist
• the Web We Want
• Live region deprecation ARIA issue
• All ARIA issues containing "live region"
• Scott's <output> article