Skip to content

Non-role input types require an accessible name #2228

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: develop
Choose a base branch
from
Open

Non-role input types require an accessible name #2228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
aa9c198
Non-role input types require an accessible name
WilcoFiers Nov 21, 2024
ad2239e
Update _rules/form-field-non-empty-accessible-name-e086e5.md
WilcoFiers Jan 23, 2025
dacde0f
Apply suggestions from code review
WilcoFiers Nov 13, 2025
690a263
Update form-field-non-empty-accessible-name-e086e5.md
WilcoFiers Nov 13, 2025
015a389
Merge branch 'develop' into form-control-all-input-types
zlayaAvocado Nov 24, 2025
ad71fb2
Merge branch 'form-control-all-input-types' of github.com:act-rules/a…
zlayaAvocado Nov 24, 2025
89ee92d
update applicability
zlayaAvocado Nov 25, 2025
d3dfb87
add examples
zlayaAvocado Nov 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 29 additions & 16 deletions _rules/form-field-label-descriptive-cc0f0a.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,21 +34,12 @@ acknowledgments:

## Applicability

This rule applies to any [programmatic label][] of an element which has one of the following [semantic roles][semantic role]:

- `checkbox`
- `combobox`
- `listbox`
- `menuitemcheckbox`
- `menuitemradio`
- `radio`
- `searchbox`
- `slider`
- `spinbutton`
- `switch`
- `textbox`

and where both the element and the [programmatic label][] are [visible][].
This rule applies to any [programmatic label][] of an element for which one of the following is true:

- the element has one of the following [semantic roles][semantic role]: `checkbox`, `combobox`, `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`.

In addition, both the element and the [programmatic label][] must be [visible][].

## Expectation

Expand All @@ -58,9 +49,11 @@ Each test target, together with its [visual context][], describes the purpose of

The list of applicable [semantic roles][semantic role] is derived by taking all the [ARIA 1.2][aria12] roles that:

- inherit from the `input`, `menuitem` or `select` role, and
- inherit from the `input`, `menuitem` or `select` role; and
- are form field controls (this notably excludes `menu`, `option` or `tree`).

This rule also applies to `input` elements whose `type` [attribute value][] is `color`, `date`, `datetime-local`, `file`, `month`, `password`, `time`, or `week`. These input types have no semantic role but still require a descriptive [programmatic label][] so users can understand their purpose.

[Labels][label] in WCAG are not restricted to the `label` element of HTML and can be any element. This rule is only concerned about actual `label` elements, and elements that are programmatically marked as [labels][label] via the `aria-labelledby` attribute.

It is possible for an element to have an [accessible name][] but still have a non-descriptive `label` element (and even a non-descriptive [label][]). In that case, it would pass [Success Criterion 4.1.2: Name, Role and Value][sc412] but still fail this rule and [Success Criterion 2.4.6: Headings and Labels][sc246].
Expand Down Expand Up @@ -160,6 +153,16 @@ Both the `div` and the `span` elements are [programmatic labels][programmatic la
</html>
```

#### Passed Example 7

The `label` element is a [programmatic label][] of the `input` element whose `type` attribute value is `date` and describes its purpose.

```html
<html lang="en">
<label>Date of birth:<input id="dob" type="date" name="dob"/></label>
</html>
```

### Failed

#### Failed Example 1
Expand Down Expand Up @@ -225,6 +228,16 @@ These `button` and `span` elements are both [programmatic labels][programmatic l
</html>
```

#### Failed Example 6

The `label` element is a [programmatic label][] of the `input` element whose `type` attribute value is `date`, but the label text "Info" does not describe the purpose of the form field.

```html
<html lang="en">
<label>Info:<input id="dob" type="date" name="dob"/></label>
</html>
```

### Inapplicable

#### Inapplicable Example 1
Expand Down
26 changes: 24 additions & 2 deletions _rules/form-field-non-empty-accessible-name-e086e5.md
View file
Open in desktop
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. This rule tests explicitly input types such as date and color because they have no semantic role, but still require an accessible name.

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