From aa9c1987a966eaea8320bbca7f032348629bcf34 Mon Sep 17 00:00:00 2001 From: Wilco Fiers Date: Thu, 21 Nov 2024 19:04:50 +0100 Subject: [PATCH 1/6] Non-role input types require an accessible name --- ...-field-non-empty-accessible-name-e086e5.md | 26 +++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/_rules/form-field-non-empty-accessible-name-e086e5.md b/_rules/form-field-non-empty-accessible-name-e086e5.md index 3f7d311a031..5ac8fe557de 100755 --- 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`, `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. 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. @@ -152,6 +155,17 @@ These `menuitemcheckbox` elements have an [accessible name][] because its aria-l ``` +#### 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 + +``` + ### Failed #### Failed Example 1 @@ -230,6 +244,14 @@ These `menuitemcheckbox` elements do not have an [accessible name][]. ``` +#### Failed Example 9 + +This `input` element with a `type` [attribute value][] of `date` has an empty (`""`) [accessible name][]. + +```html + +``` + ### Inapplicable #### Inapplicable Example 1 From ad2239e83b27f10f2e4b8a9cf6f036e430c4ba3a Mon Sep 17 00:00:00 2001 From: Wilco Fiers Date: Thu, 23 Jan 2025 16:17:30 +0100 Subject: [PATCH 2/6] Update _rules/form-field-non-empty-accessible-name-e086e5.md Co-authored-by: Jean-Yves Moyen --- _rules/form-field-non-empty-accessible-name-e086e5.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_rules/form-field-non-empty-accessible-name-e086e5.md b/_rules/form-field-non-empty-accessible-name-e086e5.md index 5ac8fe557de..e00343b8399 100755 --- a/_rules/form-field-non-empty-accessible-name-e086e5.md +++ b/_rules/form-field-non-empty-accessible-name-e086e5.md @@ -32,7 +32,7 @@ acknowledgments: 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`. +- 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 From dacde0f8d5214e032fbac2479fc32c640d8c2de9 Mon Sep 17 00:00:00 2001 From: Wilco Fiers Date: Thu, 13 Nov 2025 18:49:24 +0100 Subject: [PATCH 3/6] Apply suggestions from code review Co-authored-by: Jean-Yves Moyen --- _rules/form-field-non-empty-accessible-name-e086e5.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_rules/form-field-non-empty-accessible-name-e086e5.md b/_rules/form-field-non-empty-accessible-name-e086e5.md index e00343b8399..95c1a17f9a3 100755 --- a/_rules/form-field-non-empty-accessible-name-e086e5.md +++ b/_rules/form-field-non-empty-accessible-name-e086e5.md @@ -45,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. 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. From 690a263abafd08b057fd9a6e5eac13b88f8cd586 Mon Sep 17 00:00:00 2001 From: Wilco Fiers Date: Thu, 13 Nov 2025 18:51:41 +0100 Subject: [PATCH 4/6] Update form-field-non-empty-accessible-name-e086e5.md --- _rules/form-field-non-empty-accessible-name-e086e5.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_rules/form-field-non-empty-accessible-name-e086e5.md b/_rules/form-field-non-empty-accessible-name-e086e5.md index 95c1a17f9a3..552bdbc184f 100755 --- a/_rules/form-field-non-empty-accessible-name-e086e5.md +++ b/_rules/form-field-non-empty-accessible-name-e086e5.md @@ -45,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 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 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. From 89ee92da3e71d0cbb0367ac88c427338dadac688 Mon Sep 17 00:00:00 2001 From: Sasha Nichols Date: Tue, 25 Nov 2025 16:16:21 -0600 Subject: [PATCH 5/6] update applicability --- _rules/form-field-label-descriptive-cc0f0a.md | 25 +++++++------------ 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/_rules/form-field-label-descriptive-cc0f0a.md b/_rules/form-field-label-descriptive-cc0f0a.md index 68f21afe75f..cc9ed0bc928 100755 --- 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]. From d3dfb873fbc67e2eb1282335f47214abbbc61cd9 Mon Sep 17 00:00:00 2001 From: Sasha Nichols Date: Tue, 25 Nov 2025 16:40:21 -0600 Subject: [PATCH 6/6] add examples --- _rules/form-field-label-descriptive-cc0f0a.md | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/_rules/form-field-label-descriptive-cc0f0a.md b/_rules/form-field-label-descriptive-cc0f0a.md index cc9ed0bc928..dd8358e1db8 100755 --- a/_rules/form-field-label-descriptive-cc0f0a.md +++ b/_rules/form-field-label-descriptive-cc0f0a.md @@ -153,6 +153,16 @@ Both the `div` and the `span` elements are [programmatic labels][programmatic la ``` +#### 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 + + + +``` + ### Failed #### Failed Example 1 @@ -218,6 +228,16 @@ These `button` and `span` elements are both [programmatic labels][programmatic l ``` +#### 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 + + + +``` + ### Inapplicable #### Inapplicable Example 1