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
+17-24Lines changed: 17 additions & 24 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">
@@ -112,17 +109,15 @@ <h3>Stacked Labels</h3>
112
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>
112
+
<pre><class="language-html"><form><br>
117
113
<label class="label" for="example-2"><br>
118
114
Password<br>
119
115
</label><br>
120
116
<span id="example-2-hint" class="hint"><br>
121
117
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
122
128
123
</section>
@@ -136,7 +131,7 @@ <h3>Range of inputs with few labels</h3>
136
131
</figure>
137
132
138
133
<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
145
</section>
152
146
@@ -158,8 +152,7 @@ <h3>Text in parentheses and punctuation</h3>
158
152
<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">
159
153
<figcaption>Figure 6 The "Name" and "Birth date" labels with additional information (and asterisk and an input formatting instruction, respectively)</figcaption>
0 commit comments