Notifications and Alerts

Notifications and alerts of content changes, errors, and status updates are important aspects of a website or web application’s usability. For example, a notification that provides feedback on an incorrect or malformed input to a form can help speed up the task of error recovery, while a notification of an impending timeout can help users take action to avoid being inadvertently logged out.

Notifications are often missed by screen reader users, when they appear elsewhere in the DOM than where the screen reader is reading or are purely visual. People with impaired vision may miss an update if the visual change is subtle or if it's not within their currently magnified area.

Take care to ensure that notifications and alerts are provided for important events, and that they are provided in an accessible way so that people with disabilities can access them and respond if necessary.

Provide Helpful Error Messages

People with visual, cognitive and physical impairments are particularly prone to making errors when entering data through forms. When errors resulting from form input happen, it’s important to make sure that error messages are shown accessibly.

  • Provide error messages that give assistance: Describe the related problem in straightforward terms and, where possible, give advice on how to resolve them.
  • Make it easy to locate the problem: Programmatically associate each error message with its corresponding form control using the aria-describedby attribute. If there’s a list of errors, move focus to the container of the list once it is generated so that screen reader users can find it. 

 

Testing

For each input control where an error could be made, enter incorrect data and check:

  • Is an error message displayed?
  • Does it clearly explain the error and how to resolve it?
  • When a screen reader is running, is it possible to find the location of the error message and the associated form control?

Give Users Control Over Timeouts

People with disabilities may take longer to read and interact with web content. Sometimes a time limit is present, for example, due to security requirements, and the browsing session is terminated after a period of inactivity. If there is no suitable warning or no ability to turn off or extend a time limit, there’s an increased risk that people with disabilities will be unable to successfully use the content.

  • Allow users to turn off or extend the time limit. The preferable approach is to give users control over the length of the time limit or whether the time limit is present at all. But in some cases this is likely to be impractical.
  • Allow users to extend the time limit. When the time limit approaches, provide a warning dialog that allows users to extend the time limit by a simple keypress, such as by pressing the spacebar.

 

Testing

If a time limit is present on a page or site:

  • Is there a mechanism for users to turn off the time limit or change its length?
  • As the time limit approaches, is there a message provided to alert users of the impending time out? Does the message allow them to extend the timeout?

Provide Notification of Dynamic Changes to Content

Where dynamic content is updated either automatically or in response to a user action, make sure that users are notified of this update in an accessible way.

Make sure that the notification is appropriate to the type and importance of update that has taken place. For example, an update that reports an error or a problem may be considered more important than an update to a newsfeed that is shown as supplementary content to the main page.

  • Identify content that may be updated as a WAI-ARIA live region. Use the aria-live attribute on the container of the content that may be updated or, in special cases, use one of the WAI-ARIA special live region roles.
  • Make users aware of important changes in content. However, do so by clearly identifying critical updates versus information-only updates. Change focus only when an alert is critical to the user's current activity. Otherwise, don't force a focus change and/or interrupt the user's work. This guideline is especially useful to screen reader users and to those with cognitive disabilities.
  • Provide a suitable priority for update notifications. Decide how important it is that a user hears the updated content and whether the screen reader should be interrupted from what it’s currently reading. This will influence what value you give the aria-live attribute.

 

Testing

  • For each piece of dynamically updated content, inspect the underlying code. Is it identified in code as a live region, with a suitable level of priority of notification?
  • Listen to the page with a screen reader. Are notifications made in an accessible way, including making users aware of important changes in content? 

More Information

Related Techniques

✎ Technique: Status messages

Assistive technology users should be able to detect when important changes occur on a web page, With the use of a status message, information can be provided to the user without changing focus or unnecessarily interrupting their work.

✎ Technique: Form error communication

Effectively and accessibly communicate form errors by: Communicating that a form has errors, Communicating any individual errors case by case, including clear guidance on how to address the error.

✎ Technique: Session extension

For a number of reasons including data persistence, performance and security, it is sometimes beneficial to terminate idle user sessions. It's important to warn people a session is about to expire and give them the option to continue.