-
Notifications
You must be signed in to change notification settings - Fork 285
/
Copy pathARIA19.html
98 lines (93 loc) · 5.7 KB
/
ARIA19.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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using ARIA role=alert or Live Regions to Identify Errors</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using ARIA role=alert or Live Regions to Identify Errors</h1><section class="meta"><p class="id">ID: ARIA19</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 notify Assistive Technologies (AT) when an input error occurs. The <code class="att">aria-live</code> attribute makes it possible for an AT (such as a screen reader) to be notified when error messages are injected into a Live Region container. The content within the <code class="att">aria-live</code> region is automatically read by the AT, without the AT having to focus on the place where the text is displayed.
</p>
<p>There are also a number of <a href="https://www.w3.org/WAI/PF/aria-practices/#chobet">special case live region roles</a> which can be used instead of applying live region properties directly.</p>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<h3>Injecting error messages into a container with role=alert already present in the DOM</h3>
<p>The following example uses role=alert which is equivalent to using aria-live=assertive.
</p>
<p>In the example there is an empty error message container element with aria-atomic=true and an aria-live property or alert role present in the DOM on page load. The error container must be present in the DOM on page load for the error message to be spoken by most screen readers. aria-atomic=true is necessary to make Voiceover on iOS read the error messages after more than one invalid submission.
</p>
<p>jQuery is used to test if the inputs are empty on submit and inject error messages into the live region containers if so. Each time a new submit is attempted the previous error messages are removed from the container and new error messages injected.
</p>
<pre xml:space="preserve"><script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function(e) {
$('#signup').submit(function() {
$('#errors').html('');
if ($('#first').val() === '') {
$('#errors').append('<p>Please enter your first name.</p>');
}
if ($('#last').val() === '') {
$('#errors').append('<p>Please enter your last name.</p>');
}
if ($('#email').val() === '') {
$('#errors').append('<p>Please enter your email address.</p>');
}
return false;
});
});
</script>
<form name="signup" id="signup" method="post" action="">
<p id="errors" role="alert" aria-atomic="true"></p>
<p>
<label for="first">First Name (required)</label><br>
<input type="text" name="first" id="first">
</p>
<p>
<label for="last">Last Name (required)</label><br>
<input type="text" name="last" id="last">
</p>
<p>
<label for="email">Email (required)</label><br>
<input type="text" name="email" id="email">
</p>
<p>
<input type="submit" name="button" id="button" value="Submit">
</p>
</form></pre>
<p class="working-example">Working example: <a href="../../working-examples/aria-alert-identify-errors/">Using role=alert to identify errors</a>.</p>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<ol>
<li>Determine that an empty error container role=alert or aria-live=assertive attribute is present in the DOM at page load.</li>
<li> Trigger the error that causes the content in the live region to appear or update.
</li>
<li> Determine that the error message was injected into the already present error container.
</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>#1 and #3 are 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</a>
</li>
<li>
<a href="https://www.paciellogroup.com/blog/2012/06/html5-accessibility-chops-aria-rolealert-browser-support/">HTML5 Accessibility Chops: ARIA role=alert browser support</a>
</li>
<li>
<a href="http://html.cita.illinois.edu/nav/form/aria/">Form Labels, ARIA Examples (Experimental)</a>
</li>
<li>
<a href="http://www.msfw.com/accessibility/">MSF&W Accessibility</a>
</li>
<li>
<a href="https://www.w3.org/TR/wai-aria/#aria-describedby">WAI-ARIA, Supported States and Properties, aria-describedby</a>
</li>
<li>
<a href="https://www.w3.org/TR/wai-aria/#alert">WAI-ARIA, The Roles model, alert</a>
</li>
<li>
<a href="https://www.w3.org/TR/html5/">HTML5, A vocabulary and associated APIs for HTML and XHTML</a>
</li>
</ul>
</section></body></html>