wcag/techniques/aria/ARIA18.html at b54a9ac4079b45f4509c04a897ccdfc574351c5f · w3c/wcag · GitHub

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
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Using aria-alertdialog to Identify Errors</title>
</head>
<body>
	<h1>Using <code>aria-alertdialog</code> 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 occurred. Using <code>role="alertdialog"</code> creates a notification. This notification should be modal with the following characteristics:</p>
		<ul>
			<li><code>aria-label</code> or <code>aria-labelledby</code> attribute gives the alertdialog an accessible name.</li>
			<li>The <code>alertdialog</code> contains at least one focusable element, and the focus should move to that element when the <code>alertdialog</code> opens.</li>
			<li>The tab order is constrained within the <code>alertdialog</code> whilst it is open.</li>
			<li>When the <code>alertdialog</code> is dismissed, the focus moves back to the position it had before the <code>alertdialog</code> opened, if possible.</li>
		</ul>
	</section>
	<section id="examples">
		<h2>Examples</h2>
		<section class="example">
			<h3>Alert dialog</h3>
			<p>This example shows how a notification using <code>role="alertdialog"</code> can be used to notify someone they have entered invalid information.</p>
<pre><code class="language-html">&lt;div aria-modal="true" role="alertdialog" aria-labelledby="alert-heading"&gt;
  &lt;h1 id="alert-heading"&gt;Error&lt;/h1&gt;
  &lt;p&gt;Employee&#39;s Birth Date is after their hire date. Please verify the birth date and hire date.&lt;/p&gt;
  &lt;button type="button"&gt;Return to page and correct error&lt;/button&gt;
&lt;/div&gt;</code></pre>
			<p class="working-example">Working example: <a href="../../working-examples/aria-alertdialog-identify-errors/">Using <code>aria-alertdialog</code> to Identify Errors
</a>.</p>
		</section>
	</section>
	<section id="tests">
		<h2>Tests</h2>
		<section class="procedure">
			<h3>Procedure</h3>
			<ol>
				<li>Trigger the error that causes the <code>alertdialog</code> to appear.</li>
				<li>Determine that the <code>alertdialog</code> contains at least one focusable element, and the focus moves to that element when the <code>alertdialog</code> opens.</li>
				<li>Determine that the tab order is constrained within the <code>alertdialog</code> while it is open, and when the <code>alertdialog</code> is dismissed, the focus moves back to the position it had before the <code>alertdialog</code> opened, if possible.</li>
				<li>Examine the element with <code>alertdialog</code> applied.</li>
				<li>Determine that either the <code>aria-label</code> or <code>aria-labelledby</code> attribute has been correctly used to give the alertdialog an accessible name.</li>
				<li>Determine that the contents of the <code>alertdialog</code> identifies the input error.</li>
				<li>Determine whether contents of the <code>alertdialog</code> 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 Success Criterion 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/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a></li>
		</ul>
	</section>
</body>
</html>