Skip to content

Update G211 prose and wrong working example #4555

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Sep 16, 2025
Merged

Update G211 prose and wrong working example #4555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b283fc2
Update G211 prose and wrong working example
patrickhlauke Aug 17, 2025
f62eaaa
Fix code sections
patrickhlauke Aug 17, 2025
d0b1b09
Update working-examples/label-in-name-general/example3.html
patrickhlauke Aug 21, 2025
4095abc
Apply suggestion from @patrickhlauke
patrickhlauke Aug 21, 2025
42d85dd
Remove unnecessary `<br>` from code samples
patrickhlauke Aug 21, 2025
321da70
Move parentheses outside of mask
patrickhlauke Aug 21, 2025
8feea09
Merge branch 'main' into patrickhlauke-issue4554
patrickhlauke Aug 21, 2025
109185c
Add `autocomplete` attributes
patrickhlauke Aug 23, 2025
03d0b93
Merge branch 'main' into patrickhlauke-issue4554
patrickhlauke Aug 29, 2025
166754e
Merge branch 'main' into patrickhlauke-issue4554
mbgower Sep 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 33 additions & 61 deletions techniques/general/G211.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h2>Examples</h2>
<section class="example">
<h3>Anchor text provides both the link's label and its accessible name</h3>
<p id="linksample">Using conventional HTML, the text between the <code class="language-html">a</code> element's tags provides both the link's visible text and the accessible name "Code of conduct":</p>
<code class="language-html">&lt;p&gt;Go to our &lt;a href="url-to-page-about-code.html"&gt;Code of conduct&lt;/a&gt;&lt;/p&gt;</code>
<pre><code class="language-html">&lt;p&gt;Go to our &lt;a href="url-to-page-about-code.html"&gt;Code of conduct&lt;/a&gt;&lt;/p&gt;</code></pre>
<section>
<h4>Non-working sample of anchor</h4>
<p>Go to our <a href="#linksample">Code of conduct</a></p>
Expand All @@ -44,19 +44,18 @@ <h4>Non-working sample of anchor</h4>
<h3>Text in <code class="language-html">label</code> element provides name for input via <code class="language-html">for</code> attribute</h3>
<p>The text between the <code class="language-html">label</code> tags also serves as the checkbox input's accessible name "Notify me of delays" by using the <code class="language-html">for</code> attribute which references the <code class="language-html">id</code> of the <code class="language-html">input</code>.</p>
<pre><code class="language-html">&lt;input type="checkbox" id="notification" name="notify" value="delays"&gt;
&lt;label for="notification"&gt;Notify me of delays&lt;/label&gt;
</code></pre>
&lt;label for="notification"&gt;Notify me of delays&lt;/label&gt;</code></pre>
<section>
<h4>Working sample of input</h4>
<input type="checkbox" id="notification" name="notify" value="delays">
<label for="notification">Notify me of delays</label>
<label for="notification">Notify me of delays</label>
</section>
</section>
<section class="example">
<h3>The button text provides the accessible name</h3>

<p>The text inside a <code class="language-html">button</code> element becomes both its visible label and its accessible name:</p>
<code class="language-html">&lt;button&gt;Send&lt;/button&gt;</code>
<pre><code class="language-html">&lt;button&gt;Send&lt;/button&gt;</code></pre>
<section>
<h4>Non-working sample of button</h4>
<button type="button">Send</button>
Expand All @@ -70,17 +69,15 @@ <h3>Simple Radio Button Group</h3>
<img src="img/call-me-radio-button-group.png" alt="Call me when balance exceeds $10,000, Yes No">
<figcaption>Figure 1 "Call me when balance exceeds $10,000 radio group, with Yes and No choices</figcaption>
</figure>
<p>The label for each component should be restricted to "Yes" and "No". To meet <a href="../../Understanding/info-and-relationships"> 1.3.1 Information and Relationships</a> and <a href="../../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>
<p>The label for each component should be restricted to "Yes" and "No". To meet <a href="../../Understanding/info-and-relationships"> 1.3.1 Information and Relationships</a> and <a href="../../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 class="language-html">fieldset</code> and <code class="language-html">legend</code>.</p>
<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>
<code>
&lt;fieldset&gt;<br>
&lt;legend&gt;Call me when balance exceeds $10,000?&lt;/legend&gt;&lt;br /&gt;<br>
&lt;input type="radio" id="yes" name="callme" value="yes"&gt;<br>
&lt;label for="yes"&gt;Yes&lt;/label&gt;<br>
&lt;input type="radio" id="no" name="callme" value="no"&gt;<br>
&lt;label for="no"&gt;No&lt;/label&gt;<br>
&lt;/fieldset&gt;<br>
</code>
<pre><code class="language-html">&lt;fieldset&gt;
&lt;legend&gt;Call me when balance exceeds $10,000?&lt;/legend&gt;&lt;br /&gt;
&lt;input type="radio" id="yes" name="callme" value="yes"&gt;
&lt;label for="yes"&gt;Yes&lt;/label&gt;
&lt;input type="radio" id="no" name="callme" value="no"&gt;
&lt;label for="no"&gt;No&lt;/label&gt;
&lt;/fieldset&gt;</code></pre>
<p class="working-example"><a href="../../working-examples/label-in-name-general/example1.html">Working example of Simple Radio Button Group</a></p>
</section>
<section class="example">
Expand Down Expand Up @@ -109,20 +106,17 @@ <h3>Stacked Labels</h3>
<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 <code class="language-html">aria-describedby</code> and the label is properly associated with the input.</p>
<figure id="figure-new-password">
<img src="img/new-password.png" alt="New Password. Passwords must be 10 or more characters, and contain at least one capital, numeric and non-alphanumeric.'">
<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>
<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>
</figure>
<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>
<code>
&lt;form&gt;<br>
&lt;label class="label" for="example-2"&gt;<br>
Password<br>
&lt;/label&gt;<br>
&lt;span id="example-2-hint" class="hint"&gt;<br>
Passwords must be 10 or more characters, and contain at least one capital, numeric and non-alphanumeric.<br>
&lt;/span&gt;<br>
&lt;input class="input" id="example-2" name="example-2" type="text" aria-describedby="example-2-hint"&gt;<br>
&lt;/form&gt;<br>
</code>
<pre><code class="language-html">&lt;form&gt;
&lt;label class="label" for="example-2"&gt;New password&lt;/label&gt;
&lt;span id="example-2-hint" class="hint"&gt;
Passwords must be 10 or more characters, and contain at least one capital, numeric and non-alphanumeric.
&lt;/span&gt;
&lt;input class="input" id="example-2" name="example-2" type="password"
autocomplete="new-password" aria-describedby="example-2-hint"&gt;
&lt;/form&gt;</code></pre>
<p class="working-example"><a href="../../working-examples/label-in-name-general/example2.html">Working example of stacked labels</a></p>

</section>
Expand All @@ -132,11 +126,11 @@ <h3>Range of inputs with few labels</h3>
<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>
<figure id="figure-rate-response">
<img src="img/rate-response.png" alt="Rate your response, Hated it, Loved it">
<figcaption>Figure 6 Line of 5 radio buttons with Hated it and Loved it labels at each end</figcaption>
<figcaption>Figure 5 Line of 5 radio buttons with Hated it and Loved it labels at each end</figcaption>
</figure>

<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 <code class="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>
<pre><code class="language-html">&lt;fieldset&gt;
<pre><code class="language-html">&lt;fieldset&gt;
&lt;legend&gt;Rate your response&lt;/legend&gt;
&lt;label for="hated"&gt;Hated it&lt;/label&gt;
&lt;input type="radio" name="meal" id="hated" value="hated"&gt;
Expand All @@ -145,46 +139,24 @@ <h3>Range of inputs with few labels</h3>
&lt;input type="radio" name="meal" id="okay" value="okay" title="Liked"&gt;
&lt;input type="radio" name="meal" id="loved" value="loved"&gt;
&lt;label for="loved"&gt;Loved it&lt;/label&gt;
&lt;/fieldset&gt;
</code></pre>
&lt;/fieldset&gt;</code></pre>
<p class="working-example"><a href="../../working-examples/label-in-name-general/example4.html">Working example of range of inputs</a></p>
</section>

<section class="example">
<h3>Text in parentheses and punctuation</h3>
<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>
<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 <code class="language-html">aria-describedby</code>, the asterisk and parenthetical information has been left out of the accessible name.</p>
<figure id="figure-rate-response">
<img src="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">
<figcaption>Figure 6 The "Name" and "Birth date" labels with additional information (and asterisk and an input formatting instruction, respectively)</figcaption>
</figure>
<pre><code class="language-html">&lt;label for="name"&gt;Name&lt;/label&gt; *
&lt;input type="text" name="name" id="name" autocomplete="name" required&gt;
&lt;label for="birth"&gt;Birth date&lt;/label&gt; (&lt;span id="mask"&gt;YYYY-MM-DD&lt;/span&gt;)
&lt;input type="text" name="birth" id="birth" autocomplete="bday" aria-describedby="mask"&gt;</code></pre>

<pre><code class="language-html">
&lt;label for="name"&gt;Name&lt;/label&gt; *
&lt;input type="text" name="name" id="name" required&gt;
&lt;label for="birth"&gt;Birth date&lt;/label&gt; &lt;span id="mask"&gt;(YYYY-MM-DD)&lt;/span&gt;
&lt;input type="text" name="birth" id="birth" aria-describedby="mask"&gt;</code></pre>

<section>
<h4>Working sample of inputs with simplified accessible names</h4>


<div><label for="name">Name</label> *</div>
<input type="text" name="name" id="name" required="required">
<div><label for="birth">Birthdate</label> <span id="mask">(YYYY-MM-DD)</span></div>
<input type="text" name="birth" id="birth" aria-describedby="mask">
</section>

<p>
<code>
&lt;fieldset&gt;<br>&lt;legend&gt;Rate your response&lt;/legend&gt;<br>
&lt;label for="hated"&gt;Hated it&lt;/label&gt; <br>
&lt;input type="radio" name="meal" id="hated" value="hated"&gt;<br>
&lt;input type="radio" name="meal" id="poor" value="poor" title="Disliked"&gt;<br>
&lt;input type="radio" name="meal" id="neutral" value="neutral" title="So-so"&gt;<br>
&lt;input type="radio" name="meal" id="okay" value="okay" title="Liked"&gt;<br>
&lt;input type="radio" name="meal" id="loved" value="loved"&gt;<br>
&lt;label for="loved"&gt;Loved it&lt;/label&gt;<br>
&lt;/fieldset&gt;<br>
</code>
</p>
<p class="working-example"><a href="../../working-examples/label-in-name-general/example4.html">Working example of range of inputs</a></p>
<p class="working-example"><a href="../../working-examples/label-in-name-general/example3.html">Working example of inputs with simplified accessible names</a></p>

</section>
</section>
Expand Down
Binary file added techniques/general/img/inputs-simplified-accname.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions working-examples/label-in-name-general/example2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,12 @@

<div class="form-group">
<label class="label" for="example-2">
Password
New password
</label>
<span id="example-2-hint" class="hint">
Must be 10 or more characters, and contain at least one capital, numeric and non-alphanumeric.
</span>
<input class="input" id="example-2" name="example-2" type="text" aria-describedby="example-2-hint">
<input class="input" id="example-2" name="example-2" type="password" autocomplete="new-password" aria-describedby="example-2-hint">
</div>
</form>
</body>
Expand Down
13 changes: 6 additions & 7 deletions working-examples/label-in-name-general/example3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Example of Work Phone input set</title>
<title>Example of inputs with simplified accessible names</title>
<style>
html{
background: white;
Expand All @@ -19,14 +19,13 @@
letter-spacing: inherit;
word-spacing: inherit;
}
input { display: block; }
</style>
</head>
<body>
<div role="group" aria-labelledby="groupLabel">
<span id="groupLabel">Work Phone:</span>
<input type="tel" aria-labelledby="groupLabel" title="area code">
<input type="tel" title="prefix">
<input type="tel" title="line number">
</div>
<label for="name">Name</label> *
<input type="text" name="name" id="name" autocomplete="name" required>
<label for="birth">Birth date</label> (<span id="mask">YYYY-MM-DD</span>)
<input type="text" name="birth" id="birth" autocomplete="bday" aria-describedby="mask">
</body>
</html>