form-field descriptive label: Improve the examples (#1809)

WilcoFiers · daniel-montalvo · web-flow · commit 3c989af555d9 · 2022-05-30T14:04:35.000+02:00
* form-field descriptive label: Improve the examples

- Ensure inapplicable examples don't fail the SC
- Make it clearer why some of these failed examples are failing.

* Apply suggestions from code review

Co-authored-by: daniel-montalvo &lt;49305434+daniel-montalvo@users.noreply.github.com&gt;

* Update _rules/form-field-label-descriptive-cc0f0a.md

Co-authored-by: daniel-montalvo &lt;49305434+daniel-montalvo@users.noreply.github.com&gt;
diff --git a/_rules/form-field-label-descriptive-cc0f0a.md b/_rules/form-field-label-descriptive-cc0f0a.md
@@ -198,29 +198,32 @@ The `span` element is a [programmatic label][] of the `input` element but does n
 
 #### Failed Example 4
 
-The `label` elements are [programmatic labels][programmatic label] of their respective `input` elements. The `label` elements, are not descriptive enough (because they are repeated over several fields). The headings are not [visible][]. Therefore, they do not provide [visual context][].
+These `label` elements are [programmatic labels][programmatic label] of their respective `input` elements. They are not descriptive enough because they are reused on multiple fields. The headings are not [visible][]. Therefore, they do not provide [visual context][].
 
 ```html
 <html lang="en">
-	<h2 style="position: absolute; top: -9999px; left: -9999px;">Shipping</h2>
-	<input aria-label="Name" id="shipping-name" type="text" name="name" />
-	<input aria-label="Street" id="shipping-street" type="text" name="street" />
-
-	<h2 style="position: absolute; top: -9999px; left: -9999px;">Billing</h2>
-	<input aria-label="Name" id="billing-name" type="text" name="name" />
-	<input aria-label="Street" id="billing-street" type="text" name="street" />
+	<fieldset>
+		<h2 style="position: absolute; top: -9999px; left: -9999px;">Shipping address</h2>
+		<label>Name: <input type="text" name="shipping-name" /></label>
+		<label>Street: <input type="text" name="shipping-street" /></label>
+	</fieldset>
+	<fieldset>		
+		<h2 style="position: absolute; top: -9999px; left: -9999px;">Billing address</h2>
+		<label>Name: <input type="text" name="billing-name" /></label>
+		<label>Street: <input type="text" name="billing-street" /></label>
+	</fieldset>
 </html>
 ```
 
 #### Failed Example 5
 
-Both the `div` and the `span` elements are [programmatic labels][programmatic label] of the `input` element, but only the `div` is [visible][]. It has no [visual context][], and is not descriptive.
+These `button` and `span` elements are both [programmatic labels][programmatic label] of the `input` element, but only the `button` is [visible][]. It has no [visual context][], and is not descriptive.
 
 ```html
 <html lang="en">
-	<div id="shipping">Shipping</div>
-	<span id="name" style="display: none">Name</span>
-	<input id="shipping-name" type="text" name="name" aria-labelledby="shipping name" />
+	<span id="search" style="display: none">Search</span>
+	<input type="text" name="search" aria-labelledby="submit search" />
+	<button id="submit">Go</button>
 </html>
 ```
 
@@ -243,7 +246,8 @@ The `label` element is not [visible][].
 
 ```html
 <html lang="en">
-	<label for="fname" style="display:none;">First name:</label>
+	<label for="fname" style="position: absolute; left: -9999px;">First name:</label>
+	<label aria-hidden="true">First name:</label>
 	<input id="fname" type="text" name="fname" />
 </html>
 ```
@@ -254,18 +258,7 @@ The `label` is a [visible][] [programmatic label][] of the `input` element. Howe
 
 ```html
 <html lang="en">
-	<label>First name: <input style="position: absolute; top: -9999px; left: -9999px;" type="text" name="fname"/></label>
-</html>
-```
-
-#### Inapplicable Example 4
-
-The `span` element is not a [programmatic label][] of any element.
-
-```html
-<html lang="en">
-	<span>First name:</span>
-	<input type="text" name="fname" />
+	<label>First name: <input style="position: absolute; top: -9999px; left: -9999px;" disabled role="none" /></label>
 </html>
 ```
 
