diff --git a/_rules/SC-1-3-1-aria-controls-for-scrollbar-references-existing-element.md b/_rules/SC-1-3-1-aria-controls-for-scrollbar-references-existing-element.md new file mode 100644 index 00000000000..ff6df8b7ff3 --- /dev/null +++ b/_rules/SC-1-3-1-aria-controls-for-scrollbar-references-existing-element.md @@ -0,0 +1,128 @@ +--- +name: aria-controls for scrollbar references existing element +rule_type: atomic + +description: | + This rule checks that each `aria-controls` property on an element with the role `scrollbar` references at least one existing element. + +success_criterion: +- 1.3.1 # Info and Relationships + +test_aspects: +- DOM Tree +- CSS Styling + +authors: +- Wilco Fiers +- Anne Thyme Nørregaard +--- + +## Test procedure + +### Applicability + +Any `aria-controls` property that +- is specified on an HTML or SVG element that has the role of `scrollbar` and is [included in the accessibility tree](#included-in-the-accessibility-tree) or is [focusable](#focusable), +- has a value that is not the empty string (""). + +**Note:** `aria-controls` is a [WAI-ARIA required property](https://www.w3.org/TR/wai-aria-1.1/#requiredState) for the role `scrollbar`. + +### Expectation 1 + +Each test target has a value that is a list of one or more `id` references. + +**Note:** [ID reference](https://www.w3.org/TR/wai-aria-1.1/#valuetype_idref_list) is the [value type](https://www.w3.org/TR/wai-aria-1.1/#propcharacteristic_value) specified for the property `aria-controls`. + +### Expectation 2 + +At least one of the `id`s referenced by the test target is specified on an HTML or SVG element that exists in the same [document tree](https://www.w3.org/TR/dom41/#document-trees) or [shadow tree](https://www.w3.org/TR/dom41/#shadow-trees) as the element that specifies the target attribute. + +## Assumptions + +_There are currently no assumptions for this rule._ + +## Accessibility Support + +_There are no major accessibility support issues known for this rule._ + +## Background + +- [Understanding Success Criterion 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html) +- [WAI-ARIA 1.1, Definitions of States and Properties](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def) +- [WAI-ARIA 1.1, Characteristics of States and Properties, Value](https://www.w3.org/TR/wai-aria/#propcharacteristic_value) + +## Test Cases + +### Passed + +#### Passed example 1 + +`aria-controls` on the element with role `scrollbar` has `id` references to multiple elements that exist in the same document tree. + +```html +