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

Draft
wants to merge 2 commits into
base: develop
Choose a base branch
from
Draft

Non-role input types require an accessible name #2228

Changes from 1 commit
Commits
Show all changes
2 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
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
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`, `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.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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.
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 test certain specific 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
Loading