The many lives of a notification

a series of colorful cat illustrations

      Notifications: a field guide

      illustrated avatar of Sarah with cat

      Your guide:

      • herds cats at Microsoft
      • web developer
      • looks at lots and lots of products

      Human Interaction

      • No control
      • No review
      green cute but obstinate cat illustration

      Classifications and terms

      abstract anatomical diagram of a cat

      What is a “Live Region”?

      aria-live

      assertive vs. polite

      ARIA Roles

      • alert
      • status
      the common roles: good support and wide use
      • log
      • marquee
      • timer
      the other roles: poor or support and danger of extinction

      ARIA attributes

      • aria-atomic : what is read?
      • aria-relevant : when is it read?
      • aria-busy : maybe don't read this.
      these attributes have poor or no support

      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
      slowly rotating cat sitting on a roomba
      • 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
      guilty looking cat giving side eye
      Sample shipping form showing two inline form errors highlighted
      • role="alert"
      • aria-live="polite"
      • aria-live="assertive"

      Search results

      Type Polite and concise
      Habitat Any search or filter interface
      Rarity Common
      Risk Medium
      cat offering a fish in its mouth
      The Hulu search field with the word Cats entered and multiple results
      • role="status"
      • aria-live="polite"

      Progress indicators

      Type Polite / progressbar
      Habitat Wide-ranging; often found with upload and download UI
      Rarity Common
      Risk Low
      illustrated cat washing its face
      File input with a11y cats PNG file and progressbar at 72%
      • role="progressbar"

      Toasts

      Type Assertive / alert (or depending on the message)
      Habitat Primarily confined to application-style interfaces
      Rarity Uncommon
      Risk High
      • 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
      cat with top hat conjures row of identical cats
      Twitter direct message conversation about an illicit catnip deal
      • 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
      six cats precariously dancing on top of each other
      • role="marquee"

      Timers

      Type timer (unsupported)
      Habitat Booking sites, tests, specialized cases
      Rarity Rare
      Risk High
      pink illustrated cat, looking up
      • role="timer"

      Feral Notifications

      How to recognize and avoid dangerous live regions in the wild

      two cats dancing on top of a laundry line

      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
      cat diving onto woman knitting

      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
      trickster cat juggling household items

      ARIA state changes

      Habitat Accordions, menus, toggle buttons, and any widget that changes state
      Rarity Uncommon
      Defense ARIA state attributes
      six cats under a moonlit sky in different states of dancing

      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
      disturbling CGI human-cat hybrids from the 2019 movie

      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?

      A cat waits with knife and fork at a table, as a waiter brings a roast bird

      1. Keep it concise

      A cat surrounded by bookshelves looking out a window

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

        overly cute cat drawn with ascii art

        3. Set a timeout to remove notification text

        cat with top hat magically conjures row of identical cats

        4. Handle insertion vs. updates wisely

        An empty aria-live element
        Update 1
        Update 2

        6. Create a notifications center

        github notification center showing icon and notification inbox

        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!

        child looking at three dogs

        Instead:

        • Move focus
        • Write clear UI instructions

        The future of notifications

        three cyborg cats Image credit: Lisette Murphy

        File support issues

        A JAWS github issue about aria-relevant removeals not working An NVDA github issue about focus change live region conflicts

        Get involved in standards!
        Let them know what you think

        ARIA spec github issue about deprecating all live roles but alert

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

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

        animated loading bar

        at forums like the Web We Want

        And finally, use your powers wisely

        kitten standing atop a mountain range, shooting lightning from its paws

        Links