Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

ARIA18: Using aria-alertdialog to Identify Errors

Applicability

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

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support for WAI-ARIA for general information on user agent support.

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:

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

Example 1: Alert dialog

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

Live Example

Resources

Resources are for information purposes only, no endorsement implied.

(none currently listed)

Tests

Procedure

  1. Trigger the error that causes the alertdialog to appear.

  2. Determine that the alertdialog contains at least one focusable control, and the focus moves to that control when the alertdialog opens.

  3. Determine that the tab order is constrained within the alertdialog while it is open, and when the dialog is dismissed, the focus moves back to the position it had before the dialog opene, if possible.

  4. Examine the element with role="alertdialog" applied.

  5. Determine that either the aria-label or aria-labelledby attribute has been correctly used to give the alertdialog an accessible name.

  6. Determine that the contents of the alertdialog identifies the input error.

  7. Determine whether contents of the alertdialog suggests how to fix the error.

Expected Results

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.

Techniques are Informative

Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.0 is the success criteria from the WCAG 2.0 standard—not the techniques. For important information about techniques, please see the Understanding Techniques for WCAG Success Criteria section of Understanding WCAG 2.0.