Skip to content

Commit

Permalink
form-field descriptive label: Improve the examples (#1809)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@WilcoFiers @daniel-montalvo
WilcoFiers and daniel-montalvo committed May 30, 2022
1 parent 5a1f6c0 commit 3c989af
Showing 1 changed file with 18 additions and 25 deletions.
43 changes: 18 additions & 25 deletions _rules/form-field-label-descriptive-cc0f0a.md
View file
Expand Up @@ -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>
```

Expand All @@ -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>
```
Expand All @@ -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>
```

Expand Down

0 comments on commit 3c989af

Please sign in to comment.