Skip to content

Commit 46f34ac

Browse files
WilcoFierscarlosapaduarteJym77tombrunet
authored
new rule: ARIA required ID references exist (act-rules#2041)
* new rule: ARIA required ID references exist * Address review comments Co-authored-by: Carlos Duarte <caduarte@campus.ul.pt> * Apply suggestions from code review Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Apply suggestions from code review Co-authored-by: Tom Brunet <thbrunet@us.ibm.com> Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Update _rules/aria-required-id-references-in6db8.md * Apply suggestions from code review Co-authored-by: Carlos Duarte <caduarte@campus.ul.pt> --------- Co-authored-by: Carlos Duarte <caduarte@campus.ul.pt> Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> Co-authored-by: Tom Brunet <thbrunet@us.ibm.com>
1 parent ee12ac0 commit 46f34ac

1 file changed

Lines changed: 202 additions & 0 deletions

File tree

‎_rules/aria-required-id-references-in6db8.md‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
---
2+
id: in6db8
3+
name: ARIA required ID references exist
4+
rule_type: atomic
5+
description: |
6+
This rule checks that every ID reference required by WAI-ARIA exists
7+
accessibility_requirements:
8+
aria12:propcharacteristic_value:
9+
title: ARIA 1.2, 6.2.4 Value (Characteristics of States and Properties)
10+
forConformance: true
11+
failed: not satisfied
12+
passed: satisfied
13+
inapplicable: satisfied
14+
wcag20:1.3.1: # Info and Relationships (A)
15+
secondary: true
16+
wcag20:4.1.2: # Name, Role, Value (A)
17+
secondary: true
18+
input_aspects:
19+
- DOM Tree
20+
- CSS Styling
21+
acknowledgments:
22+
authors:
23+
- Wilco Fiers
24+
---
25+
26+
## Applicability
27+
28+
This rule applies to any `aria-controls` attribute defined on an [HTML element][namespaced element] for which one of the following is true:
29+
30+
- <dfn>expanded combobox</dfn>: the element is a [semantic][] `combobox` with an `aria-expanded` [attribute value][] of `true`; or
31+
- <dfn>scrollbar</dfn>: the element is a [semantic][] `scrollbar`.
32+
33+
## Expectation
34+
35+
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]
36+
37+
## Assumptions
38+
39+
There are no assumptions.
40+
41+
## Accessibility Support
42+
43+
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.
44+
45+
## Background
46+
47+
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.
48+
49+
### Bibliography
50+
51+
- [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)
52+
- [WAI-ARIA required states and properties](https://www.w3.org/TR/wai-aria-1.2/#requiredState)
53+
- [RFC 3986](https://www.ietf.org/rfc/rfc3986.txt)
54+
55+
## Test Cases
56+
57+
### Passed
58+
59+
#### Passed Example 1
60+
61+
The `aria-controls` [attribute value][] of this `scrollbar` matches the `id` of the `main` element in the same document.
62+
63+
```html
64+
<main id="content">Lorem ipsum...</main>
65+
<div
66+
role="scrollbar"
67+
aria-controls="content"
68+
aria-orientation="vertical"
69+
aria-valuemax="100"
70+
aria-valuemin="0"
71+
aria-valuenow="25"
72+
></div>
73+
```
74+
75+
#### Passed Example 2
76+
77+
The `aria-controls` [attribute value][] of this expanded `combobox` matches the `id` of the `ul` element in the same document.
78+
79+
```html
80+
<label for="tag_combo">Tag</label>
81+
<input
82+
type="text"
83+
id="tag_combo"
84+
role="combobox"
85+
aria-expanded="true"
86+
aria-controls="popup_listbox"
87+
aria-activedescendant="selected_option"
88+
/>
89+
<ul role="listbox" id="popup_listbox">
90+
<li role="option">Zebra</li>
91+
<li role="option" id="selected_option">Zoom</li>
92+
</ul>
93+
```
94+
95+
#### Passed Example 3
96+
97+
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.
98+
99+
```html
100+
<main id="content-2">Lorem ipsum...</main>
101+
<div
102+
role="scrollbar"
103+
aria-controls="content-1 content-2"
104+
aria-orientation="vertical"
105+
aria-valuemax="100"
106+
aria-valuemin="0"
107+
aria-valuenow="25"
108+
></div>
109+
```
110+
111+
### Failed
112+
113+
#### Failed Example 1
114+
115+
The `aria-controls` attribute of this expanded `combobox` references an ID of `popup_listbox` which does not exist in the document.
116+
117+
```html
118+
<label>
119+
Tag
120+
<input role="combobox" aria-expanded="true" aria-controls="popup_listbox" />
121+
</label>
122+
```
123+
124+
#### Failed Example 2
125+
126+
The `aria-controls` attribute of this `scrollbar` references IDs of `content-1` and `content-2`. Neither of these IDs exist in the document.
127+
128+
```html
129+
<main>Lorem ipsum...</main>
130+
<div
131+
role="scrollbar"
132+
aria-controls="content-1 content-2"
133+
aria-orientation="vertical"
134+
aria-valuemax="100"
135+
aria-valuemin="0"
136+
aria-valuenow="25"
137+
></div>
138+
```
139+
140+
#### Failed Example 3
141+
142+
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`.
143+
144+
```html
145+
<div id="aria-listbox">
146+
<label for="tag_combo">Tag</label>
147+
<input
148+
type="text"
149+
id="tag_combo"
150+
role="combobox"
151+
aria-expanded="true"
152+
aria-controls="popup_listbox"
153+
aria-activedescendant="selected_option"
154+
/>
155+
</div>
156+
<script>
157+
const ariaListbox = document.querySelector('#aria-listbox')
158+
const shadowRoot = ariaListbox.attachShadow({ mode: 'open' })
159+
shadowRoot.innerHTML = `
160+
<slot></slot>
161+
<ul role="listbox" id="popup_listbox">
162+
<li role="option">Zebra</li>
163+
<li role="option" id="selected_option">Zoom</li>
164+
</ul>
165+
`
166+
</script>
167+
```
168+
169+
### Inapplicable
170+
171+
#### Inapplicable Example 1
172+
173+
The `aria-controls` attribute is defined on a `combobox` which does not have an `aria-expanded` [attribute value][] of `true`.
174+
175+
```html
176+
<label for="tag_combo">Tag</label>
177+
<input type="text" id="tag_combo" role="combobox" aria-expanded="false" aria-controls="popup_listbox" />
178+
```
179+
180+
#### Inapplicable Example 2
181+
182+
This `aria-controls` attribute is not defined on a [semantic][] `scrollbar` nor `combobox`.
183+
184+
```html
185+
<button aria-controls="my-modal">Open the modal</button>
186+
```
187+
188+
#### Inapplicable Example 3
189+
190+
There is no `aria-controls` attribute.
191+
192+
```html
193+
<button>Open the modal</button>
194+
```
195+
196+
[semantic]: #semantic-role 'Definition of Semantic Role'
197+
[attribute value]: #attribute-value 'Definition of Attribute Value'
198+
[document tree]: https://dom.spec.whatwg.org/#document-trees 'DOM Definition of Document tree'
199+
[shadow tree]: https://dom.spec.whatwg.org/#shadow-trees 'DOM Definition of Shadow tree'
200+
[required by wai-aria]: https://www.w3.org/TR/wai-aria-1.2/#requiredState 'WAI-ARIA Required States and Properties'
201+
[id reference list]: https://www.w3.org/TR/wai-aria-1.2/#valuetype_idref_list 'WAI-ARIA definition of ID Reference List'
202+
[id reference]: https://www.w3.org/TR/wai-aria-1.2/#valuetype_idref 'WAI-ARIA definition of ID Reference'

0 commit comments

Comments
 (0)