Using WAI-ARIA role="alertdialog" to Identify Errors

User Agent Notes

Supports this technique:

• Windows 7 + NVDA 2013.1.1 + Firefox 24
• Firefox Android
• Chrome Android
• VoiceOver for iOS 7 & 8

Does NOT support this technique:

Support Notes:

Applicability

Description

The purpose of this technique is to alert people that an input error has occured. Using role="alertdialog" creates a modal notification that displays the following characteristics:

• aria-label or aria-labelledby attribute gives the alertdialog an accessible name.
• aria-describedby provides a reference to the text of the alert.
• The alertdialog contains at least one focusable control, and focus should be taken to that control when the alertdialog opens.
• The tab order is constrained within the alertdialog whilst it is open.

Example

This example shows how role="alertdialog" can be used to notify someone they have entered invalid information.