Technique ARIA18:Using aria-alertdialog to Identify Errors

Applicability

Technologies that support Accessible Rich Internet Applications (WAI-ARIA).

This technique relates to:

• 3.3.1: Error Identification (Sufficient)
• 3.3.3: Error Suggestion (Sufficient)
• 4.1.3: Status Messages (Advisory)

Description

The purpose of this technique is to alert people that an input error has occured. 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.
• aria-describedby provides a reference to the text of the alert.
• The alertdialog contains at least one focusable control, and the focus should move to that control when the alertdialog opens.
• The tab order is constrained within the alertdialog whilst it is open.
• When the dialog is dismissed, the focus moves back to the position it had before the dialog opened, if possible.

Note that the alertdialog should not be present in a way that it will be accessed by AT 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.

Examples

<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>

Other sources

No endorsement implied.

• WAI-ARIA Authoring Practices Guide

Tests