Skip to content

Commit 3c989af

Browse files
form-field descriptive label: Improve the examples (#1809)
* 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 <49305434+daniel-montalvo@users.noreply.github.com> * Update _rules/form-field-label-descriptive-cc0f0a.md Co-authored-by: daniel-montalvo <49305434+daniel-montalvo@users.noreply.github.com>
1 parent 5a1f6c0 commit 3c989af

1 file changed

Lines changed: 18 additions & 25 deletions

File tree

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

Lines changed: 18 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -198,29 +198,32 @@ The `span` element is a [programmatic label][] of the `input` element but does n
198198

199199
#### Failed Example 4
200200

201-
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][].
201+
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][].
202202

203203
```html
204204
<html lang="en">
205-
<h2 style="position: absolute; top: -9999px; left: -9999px;">Shipping</h2>
206-
<input aria-label="Name" id="shipping-name" type="text" name="name" />
207-
<input aria-label="Street" id="shipping-street" type="text" name="street" />
208-
209-
<h2 style="position: absolute; top: -9999px; left: -9999px;">Billing</h2>
210-
<input aria-label="Name" id="billing-name" type="text" name="name" />
211-
<input aria-label="Street" id="billing-street" type="text" name="street" />
205+
<fieldset>
206+
<h2 style="position: absolute; top: -9999px; left: -9999px;">Shipping address</h2>
207+
<label>Name: <input type="text" name="shipping-name" /></label>
208+
<label>Street: <input type="text" name="shipping-street" /></label>
209+
</fieldset>
210+
<fieldset>
211+
<h2 style="position: absolute; top: -9999px; left: -9999px;">Billing address</h2>
212+
<label>Name: <input type="text" name="billing-name" /></label>
213+
<label>Street: <input type="text" name="billing-street" /></label>
214+
</fieldset>
212215
</html>
213216
```
214217

215218
#### Failed Example 5
216219

217-
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.
220+
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.
218221

219222
```html
220223
<html lang="en">
221-
<div id="shipping">Shipping</div>
222-
<span id="name" style="display: none">Name</span>
223-
<input id="shipping-name" type="text" name="name" aria-labelledby="shipping name" />
224+
<span id="search" style="display: none">Search</span>
225+
<input type="text" name="search" aria-labelledby="submit search" />
226+
<button id="submit">Go</button>
224227
</html>
225228
```
226229

@@ -243,7 +246,8 @@ The `label` element is not [visible][].
243246

244247
```html
245248
<html lang="en">
246-
<label for="fname" style="display:none;">First name:</label>
249+
<label for="fname" style="position: absolute; left: -9999px;">First name:</label>
250+
<label aria-hidden="true">First name:</label>
247251
<input id="fname" type="text" name="fname" />
248252
</html>
249253
```
@@ -254,18 +258,7 @@ The `label` is a [visible][] [programmatic label][] of the `input` element. Howe
254258

255259
```html
256260
<html lang="en">
257-
<label>First name: <input style="position: absolute; top: -9999px; left: -9999px;" type="text" name="fname"/></label>
258-
</html>
259-
```
260-
261-
#### Inapplicable Example 4
262-
263-
The `span` element is not a [programmatic label][] of any element.
264-
265-
```html
266-
<html lang="en">
267-
<span>First name:</span>
268-
<input type="text" name="fname" />
261+
<label>First name: <input style="position: absolute; top: -9999px; left: -9999px;" disabled role="none" /></label>
269262
</html>
270263
```
271264

0 commit comments

Comments
 (0)