Add autocomplete attributes

patrickhlauke · patrickhlauke · commit 109185c8092b · 2025-08-23T11:57:43.000+01:00
diff --git a/techniques/general/G211.html b/techniques/general/G211.html
@@ -106,15 +106,16 @@ <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>
 <pre><code class="language-html">&lt;form&gt;
-  &lt;label class="label" for="example-2"&gt;Password&lt;/label&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="text" aria-describedby="example-2-hint"&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>
 
@@ -151,9 +152,9 @@ <h3>Text in parentheses and punctuation</h3>
 				<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;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" aria-describedby="mask"&gt;</code></pre>
+&lt;input type="text" name="birth" id="birth" autocomplete="bday" aria-describedby="mask"&gt;</code></pre>
 
 			<p class="working-example"><a href="../../working-examples/label-in-name-general/example3.html">Working example of inputs with simplified accessible names</a></p>
 
diff --git a/working-examples/label-in-name-general/example2.html b/working-examples/label-in-name-general/example2.html
@@ -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>
diff --git a/working-examples/label-in-name-general/example3.html b/working-examples/label-in-name-general/example3.html
@@ -24,8 +24,8 @@
 </head>
 <body>
 <label for="name">Name</label> *
-<input type="text" name="name" id="name" required>
+<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" aria-describedby="mask">
+<input type="text" name="birth" id="birth" autocomplete="bday" aria-describedby="mask">
 </body>
 </html>
