You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: techniques/general/G211.html
+33-61Lines changed: 33 additions & 61 deletions
Original file line number
Diff line number
Diff line change
@@ -33,7 +33,7 @@ <h2>Examples</h2>
33
33
<sectionclass="example">
34
34
<h3>Anchor text provides both the link's label and its accessible name</h3>
35
35
<pid="linksample">Using conventional HTML, the text between the <codeclass="language-html">a</code> element's tags provides both the link's visible text and the accessible name "Code of conduct":</p>
36
-
<codeclass="language-html"><p>Go to our <a href="url-to-page-about-code.html">Code of conduct</a></p></code>
36
+
<pre><codeclass="language-html"><p>Go to our <a href="url-to-page-about-code.html">Code of conduct</a></p></code></pre>
37
37
<section>
38
38
<h4>Non-working sample of anchor</h4>
39
39
<p>Go to our <ahref="#linksample">Code of conduct</a></p>
@@ -44,19 +44,18 @@ <h4>Non-working sample of anchor</h4>
44
44
<h3>Text in <codeclass="language-html">label</code> element provides name for input via <codeclass="language-html">for</code> attribute</h3>
45
45
<p>The text between the <codeclass="language-html">label</code> tags also serves as the checkbox input's accessible name "Notify me of delays" by using the <codeclass="language-html">for</code> attribute which references the <codeclass="language-html">id</code> of the <codeclass="language-html">input</code>.</p>
@@ -70,17 +69,15 @@ <h3>Simple Radio Button Group</h3>
70
69
<imgsrc="img/call-me-radio-button-group.png" alt="Call me when balance exceeds $10,000, Yes No">
71
70
<figcaption>Figure 1 "Call me when balance exceeds $10,000 radio group, with Yes and No choices</figcaption>
72
71
</figure>
73
-
<p>The label for each component should be restricted to "Yes" and "No". To meet <ahref="../../Understanding/info-and-relationships"> 1.3.1 Information and Relationships</a> and <ahref="../../Understanding/labels-or-instructions.html"> 3.3.2 Labels or Instructions</a>, the "Call me…" text can be coded to convey the relationship to ATs, in this example by using a <code>fieldset</code> and <code>legend</code>.</p>
72
+
<p>The label for each component should be restricted to "Yes" and "No". To meet <ahref="../../Understanding/info-and-relationships"> 1.3.1 Information and Relationships</a> and <ahref="../../Understanding/labels-or-instructions.html"> 3.3.2 Labels or Instructions</a>, the "Call me…" text can be coded to convey the relationship to ATs, in this example by using a <codeclass="language-html">fieldset</code> and <codeclass="language-html">legend</code>.</p>
74
73
<p>If the label is not restricted to the string adjacent to the radio button, multiple interpretations of what constitutes the label can result in less uniform functionality. If "Yes" alone is not the label for the first radio button, is it "Call me when balance exceeds $10,000"? Or is it a combination of text strings, in which case is the order "Call me when balance exceeds $10,000 Yes" or "Yes, Call me when balance exceeds $10,000"? Decisions to combine text strings can have negative effects on screen reader users since the order of concatenation can affect meaning. In this example, "No, call me when balance exceeds $10,000" could be very confusing to a screen reader user.</p>
75
-
<code>
76
-
<fieldset><br>
77
-
<legend>Call me when balance exceeds $10,000?</legend><br /><br>
<pclass="working-example"><ahref="../../working-examples/label-in-name-general/example1.html">Working example of Simple Radio Button Group</a></p>
85
82
</section>
86
83
<sectionclass="example">
@@ -109,20 +106,17 @@ <h3>Stacked Labels</h3>
109
106
<p>Figure 4 shows a variation on stacked labels, where hints and guidance are included between the label and the input. This design does not provide an adjacent label. However, the "New Password" label is still considered to be in close enough proximity, especially given its size and boldness relative to the smaller and lower-contrast guidance text. The associations are reinforced programmatically, where the hint text is given a role of <codeclass="language-html">aria-describedby</code> and the label is properly associated with the input.</p>
110
107
<figureid="figure-new-password">
111
108
<imgsrc="img/new-password.png" alt="New Password. Passwords must be 10 or more characters, and contain at least one capital, numeric and non-alphanumeric.'">
112
-
<figcaption>Figure 4 New Password label positioned above input with a smaller-point text string about the password requirements positioned between the large label and the input.</figcaption>
109
+
<figcaption>Figure 4 "New password" label positioned above input with a smaller-point text string about the password requirements positioned between the large label and the input.</figcaption>
113
110
</figure>
114
111
<p>The hint text in such implementations should be kept to a single line where possible, since accessibility issues can arise where a more lengthy hint separates the label from its input. Figure 4 illustrates that the concept of "adjacent text" is a guide for label interpretation, but cannot always serve as a hard rule.</p>
115
-
<code>
116
-
<form><br>
117
-
<label class="label" for="example-2"><br>
118
-
Password<br>
119
-
</label><br>
120
-
<span id="example-2-hint" class="hint"><br>
121
-
Passwords must be 10 or more characters, and contain at least one capital, numeric and non-alphanumeric.<br>
<pclass="working-example"><ahref="../../working-examples/label-in-name-general/example2.html">Working example of stacked labels</a></p>
127
121
128
122
</section>
@@ -132,11 +126,11 @@ <h3>Range of inputs with few labels</h3>
132
126
<p>A less common disparity between labels and inputs can occur when a group of radio buttons is set up to elicit a choice across a range. The labels may only be located at each end of the range or may be interspersed at various points in the range.</p>
133
127
<figureid="figure-rate-response">
134
128
<imgsrc="img/rate-response.png" alt="Rate your response, Hated it, Loved it">
135
-
<figcaption>Figure 6 Line of 5 radio buttons with Hated it and Loved it labels at each end</figcaption>
129
+
<figcaption>Figure 5 Line of 5 radio buttons with Hated it and Loved it labels at each end</figcaption>
136
130
</figure>
137
131
138
132
<p>The two labels, "Hated it" and "Loved it", are adjacent to the first and last radio buttons, and should be their accessible names. Speech-input users can speak either of these labels to select a radio button, and then use arrow navigation (e.g., "Press right arrow") to modify the selection. "Rate your response" is the text describing the whole widget and can be associated as the group label (here using <codeclass="language-html">legend</code>). The three middle radio buttons do not have visible labels. In the code example they are given title attributes of "Disliked", "So-so" and "Liked" in order to meet 3.3.2 Labels or Instructions.</p>
<pclass="working-example"><ahref="../../working-examples/label-in-name-general/example4.html">Working example of range of inputs</a></p>
151
144
</section>
152
145
153
146
<sectionclass="example">
154
147
<h3>Text in parentheses and punctuation</h3>
155
148
<p>Technique G211 is not intended to complicate existing conventions for the construction of accessible form inputs. As described in the <em>Punctuation and capitalization</em> and <em>Text in parentheses</em> subsections of the Understanding document, information does not always need to be included in the accessible name in an attempt to meet the Label in Name requirement, especially where the text would not normally be spoken when using speech recognition to navigate to controls. Where there are established ways of ensuring information and relationships conveyed visually are present programmatically, it is acceptable to leave text in parentheses and punctuation out of the accessible name.</p>
156
149
<p>The following snippet demonstrates possible techniques mentioned in the Understanding document. Since the required field is programmatically indicated, and the input restrictions on the date are surfaced through <codeclass="language-html">aria-describedby</code>, the asterisk and parenthetical information has been left out of the accessible name.</p>
150
+
<figureid="figure-rate-response">
151
+
<imgsrc="img/inputs-simplified-accname.png" alt="Two text inputs: one with a label of 'Name' with an asterisk, one with a label of 'Birth date' and, in parentheses, YYYY-MM-DD">
152
+
<figcaption>Figure 6 The "Name" and "Birth date" labels with additional information (and asterisk and an input formatting instruction, respectively)</figcaption>
<pclass="working-example"><ahref="../../working-examples/label-in-name-general/example4.html">Working example of range of inputs</a></p>
159
+
<pclass="working-example"><ahref="../../working-examples/label-in-name-general/example3.html">Working example of inputs with simplified accessible names</a></p>
0 commit comments