Non-role input types require an accessible name (#2228)

WilcoFiers · Jym77 · zlayaAvocado · web-flow · commit cdbff9b00b47 · 2026-01-23T15:19:19.000+01:00
* Non-role input types require an accessible name

* Update _rules/form-field-non-empty-accessible-name-e086e5.md

Co-authored-by: Jean-Yves Moyen &lt;jym@siteimprove.com&gt;

* Apply suggestions from code review

Co-authored-by: Jean-Yves Moyen &lt;jym@siteimprove.com&gt;

* Update form-field-non-empty-accessible-name-e086e5.md

* update applicability

* add examples

---------

Co-authored-by: Jean-Yves Moyen &lt;jym@siteimprove.com&gt;
Co-authored-by: Sasha Nichols &lt;sasha.nichols@deque.com&gt;
diff --git a/_rules/form-field-label-descriptive-cc0f0a.md b/_rules/form-field-label-descriptive-cc0f0a.md
@@ -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
 
@@ -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].
@@ -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
@@ -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
diff --git a/_rules/form-field-non-empty-accessible-name-e086e5.md b/_rules/form-field-non-empty-accessible-name-e086e5.md
@@ -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
 
@@ -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.
 
@@ -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
@@ -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
