This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.

Using aria-alertdialog to Identify Errors

From WCAG WG
Revision as of 21:05, 9 May 2013 by Cooper (Talk | contribs)

Jump to: navigation, search


Status

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.

Applicability

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

Description

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.

Examples

Example 1

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>

Resources

Tests

Procedure

  1. Trigger the error that causes the alertdialog to appear.
  2. Determine that the alertdialog contains at least one focusable control, and that focus is moved to that control when the alertdialog opens.
  3. Determine that the tab order is constrained within the alertdialog whilst it is open.
  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

Checks 2, 3, 5 and 6 are true. For SC 3.3.3, Check 7 is true.