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:
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.
This example shows how role="alertdialog" can be used to notify someone they have entered invalid information.