This is an unpublished editor’s draft that might include content that is not finalized. View the published version

Skip to content

Technique ARIA18:Using aria-alertdialog to Identify Errors

About this Technique

This technique relates to:

This technique applies to technologies that support Accessible Rich Internet Applications (WAI-ARIA).

Techniques are examples of ways to meet Web Content Accessibility Guidelines (WCAG). They are not required to meet WCAG. Content can satisfy the normative requirements of WCAG even if it does not use any of the documented techniques. See About WCAG Techniques.

Description

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.
  • The alertdialog contains at least one focusable element, and the focus should move to that element when the alertdialog opens.
  • The tab order is constrained within the alertdialog whilst it is open.
  • When the alertdialog is dismissed, the focus moves back to the position it had before the alertdialog opened, if possible.

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.

<dialog aria-labelledby="alert-heading" id="date-alert" role="alertdialog">
  <h1 id="alert-heading">Error</h1>
  <p>Employee's Birth Date is after their hire date. Please verify the birth date and hire date.</p>
  <button command="close" commandfor="date-alert" type="button">Return to page and correct error</button>
</dialog>

Working example: Using aria-alertdialog to Identify Errors .

Related Resources

No endorsement implied.

Tests

Procedure

  1. Trigger the error that causes the alertdialog to appear.
  2. Determine that the alertdialog contains at least one focusable element, and the focus moves to that element when the alertdialog opens.
  3. If using a non-native dialog element: determine that the tab order is constrained within the 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.
  4. Examine the element with 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

  • Checks #2, #3, #5 and #6 are true. For Success Criterion 3.3.3, check #7 is also true.
Back to Top