The ARIA role is used to convey time sensitive and important information to the user without interrupting their current work process. The role="alert" must be provided to an element which holds the alert message. It is not required for author or developer to change or move user keyboard focus to the alert message when role alter is used. Screen reader picks the role alert and announces it for user even though the keyboard focus is not on the alert message. It benefits user as their keyboard focus navigation flow is not disturbed.
Example : <p role="alert">Low battery. Please plugin to continue</p>
Whenever content having role alert is dynamically added in the page, screen reader stops announcing the present content and announces the dynamically added content with out disturbing the current keyboard focus. For example, assume screen reader is announcing a paragraph content present in middle of the page. So ideally focus is also present at paragraph content. Assume an alert message appears suddenly at top of the page. In this case screen reader stops reading the paragraph and announces the alert message without changing the keyboard focus to alert message. After completion of alert message, on hit of down arrow, screen reader continues reading the current paragraph which is in middle of the page. Hence with help of role alert, the important time sensitive information is conveyed to user without change in navigation flow or keyboard focus.
By default, when role="alert" is provided for an element, it implies the particular element has aria-live="assertive" and aria-atomic="true". Hence when role alert is provided then it is not required to use aria-live and aria-atomic properties.
Below are some scenarios when aria role="alert" can be used.
Example : <p role="alert">Low battery. Please plugin to continue</p>
Whenever content having role alert is dynamically added in the page, screen reader stops announcing the present content and announces the dynamically added content with out disturbing the current keyboard focus. For example, assume screen reader is announcing a paragraph content present in middle of the page. So ideally focus is also present at paragraph content. Assume an alert message appears suddenly at top of the page. In this case screen reader stops reading the paragraph and announces the alert message without changing the keyboard focus to alert message. After completion of alert message, on hit of down arrow, screen reader continues reading the current paragraph which is in middle of the page. Hence with help of role alert, the important time sensitive information is conveyed to user without change in navigation flow or keyboard focus.
By default, when role="alert" is provided for an element, it implies the particular element has aria-live="assertive" and aria-atomic="true". Hence when role alert is provided then it is not required to use aria-live and aria-atomic properties.
Below are some scenarios when aria role="alert" can be used.
- A text field where validation happens on the go when user start typing some value in the field. Ex: In email text field, if user enters special character other than @, an error message is shown immediately before user completes entering email. Here if role alert is provided for error message, screen reader announces it for user even though keyboard focus is in text field.
- An online test where an alert is shown at top of the page when test time is about to complete. Ex: In online exam where user keyboard focus is at 45th question and an alert message is shown at top of the page stating "Only five minutes left". Here the error message is informed to user even though keyboard focus is at 45th question.
- A storm alert message in a weather reporting website. Ex: User is browsing a weather report website. Suddenly an alert message is displayed on top of the screen "New Jersey weather alert: Thunderstorm and rain from 11am to 3pm." In this case, role="alert" must be provided for the alert message.
Key Points
- The alert message should not disappear without user notice. Also, make sure that page doesn't contain too many alert messages as frequent interruptions makes it difficult for some users to continue working on the page.
- The role alert is intended to provide time sensitive and important information for user without effecting user keyboard focus. If the alert message requires a change in keyboard focus or requires a user input, then it is recommended to use role 'alertdialog' instead of role 'alert'. Ex: A time-out notification where a dialog is shown with 'yes' and 'no' buttons in it. Here role alertdialog must be used instead of role alert.
