-
Notifications
You must be signed in to change notification settings - Fork 285
/
Copy pathARIA18.html
68 lines (64 loc) · 4.29 KB
/
ARIA18.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-alertdialog to Identify Errors</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-alertdialog to Identify Errors</h1><section class="meta"><p class="id">ID: ARIA18</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
<p>Technologies that support <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>. </p>
</section><section id="description"><h2>Description</h2>
<p>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:
</p>
<ul>
<li>
<code class="att">aria-label</code> or <code class="att">aria-labelledby</code> attribute gives the alertdialog an accessible name.
</li>
<li>
<code class="att">aria-describedby</code> provides a reference to the text of the alert.
</li>
<li>The alertdialog contains at least one focusable control, and the focus should move to that control when the alertdialog opens.
</li>
<li>The tab order is constrained within the alertdialog whilst it is open.
</li>
<li>When the dialog is dismissed, the focus moves back to the position it had before the dialog opened, if possible.
</li>
</ul>
<p>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.
</p>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<h3>Alert dialog</h3>
<p>This example shows how a notification using role="alertdialog" can be used to notify someone they have entered invalid information.</p>
<pre xml:space="preserve"><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></pre>
<p class="working-example">Working example: <a href="../../working-examples/aria-alertdialog-identify-errors/">Alert dialog</a>.</p>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<ol>
<li>Trigger the error that causes the alertdialog to appear.
</li>
<li>Determine that the alertdialog contains at least one focusable control, and the focus moves to that control when the alertdialog opens.
</li>
<li>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.
</li>
<li>Examine the element with role="alertdialog" applied.
</li>
<li>Determine that either the <code class="att">aria-label</code> or <code class="att">aria-labelledby</code> attribute has been correctly used to give the alertdialog an accessible name.
</li>
<li>Determine that the contents of the alertdialog identifies the input error.
</li>
<li>Determine whether contents of the alertdialog suggests how to fix the error.
</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>Checks 2, 3, 5 and 6 are true. For SC 3.3.3, Check 7 is also true.</li>
</ul>
</section>
</section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2>
<ul>
<li>
<a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a>
</li>
</ul>
</section></body></html>