Skip to content
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.

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

Non-role input types require an accessible name #2228

Draft
wants to merge 1 commit into
base: develop
Choose a base branch
from
Draft
Changes from all commits
Commits
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
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`.
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
- the element is an `input` with no [semantic role][] and a `type` [attribute value][] of `color`, `date`, `datetime-local`, `month`, `password`, `time`, or `week`.
- 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.

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