Using aria-alertdialog to Identify Errors
- 4th Nov, Ready for TF review.
- 9th May, 2013. Rsponded to survey feedback https://www.w3.org/2002/09/wbs/35422/20130502tfaria/results#xalertdia
- 9 May 2013 Ready to send to WG review once a live example is ready.
This technique should be listed in all situations (A, B, C) in 3.3.1 and 3.3.3 Understanding documents.
User Agent notes
- Jaws 13 and higher supports this technique.
This technique applies to HTML with WAI-ARIA.
This technique relates to Success Criterion (SC) 3.3.1. (Error identification):
This technique relates to Success Criterion (SC) 3.3.3. (Error Suggestion):
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.
<div role="alertdialog" aria-labelledby="alertHeading" aria-describedby="alertText"> <h1 id="alertHeading">Error</h1> <div id="alertText">Employee's Birth Date is after their hire date. Please verify the birth date and hire date.</div> <button>Save and Continue</button> <button>Return to page and correct error</button> </div>
- Trigger the error that causes the alertdialog to appear.
- Determine that the alertdialog contains at least one focusable control, and that focus is moved to that control when the alertdialog opens.
- Determine that the tab order is constrained within the alertdialog whilst it is open.
- Examine the element with role="alertdialog" applied.
- Determine that either the aria-label or aria-labelledby attribute has been correctly used to give the alertdialog an accessible name.
- Determine that the contents of the alertdialog identifies the input error.
- Determine whether contents of the alertdialog suggests how to fix the error.
Checks 2, 3, 5 and 6 are true. For SC 3.3.3, Check 7 is true.