Add autocomplete attributes

patrickhlauke · patrickhlauke · commit 51a61c4c71f3 · 2025-08-23T11:48:48.000+01:00
diff --git a/techniques/general/G211.html b/techniques/general/G211.html
@@ -110,11 +110,12 @@ <h3>Stacked Labels</h3>
 				</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>
