-
Notifications
You must be signed in to change notification settings - Fork 285
/
Copy pathARIA21.html
138 lines (130 loc) · 8.74 KB
/
ARIA21.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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using Aria-Invalid to Indicate An Error Field</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using Aria-Invalid to Indicate An Error Field</h1><section class="meta"><p class="id">ID: ARIA21</p><p class="technology">Technology: aria</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2>
<p>HTML with <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications</a>.</p>
</section><section id="description"><h2>Description</h2>
<p>This technique demonstrates how <code class="att">aria-invalid</code> may be employed to specifically identify fields that have failed validation. Its use is most suitable when:</p>
<ul>
<li>The error description does not programmatically identify the failed fields</li>
<li>The failed fields are identified in a manner that is not available to some users - for example by using an error-icon rendered visually by some technique that does not rely on color such as a visual cue like a border.</li>
</ul>
<div class="note"><p>One of the above two situations may be true for a field which has programmatically associated label and / or instructions that conveys data format, a data range, or the <code class="prop">required</code> property.</p></div>
<p>While it is always preferable to programmatically associate specific error description with the failed field, the page's design or the framework employed may sometimes constrain the author's ability to do so. In these cases, authors may programmatically set <code class="att">aria-invalid</code> to "true" on the fields that have failed validation. This is interpretable mainly by assistive technologies (like screen readers / screen magnifiers) employed by users who are vision impaired. When a field has <code class="att">aria-invalid</code> set to “true”, VoiceOver in Safari announces “invalid data” when the field gets focus; JAWS and NVDA notify the error as an “invalid entry”.</p>
<p>This ARIA attribute has to be set / turned on programmatically. It should not be set to “true” before input validation is performed or the form is submitted. Setting <code class="att">aria-invalid</code> to “false” is the same as not placing the attribute for the form control at all. Quite understandably, nothing is conveyed by assistive technology to users in this case.</p>
<p>When visible text is used to programmatically identify a failed field and / or convey how the error can be corrected, setting <code class="att">aria-invalid</code> to "true" is not required from a strict compliance standpoint but may still provide helpful information for users.</p>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<h3>Using aria-invalid on required fields</h3>
<p>The <code class="att">aria-invalid</code> attribute is used on required fields that have no input. A message above the form conveys that form submission has failed due to this.</p>
<p>A portion of the jQuery code and the HTML form markup follow:</p>
<pre xml:space="preserve">
<code>
<script>
...
...
if ($('#first').val() === '') {
$('#first').attr("aria-invalid", "true");
$("label[for='first']").addClass('failed');
}
if ($('#last').val() === '') {
$('#last').attr("aria-invalid", "true");
$("label[for='last']").addClass('failed');
}
if ($('#email').val() === '') {
$('#email').attr("aria-invalid", "true");
$("label[for='email']").addClass('failed');
}
...
...
</script>
<style type="text/css">
label.failed {
border: red thin solid;
}
</style>
<form name="signup" id="signup" method="post" action="#">
<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>
</code> </pre>
<p class="working-example"><a href="../../working-examples/aria-invalid-required-fields/">Working example: Using aria-invalid on required fields</a>.</p>
</section>
<section class="example">
<h3>Identifying errors in data format</h3>
<p><code class="att">Aria-invalid</code> and <code class="att">aria-describedby</code> are used together to indicate an error when the personal identification number (PIN), email address, or start date are not in the expected format. The error message is associated with the field using <code class="att">aria-describedby</code>, and <code class="att">aria-invalid</code> makes it easier to programmatically find fields with errors.</p>
<p>Below is the rendered HTML code for the email address field in Example 1: When an invalid email address is entered by the user such as "samexample.com" (instead of [email protected]), the HTML code is:</p>
<pre xml:space="preserve">
<div class="control">
<p><label for="email">Email address: [*]</label>
<input type="text" name="email" id="email" class="error" aria-invalid="true" aria-describedBy="err_1" /></p>
<span class="errtext" id="err_1">Error: Incorrect data</span></div>
</pre>
<p>And when no data is entered in the email field, the HTML code is:</p>
<pre xml:space="preserve">
<div class="control">
<p><label for="email">Email address: [*]</label>
<input type="text" name="email" id="email" class="error" aria-invalid="true" aria-describedBy="err_2" /></p>
<span class="errtext" id="err_2">
Error: Input data missing</span>
</div> </pre>
<p>jQuery code: jQuery is used to add aria-invalid or aria-describedby attributes as well as the class attribute and append the error text. This is the code that inserts aria-invalid and class="error" but does not associate the error text "incorrect data" with the control programmatically:</p>
<pre xml:space="preserve">
$(errFld).attr("aria-invalid", "true").attr("class", "error");
// Suffix error text:
$(errFld).parent().append('<span class="errtext">Error: Incorrect data</span>');
</pre>
<p>CSS Code:</p>
<pre xml:space="preserve">
input.error {
border: red thin solid;}
span.errtext {
margin-bottom: 1em; padding: .25em 1.4em .25em .25em;
border: red thin solid; background-color: #EEEEFF;
background-image:url('images/iconError.gif');
background-repeat:no-repeat; background-position:right;
}
</pre>
<p class="working-example"><a href="../../working-examples/aria-invalid-data-format/">Working example: Identifying errors in data format</a>.</p>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<p>For each form control that relies on <code class="att">aria-invalid</code> to convey a validation failure:</p>
<ol>
<li>Check that <code class="att">aria-invalid</code> is not set to true when a validation failure does not exist.</li>
<li>Check that <code class="att">aria-invalid</code> is set to true when a validation failure does exist.</li>
<li>Check that the programmatically associated labels / programmatically associated instructional text for the field provide enough information to understand the error.</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>Checks #1-3 are true.</li>
</ul>
</section>
</section><section id="related"><h2>Related Techniques</h2><ul>
<li><a href="../general/G83">G83</a></li>
<li><a href="../general/G85">G85</a></li>
<li><a href="../general/G139">G139</a></li>
<li><a href="../client-side-script/SCR32">SCR32</a></li>
<li><a href="../aria/ARIA18">ARIA18</a></li>
<li><a href="../aria/ARIA19">ARIA19</a></li>
</ul></section><section id="resources"><h2>Resources</h2>
<ul>
<li>
<a href="https://www.w3.org/TR/wai-aria-1.1/#states_and_properties">Supported States and Properties: WAI-ARIA 1.1</a>
</li>
<li>
<a href="http://www.deque.com/blog/aria-invalid-error-indication/">Using Aria-invalid for Error Indication</a>
</li>
</ul>
</section></body></html>