Technologies that support Accessible Rich Internet Applications (WAI-ARIA).
The purpose of this technique is to alert people that an input error has occurred. Using role="alertdialog" creates a notification. This notification should be modal with the following characteristics:
aria-label or aria-labelledby attribute gives the alertdialog an accessible name.alertdialog contains at least one focusable element, and the focus should move to that element when the alertdialog opens.alertdialog whilst it is open.alertdialog is dismissed, the focus moves back to the position it had before the alertdialog opened, if possible.Note that the alertdialog should not be present in a way that it will be accessed by assistive technology until it is needed. One way to do this is not to include it in the static HTML and instead to insert it into the DOM via script when the error condition is triggered. The insertion would correspond to the following HTML sample.
This example shows how a notification using role="alertdialog" can be used to notify someone they have entered invalid information.
<div role="alertdialog" aria-labelledby="alertHeading">
<h1 id="alertHeading">Error</h1>
<p>Employee's Birth Date is after their hire date.
Please verify the birth date and hire date.</p>
<button>Save and Continue</button>
<button>Return to page and correct error</button>
</div>Working example: Alert dialog.
alertdialog to appear.alertdialog contains at least one focusable element, and the focus moves to that element when the alertdialog opens.alertdialog while it is open, and when the alertdialog is dismissed, the focus moves back to the position it had before the alertdialog opened, if possible.alertdialog applied.aria-label or aria-labelledby attribute has been correctly used to give the alertdialog an accessible name.alertdialog identifies the input error.alertdialog suggests how to fix the error.