From time to time, users may need to be immediately alerted to new information that is displayed on a page after it is loaded. This may include information about a change of state of the website/application itself, or anything that the website owner knows its users will want to know urgently.

This pattern shows how accessible notifications can be provided using ARIA live regions. Live regions prompt screen readers to announce their contents as soon as they appear.

How it looks

image of alert notification example

The code

The message region should have the role="alert" attribution. This role ensures that whatever else is being announced by the user's screen reader at the time that the message populates will be interrupted.

<div role="alert" class="alert-messages"></div>
 

The live region can be populated with JavaScript quite easily:

const alertRegion = document.querySelector('.alert-messages');
var message = `
<img src="path/to/warning.svg">
<p>SUBWAY and BUS ON STRIKE. CLASSES CANCELLED.</p>`;
alertRegion.insertAdjacentHTML('beforeend', message);
 

Note the use of the ⚠ (warning) icon. This helps color blind users to identify the message type as an "alert". For some, the color coding of the red is not sufficient.