Skip to content
26 changes: 24 additions & 2 deletions _rules/form-field-non-empty-accessible-name-e086e5.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,10 @@ acknowledgments:

## Applicability

This rule applies to any element that is [included in the accessibility tree](#included-in-the-accessibility-tree), and that has one of the following [semantic roles][]: `checkbox`, `combobox` (`select` elements), `listbox`, `menuitemcheckbox`, `menuitemradio`, `radio`, `searchbox`, `slider`, `spinbutton`, `switch`, `textbox`.
This rule applies to any element that is [included in the accessibility tree](#included-in-the-accessibility-tree) and for which one of the following is true:

- the element has one of the following [semantic roles][]: `checkbox`, `combobox` (`select` elements), `listbox`, `menuitemcheckbox`, `menuitemradio`, `radio`, `searchbox`, `slider`, `spinbutton`, `switch`, `textbox`; or
- the element is an `input` with no [semantic role][] and a `type` [attribute value][] of `color`, `date`, `datetime-local`, `file`, `month`, `password`, `time`, or `week`.

## Expectation

Expand All @@ -42,7 +45,7 @@ The list of roles in the applicability is derived by taking all the roles from [
- have [semantic roles][] that inherit from the `input`, `menuitem` or `select` role; and
- are form field controls (this notably excludes `menu`, `option` or `tree`).

This rule does not test other control-like roles such as `button` and `menuitem`, because these do not inherit from `input` or `select`. These should be tested separately.
This rule does not test other control-like roles such as `button` and `menuitem`, because these do not inherit from `input` or `select`. These should be tested separately. Because certain input types such as date and color have no semantic role, these are listed as a separate item in the applicability.
Comment thread
WilcoFiers marked this conversation as resolved.
Outdated

This rule does not map to [3.3.2 Labels or Instructions](https://www.w3.org/TR/WCAG22/#labels-or-instructions) as there are sufficient techniques within 3.3.2 that don't need the elements to have an [accessible name][]. For example "[G131: Providing descriptive labels](https://www.w3.org/WAI/WCAG22/Techniques/general/G131)" **AND** "[G162: Positioning labels to maximize predictability of relationships](https://www.w3.org/WAI/WCAG22/Techniques/general/G162)" would be sufficient.

Expand Down Expand Up @@ -152,6 +155,17 @@ These `menuitemcheckbox` elements have an [accessible name][] because its aria-l
</div>
```

#### Passed Example 9

This `input` element with a `type` [attribute value][] of `color` has an [accessible name][] because of its [programmatic label](#programmatic-label).

```html
<label>
Favorite color
<input type="color" />
</label>
```

### Failed

#### Failed Example 1
Expand Down Expand Up @@ -230,6 +244,14 @@ These `menuitemcheckbox` elements do not have an [accessible name][].
</div>
```

#### Failed Example 9

This `input` element with a `type` [attribute value][] of `date` has an empty (`""`) [accessible name][].

```html
<label>Date of birth</label> <input type="date" />
```

### Inapplicable

#### Inapplicable Example 1
Expand Down