From 46f34ac038be3a2596a80c8f38230cf5129c8963 Mon Sep 17 00:00:00 2001 From: Wilco Fiers Date: Mon, 10 Jul 2023 12:49:55 +0200 Subject: [PATCH] new rule: ARIA required ID references exist (#2041) * new rule: ARIA required ID references exist * Address review comments Co-authored-by: Carlos Duarte * Apply suggestions from code review Co-authored-by: Jean-Yves Moyen * Apply suggestions from code review Co-authored-by: Tom Brunet Co-authored-by: Jean-Yves Moyen * Update _rules/aria-required-id-references-in6db8.md * Apply suggestions from code review Co-authored-by: Carlos Duarte --------- Co-authored-by: Carlos Duarte Co-authored-by: Jean-Yves Moyen Co-authored-by: Tom Brunet --- _rules/aria-required-id-references-in6db8.md | 202 +++++++++++++++++++ 1 file changed, 202 insertions(+) create mode 100644 _rules/aria-required-id-references-in6db8.md diff --git a/_rules/aria-required-id-references-in6db8.md b/_rules/aria-required-id-references-in6db8.md new file mode 100644 index 0000000000..6904de0f38 --- /dev/null +++ b/_rules/aria-required-id-references-in6db8.md @@ -0,0 +1,202 @@ +--- +id: in6db8 +name: ARIA required ID references exist +rule_type: atomic +description: | + This rule checks that every ID reference required by WAI-ARIA exists +accessibility_requirements: + aria12:propcharacteristic_value: + title: ARIA 1.2, 6.2.4 Value (Characteristics of States and Properties) + forConformance: true + failed: not satisfied + passed: satisfied + inapplicable: satisfied + wcag20:1.3.1: # Info and Relationships (A) + secondary: true + wcag20:4.1.2: # Name, Role, Value (A) + secondary: true +input_aspects: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Wilco Fiers +--- + +## Applicability + +This rule applies to any `aria-controls` attribute defined on an [HTML element][namespaced element] for which one of the following is true: + +- expanded combobox: the element is a [semantic][] `combobox` with an `aria-expanded` [attribute value][] of `true`; or +- scrollbar: the element is a [semantic][] `scrollbar`. + +## Expectation + +Each test target's [attribute value][] is a space-separated list of one or more IDs. At least one of those IDs must match an `id` [attribute value][] in the same [shadow tree][] or, if not within a [shadow tree][], within the same [document][document tree] + +## Assumptions + +There are no assumptions. + +## Accessibility Support + +Some user agents treat the value of `aria-*` attribute as case-sensitive (even when these are not IDs) while some treat them as case-insensitive. + +## Background + +This rule is written specifically for `aria-controls`, because it is the only [ID Reference List][] property that is [required by WAI-ARIA][]. The `aria-controls` property is only required by the `scrollbar` role and by an expanded `combobox`. There are no [ID Reference][] properties that are required by WAI-ARIA for any role. + +### Bibliography + +- [ARIA5: Using WAI-ARIA state and property attributes to expose the state of a user interface component](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA5) +- [WAI-ARIA required states and properties](https://www.w3.org/TR/wai-aria-1.2/#requiredState) +- [RFC 3986](https://www.ietf.org/rfc/rfc3986.txt) + +## Test Cases + +### Passed + +#### Passed Example 1 + +The `aria-controls` [attribute value][] of this `scrollbar` matches the `id` of the `main` element in the same document. + +```html +
Lorem ipsum...
+
+``` + +#### Passed Example 2 + +The `aria-controls` [attribute value][] of this expanded `combobox` matches the `id` of the `ul` element in the same document. + +```html + + + +``` + +#### Passed Example 3 + +The `aria-controls` [attribute value][] of this `scrollbar` has two IDs. The `content-2` ID matches the `id` of the `main` element in the same document. + +```html +
Lorem ipsum...
+
+``` + +### Failed + +#### Failed Example 1 + +The `aria-controls` attribute of this expanded `combobox` references an ID of `popup_listbox` which does not exist in the document. + +```html + +``` + +#### Failed Example 2 + +The `aria-controls` attribute of this `scrollbar` references IDs of `content-1` and `content-2`. Neither of these IDs exist in the document. + +```html +
Lorem ipsum...
+
+``` + +#### Failed Example 3 + +The `aria-controls` attribute of this expanded `combobox` references a `popup_listbox` ID. This `id` exists, but in a different DOM tree as the `combobox`. + +```html +
+ + +
+ +``` + +### Inapplicable + +#### Inapplicable Example 1 + +The `aria-controls` attribute is defined on a `combobox` which does not have an `aria-expanded` [attribute value][] of `true`. + +```html + + +``` + +#### Inapplicable Example 2 + +This `aria-controls` attribute is not defined on a [semantic][] `scrollbar` nor `combobox`. + +```html + +``` + +#### Inapplicable Example 3 + +There is no `aria-controls` attribute. + +```html + +``` + +[semantic]: #semantic-role 'Definition of Semantic Role' +[attribute value]: #attribute-value 'Definition of Attribute Value' +[document tree]: https://dom.spec.whatwg.org/#document-trees 'DOM Definition of Document tree' +[shadow tree]: https://dom.spec.whatwg.org/#shadow-trees 'DOM Definition of Shadow tree' +[required by wai-aria]: https://www.w3.org/TR/wai-aria-1.2/#requiredState 'WAI-ARIA Required States and Properties' +[id reference list]: https://www.w3.org/TR/wai-aria-1.2/#valuetype_idref_list 'WAI-ARIA definition of ID Reference List' +[id reference]: https://www.w3.org/TR/wai-aria-1.2/#valuetype_idref 'WAI-ARIA definition of ID Reference'