Update G211 prose and wrong working example

* correct the figure numbering
* remove the inline working example
* reuse the existing (but unlinked) `example3.html` to provide the actual working example for simplified accName

Closes #4554

Author: patrickhlauke

techniques/general/G211.html

@@ -132,7 +132,7 @@ <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>
@@ -154,37 +154,17 @@ <h3>Range of inputs with few labels</h3>
 			<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" 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 inputs with simplified accessible names</a></p>
 
 		</section>
 	</section>

techniques/general/img/inputs-simplified-accname.png

@@ -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 inputs with simplified accessible names</title>
 <style>
 	html{
 		background: white;
@@ -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" required>
+<label for="birth">Birth date</label> <span id="mask">(YYYY-MM-DD)</span>
+<input type="text" name="birth" id="birth" aria-describedby="mask">
 </body>
 </html>