Description
When user performs an action or submits the form on a web page then it is possible that web pages/web form may sometimes send back certain feedback. This feedback could be success message, error message, confirmation message, warning message, and so on. as soon as these messages are displayed, visual users can perceive them immediately. However, the same is not possible for the screen reader users as screen reader users may be accessing the web page elsewhere. In this context, authors can use alert role(role=”alert”) to notify such messages to the screen reader users without moving the focus.
Typically, Alert role(role=”alert”) should be used for the important, and time sensitive, information. alert role(role=”alert”) is also a live region as like aria-live. To know more about what live region is, head on to my aria-live blog post. Since role=”alert” and aria-live are live regions, authors might think that those can be used interchangeably. However, authors should not use them interchangeably as both are used for the different purpose. Let me tell you the uniqueness of role=”alert”. When role=”alert” is used by an author then user agents are going to fire system alert event if the operating system allows. You might be wondering what system alert event is going to do if it gets fired. When operating system’s system alert is fired then alerts are going to be notified to the users even though user is in the different application. Therefore, role=”alert” should be used whenever it is appropriate.
Author notes
- Authors should use role=”alert” for the alert messages that user need not to close
- Authors should not use role=”alert” for the alert messages that user needs to close. Instead, authors should use role=”alertdialog” for such alert messages
- Aria-live=”assertive” is the implicit value for the role=”alert” and hence, authors do not need to specify this explicitly
- Aria-atomic=”true” is the implicit value for the role=”alert” and hence, authors do not need to specify this explicitly
Code snippet
<div role=”alert”>
Your session will expire in 60 seconds.
</div>
Complementary info on role=”alert”
As soon as web page is loaded, if authors think that certain information is important for the screen reader users to know, authors can use role=”alert” on such information on page load itself. Apart from that, when role=”alert” is used by an authors then some screen readers will notify the alert with wording “alert”
References