-
Notifications
You must be signed in to change notification settings - Fork 285
/
Copy pathARIA9.html
179 lines (158 loc) · 13.2 KB
/
ARIA9.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
<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using aria-labelledby to concatenate a label from several text nodes</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using aria-labelledby to concatenate a label from several text nodes</h1><section class="meta"><p class="id">ID: ARIA9</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 <code class="prop">aria-labelledby</code> property can be used to label all visual objects. Applied to inputs, the <code class="prop">aria-labelledby</code> property can be used to label native inputs as well as non-native elements, such as custom text inputs constructed with div contenteditable="true".</p>
<p>One particular use of <code class="prop">aria-labelledby</code> is for text inputs in situations where a meaningful label should consist of more than one label string.</p>
<p>Authors assign unique <code class="att">id</code>s to the label strings to be concatenated as the label for the <code class="el">input</code> element. The value of the <code class="att">aria-labelledby</code> attribute is then a space-separated list of all <code class="att">id</code>s in the order in which the label strings referenced should be read by screen readers. Supporting user agents will concatenate the label strings referenced and read them as one continuous label of the input.</p>
<p>The concatenation of label strings can be useful for different reasons. In example 1, an input is nested within the context of a full sentence. The desired screen reader output is "Extend time-out to [ 20 ] minutes - edit with autocomplete, selected 20". Since the <code class="att">id</code> of the text input is included in the string of <code class="att">id</code>s referenced by aria-labelledby, the value of the input is included in the concatenated label at the right position.</p>
<p>Another application of <code class="att">aria-labelledby</code> is when there is no space to provide a visible label next to the input, or when using native labels would create unnecessary redundancy. Here, the use <code class="att">aria-labelledby</code> makes it possible to associate visible elements on the page as label for such inputs. This is demonstrated in example 2 where table column and row headings are concatenated into labels for the text input elements inside the table.</p>
<div class="note">
<p>The <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">ARIA accessible name and description calculation</a> specifies that the string specified in <code class="att">aria-labelledby</code> should replace rather than add to the content of the element that carries the property. So adding the <code class="att">aria-labelledby</code> property to a native label should replace the text content inside that label unless the label itself is referenced as part of the sequence of <code class="att">id</code>s in <code class="att">aria-labelledby</code>.</p>
</div>
</section><section id="examples"><h2>Examples</h2>
<section class="example">
<h3> A time-out input field with concatenated label</h3>
<p>A text input allows users to extend the default time before a time-out occurs.</p>
<p>The string "Extend time-out to" is contained in a native <code class="el">label</code> element and is associated with the input with the input by id="timeout-duration" . This label is associated with this input using the for/id association only on user agents that don't support ARIA. On user agents that support ARIA, the for/id association is ignored and the label for the input is provided only by <code class="att">aria-labelledby</code>, per the <a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">accessible name and description calculation</a> in the HTML to Platform Accessibility APIs Implementation Guide.</p>
<p>The <code class="att">aria-labelledby</code> attribute on the text input references three elements: (1) the <code class="el">span</code> containing the native label, (2) the text input containing the default text '20' (recall that this input is not labelled with the for/id associated label text), and (3) the string 'minutes' contained in a <code class="el">span</code>. These elements should be concatenated to provide the full label for the text input</p>
<div class="note">
<p>The use of tabindex="-1" on the <code class="el">span</code> element is not meant to support focusing by scripts - here, it merely serves to ensure that some browsers (IE9, IE10) will include the <code class="el">span</code> element in the accessibility tree, thus making it available for reference by <code class="att">aria-labelledby</code>. For more details see <a href="https://msdn.microsoft.com/en-us/library/ie/gg701963%28v=vs.85%29.aspx#Accessible_HTML_Elements">Accessible HTML Elements</a>
</p>
</div>
<pre xml:space="preserve"><form>
<p><span id="timeout-label" tabindex="-1"><label for="timeout-duration">Extend time-out to</label></span>
<input type="text" size="3" id="timeout-duration" value="20"
aria-labelledby="timeout-label timeout-duration timeout-unit">
<span id="timeout-unit" tabindex="-1"> minutes</span></p>
</form></pre>
<p class="working-example">Working example, <a href="../../working-examples/aria-labelledby-time-out-input-concatenated-label/">Time-out input field with concatenated label</a>, adapted from Easy ARIA tip #2: aria-labelledby and aria-describedby, an example put together by Marco Zehe.</p>
</section>
<section class="example">
<h3>A simple data table with text inputs</h3>
<p>A simple data table containing text inputs. The input labels are concatenated through <code class="att">aria-labelledby</code> referencing the respective column and row headers.</p>
<pre xml:space="preserve"><table>
<tr>
<td></td>
<th id="tpayer">Taxpayer</th>
<th id="sp">Spouse</th>
</tr>
<tr>
<th id="gross">W2 Gross</th>
<td><input type="text" size="20" aria-labelledby="tpayer gross" /></td>
<td><input type="text" size="20" aria-labelledby="sp gross" /></td>
</tr>
<tr>
<th id="div">Dividends</th>
<td><input type="text" size="20" aria-labelledby="tpayer div" /></td>
<td><input type="text" size="20" aria-labelledby="sp div" /></td>
</tr>
</table></pre>
<p class="working-example">Working example, <a href="../../working-examples/aria-labelledby-table-text-inputs/">Using aria-labelledby for simple table with text inputs</a>, based on an example by Jim Thatcher.</p>
</section>
<section class="example">
<h3>A conference workshop booking table</h3>
<p>A conference workshop booking table with two parallel tracks allows users to select the workshop they want to attend. When tabbing through the checkbox inputs in the table, the track (1 or 2), the title, and the speaker of the workshop followed by the adjacent checkbox label "Attend" are provided as concatenated label for the checkboxes via <code class="att">aria-labelledby</code>.</p>
<p>Some browser / screen reader combinations (e.g. Mozilla Firefox and NVDA) will in addition speak the relevant table cell headers.</p>
<pre xml:space="preserve"><h1>Dinosaur Conference workshops timetable Thursday, 14. & Friday, 15. March 2013</h1>
<table>
<caption>Dinosaur Conference workshop booking table</caption>
<tbody><tr>
<td rowspan="2"></td>
<th colspan="2" scope="colgroup">Thursday</th>
<th colspan="2" scope="colgroup">Friday</th>
</tr>
<tr>
<th scope="col" id="am1">9 to 12 AM</th>
<th scope="col" id="pm1">2 to 5 PM</th>
<th scope="col" id="am2">9 to 12 AM</th>
<th scope="col" id="pm2">2 to 5 PM</th>
</tr>
<tr>
<th id="track1" scope="row">track 1</th>
<td>
<h2 id="title-TM1">The Paleozoic era </h2>
<p>2 places left</p>
<p><input type="checkbox" id="TM1" aria-labelledby="title-TM1 track1 am1 TM1-att">
<label id="TM1-att" for="TM1">Attend</label></p>
</td>
<td>
<h2 id="title-TA1">The Mesozoic era overview</h2>
<p>2 places left</p>
<p><input type="checkbox" id="TA1" aria-labelledby="title-TA1 track1 am2 TA1-att">
<label id="TA1-att" for="TA1">Attend</label></p>
</td>
<td>
<h2 id="title-FM1">The Triassic period, rise of the dinosaurs</h2>
<p>1 place left</p>
<p><input type="checkbox" id="FM1" aria-labelledby="title-FM1 track1 pm1 FM1-att">
<label id="FM1-att" for="FM1">Attend</label></p>
</td>
<td>
<h2 id="title-FA1">The Jurassic period</h2>
<p>11 places left</p>
<p><input type="checkbox" id="FA1" aria-labelledby="title-FA1 track1 pm2 FA1-att">
<label id="FA1-att" for="FA1">Attend</label></p>
</td>
</tr>
<tr>
<th id="track2" scope="row">track 2</th>
<td>
<h2 id="title-TM2">The Cretaceous period</h2>
<p>18 places left</p>
<p><input type="checkbox" id="TM2" aria-labelledby="title-TM2 track2 am1 TM2-att">
<label id="TM2-att" for="TM2">Attend</label></p>
</td>
<td>
<h2 id="title-TA2">The end of the dinosaurs</h2>
<p>2 places left</p>
<p><input type="checkbox" id="TA2" aria-labelledby="title-TA2 track2 am2 TA2-att">
<label id="TA2-att" for="TA2">Attend</label></p>
</td>
<td>
<h2 id="title-FM2">First discoveries of dinosaurs</h2>
<p>2 places left</p>
<p><input type="checkbox" id="FM2" aria-labelledby="title-FM2 track2 pm1 FM2-att">
<label id="FM2-att" for="FM2">Attend</label></p>
</td>
<td>
<h2 id="title-FA2">Emerging scholarship</h2>
<p>19 places left</p>
<p><input type="checkbox" id="FA2" aria-labelledby="title-FA2 track2 pm2 FA2-att">
<label id="FA2-att" for="FA2">Attend</label></p>
</td>
</tr>
</tbody>
</table></pre>
<p class="working-example">Working example: <a href="../../working-examples/aria-labelledby-workshop-booking-timetable/">Conference workshop booking timetable</a>.</p>
</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<p>For inputs that use <code class="att">aria-labelledby</code>:</p>
<ol>
<li>Check that <code class="att">id</code>s referenced in <code class="att">aria-labelledby</code> are unique and match the <code class="att">id</code>s of the text nodes that together provide the label</li>
<li>Check that the concatenated content of elements referenced by <code class="att">aria-labelledby</code> is descriptive for the purpose or function of the element labeled</li>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>
<p>#1 and #2 are true.</p>
<p>If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.</p>
</li>
</ul>
</section>
</section><section id="related"><h2>Related Techniques</h2><ul>
<li><a href="../aria/ARIA6">ARIA6</a></li>
<li><a href="../aria/ARIA16">ARIA16</a></li>
</ul></section><section id="resources"><h2>Resources</h2>
<ul>
<li>
<a href="https://www.w3.org/TR/html-aapi/#accessible-name-and-description-calculation">HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation</a>
</li>
<li>
<a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.1</a>
</li>
<li>
<a href="https://www.w3.org/TR/aria-in-html/">Using WAI-ARIA in HTML</a>: Section 2.7 aria-labelledby and aria-describedby</li>
</ul>
</section></body></html>