The many lives of a notification
Notifications: a field guide
Your guide:
- herds cats at Microsoft
- web developer
- looks at lots and lots of products
Human Interaction
Classifications and terms
What is a “Live Region”?
aria-live
assertive vs. polite
ARIA Roles
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
Type |
Assertive or polite |
Habitat |
What sort of UI does it commonly occur in |
Rarity |
How common is this type of notification |
Risk |
How likely is it for this live region to fail if used? How high are the consequences if it does? |
Loading...
Type |
Polite |
Habitat |
Wide-ranging; can be found almost anywhere. |
Rarity |
Common |
Risk |
Low |
- aria-live="polite"
- aria-busy="true"
Form errors
Type |
Polite for inline errors, assertive after submit |
Habitat |
Found exclusively within forms |
Rarity |
Common |
Risk |
Medium |
- role="alert"
- aria-live="polite"
- aria-live="assertive"
Search results
Type |
Polite and concise |
Habitat |
Any search or filter interface |
Rarity |
Common |
Risk |
Medium |
- role="status"
- aria-live="polite"
Progress indicators
Type |
Polite / progressbar |
Habitat |
Wide-ranging; often found with upload and download UI |
Rarity |
Common |
Risk |
Low |
Toasts
Type |
Assertive / alert (or depending on the message) |
Habitat |
Primarily confined to application-style interfaces |
Rarity |
Uncommon |
Risk |
High |
![cat with its face stuck in a piece of bread, looking generally upset](./assets/toast-cat.jpg)
NOAP.
- role="alert"
- role="status"
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 |
- role="log"
- aria-live="assertive/polite"
- aria-atomic="false"
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
An empty aria-live element
Update 1
Update 2
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
Image credit: Lisette Murphy
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