Best practice when designing screen reader friendly notification functionality

Question

I am curious how you should approach the design of notification functionality with screen readers in mind.

Let's take Facebook as an example. If someone comments on one of your posts. A little popup notification appears in the bottom left corner of the application. Visually interrupting your current process.

What is the equivalent for screen readers?

I imagine it would be very disorientating to have an audio bite suddenly play to alert you of the update. However without some interruption how would you know to check your notification feed to action the latest notification?

Similarly how do screen readers interpret the little 'new notification' badges that often display a number. Do they just read the number out immediately after the notifications menu item title? Is there a best practice standard for designing these patterns for compliance with screen readers?

Answer 1

WAI-ARIA can be used to "convey user interface behaviors and structural information to assistive technologies in document-level markup".

Have a look at the Live Region Attributes:

• aria-atomic

  Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

• aria-busy

  Indicates whether an element, and its subtree, are currently being updated.

• aria-live

  Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

• aria-relevant

  Indicates what user agent change notifications (additions, removals, etc.) assistive technologies will receive within a live region.

Answer 2

The golden question here is: "If a notification doesn't notify - is it still a notification?" :)

My approach on this interesting problem would be to make a kind of a "silent notification" variation that could be activated in the settings or directly in the notification window. Something similar to "airplane mode" on a telefone. We can call it "library mode" :)

When in "silent notification mode" - the notification icon (when a new notification is triggered) would slowly fade-into an intensive color (light-up). If you use Google Chrome you are probably going to notice that it has a very similar and non-obtrusive design:

No notification:

New notification present:

The options menu icon just changes color without any fly-outs or popups or anything at all. Sometimes, I barely notice Chrome wants me to react to something (failed login to Google account, etc.) Sounds like a good solution for not braking the readers concentration.

Hope this idea helps...

Answer 3

You should be careful of the Chrome example above as, unless there's some hidden labelling for users of screen readers, there is no way of knowing that anything needs their attention. Similarly, if there's not enough contrast between the "no notification" the "new notification present" color, people with some forms of color blindness could also struggle to see the status change. This is covered under WCAG 2.0's "Use Of Color" requirement, which states:

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.