-
Notifications
You must be signed in to change notification settings - Fork 285
/
Copy pathARIA2.html
203 lines (186 loc) · 10.6 KB
/
ARIA2.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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Identifying a required field with the aria-required property</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Identifying a required field with the aria-required property</h1><section class="meta"><p class="id">ID: ARIA2</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 objective of this technique is to provide programmatic indication that a form field (which shown through presentation to be required) is mandatory for successful submission of a form.</p>
<p>The fact that the element is required is often visually presented (via a text or non-text symbol, or text indicating input is required or color / styling) but this is not programmatically determinable as part of the field's name.</p>
<p>The WAI-ARIA <code class="prop">aria-required</code> property indicates that user input is required before submission. The <code class="prop">aria-required</code> property can have values of <code class="attval">true</code> or <code class="attval">false</code>. For example, if a user must fill in an address field, then <code class="att">aria-required</code> is set to <code class="attval">true</code>.</p>
<div class="note">
<p>Note: Use of aria-required="true" might be beneficial even when an asterisk or other text symbol is programmatically associated with the field as it may reinforce its <code class="prop">required</code> property for some assistive technology users.</p>
<p>The fact that the element is required is often visually presented (such as a sign or symbol after the control). Using the <code class="prop">aria-required</code> property in addition to the visual presentation makes it much easier for user agents to pass on this important information to the user in a user agent-specific manner. Refer to <a href="https://www.w3.org/TR/wai-aria-primer/#ariahtml">Supporting ARIA in XHTML and HTML 4.01</a> for information on how to provide WAI-ARIA States and Properties with XHTML and HTML. WAI-ARIA States and Properties is compatible with other languages as well; refer to documentation in those languages. </p>
</div>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<h3></h3>
<p>The <code class="prop">required</code> property is indicated by an asterisk placed next to the label element:</p>
<pre xml:space="preserve">
<form action="#" method="post" id="login1" onsubmit="return errorCheck1()">
<p>Note: [*]denotes mandatory field</p>
<p>
<label for="usrname">Login name: </label>
<input type="text" name="usrname" id="usrname" aria-required="true"/>[*]
</p>
<p>
<label for="pwd">Password</label>
<input type="password" name="pwd" id="pwd" size="12" aria-required="true" />[*]
</p>
<p>
<input type="submit" value="Login" id="next_btn" name="next_btn"/>
</p>
</form> </pre>
</section>
<section class="example">
<h3></h3>
<p>The <code class="prop">required</code> property is indicated by the word "required" placed next to the <code class="el">label</code> element:</p>
<pre xml:space="preserve">
<form action="#" method="post" id="step1" onsubmit="return errorCheck2()">
<p>
<label for="fname">First name: </label>
<input type="text" id="fname" aria-required="true" />
[required]
</p>
<p>
<label for="mname">Middle name: </label>
<input type="text" id="mname" />
</p>
<p>
<label for="lname">Last name: </label>
<input type="text" id="lname" aria-required="true" />
[required]
</p>
<p>
<label for="email">Email address: </label>
<input type="text" id="email" aria-required="true" />
[required]
</p>
<p>
<label for="zip_post">Zip / Postal code: </label>
<input type="text" id="zip_post" size="6" aria-required="true" />
[required]
</p>
<p>
<input type="submit" value="Next Step" id="step_btn" name="step_btn" />
</p>
</form> </pre>
</section>
<section class="example">
<h3></h3>
<p>Required fields are indicated by a red border around the fields and a star icon rendered via CSS using content:before. This example also uses custom radio buttons with role=radio but the script to make the span actually work like radio buttons is not included in this example. The CSS properties are available below the form.
</p>
<pre xml:space="preserve">
<form action="#" method="post" id="alerts1">
<label for="acctnum" data-required="true">Account Number</label>
<input size="12" type="text" id="acctnum"
aria-required="true" name="acctnum" />
<p id="radio_label" data-required="true">Please send an alert when balance exceeds $3,000.</p>
<ul id="rg" role="radiogroup" aria-required="true" aria-labelledby="radio_label">
<li id="rb1" role="radio">Yes</li>
<li id="rb2" role="radio">No</li>
</ul>
</form>
</pre>
<p>Related CSS style definition for this example:</p>
<pre xml:space="preserve">
[aria-required=true] {
border: red thin solid;
}
[data-required=true]:after {
content: url('/iconStar.gif');
}
</pre>
</section>
<section class="example">
<h3>A required text input field in XHTML</h3>
<p>The following example shows an XHTML document using the <code class="prop">aria-required</code> property to indicate that a form field must be submitted. The mandatory nature of the field is also indicated in the label as a fallback for user agents that do not support WAI-ARIA. </p>
<pre xml:space="preserve">
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
For Accessible Adaptable Applications//EN"
"https://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>Required Input</title>
</head>
<body>
<h1>Required Input</h1>
<p>The following form input field must be completed by the user
before the form can be submitted.</p>
<form action="http://example.com/submit">
<p>
<label for="test">Test (required)</label>
<input name="ariaexample" id="example" aria-required="true" aria-label="Test"/>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
</body>
</html>
</pre>
</section>
<section class="example">
<h3>Adding <code class="prop">aria-required</code> property via script</h3>
<p>This example uses scripting to add the <code class="prop">aria-required</code> property to a form element. The required property is assigned using the setAttribute() API. </p>
<p>The array variable, <var>requiredIds</var>, is created with the ids of the elements which need to be marked as required. The setRequired() function is called from the onload event of the <code class="obj">window</code> object. </p>
<p>The setRequired() function loops through all of the ids provided, retrieves the element and assigns the <code class="prop">aria-required</code> property of true using the setAttribute() function. </p>
<p>When this page is accessed using Firefox 3.0 or later and a screen reader that supports WAI-ARIA, the screen reader will speak "required" when reading the label for the input fields. </p>
<pre xml:space="preserve"><head>
<script type="text/javascript">
//<![CDATA[
// array or ids on the required fields on this page
var requiredIds = new Array( "firstName", "lastName");
// function that is run after the page has loaded to set the aria-required property on each of the
//elements in requiredIds array of id values
function setRequired(){
if (requiredIds){
var field;
for (var i = 0; i< requiredIds.length; i++){
field = document.getElementById(requiredIds[i]);
field.setAttribute("aria-required", "true");
}
}
}
window.onload=setRequired;
//]]>
</script>
</head>
<body>
<p>Please enter the following data. Required fields have been programmatically identified
as required and marked with an asterisk (*) following the field label.</p>
<form action="submit.php">
<p>
<label for="firstName">First Name *: </label><input type="text" name="firstName"
id="firstName" value="" />
<label for="lastName">Last Name *: </label><input type="text" name="lastName"
id="lastName" value="" />
</p>
</form>
</body>
</pre>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<p>For each control which is shown via presentation to be required.</p>
<ol>
<li>Check whether the <code class="att">aria-required</code> attribute is present:</li>
<li>Check whether the value of the <code class="att">aria-required</code> attribute is the correct required state of the user interface component.</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>Checks #1 and #2 are true</li>
</ul>
</section>
</section><section id="resources"><h2>Resources</h2>
<ul>
<li>
<a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA Overview</a>
</li>
<li>
<a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a>
</li>
<li>
<a href="http://www.deque.com/blog/aria-requiredtrue-wcag-2-compliance-practice/">Aria-required=true: WCAG 2 Compliance versus Best Practice</a>
</li>
</ul>
</section></body></html>