Skip to content

Commit 75a9878

Browse files
dan-tripp-siteimprovedan-tripp-siteimprove
authored
Merge branch 'act-rules:develop' into develop
2 parents f920a47 + ebc87aa commit 75a9878

13 files changed

Lines changed: 400 additions & 82 deletions

‎_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'

‎_rules/explicit-SVG-image-non-empty-accessible-name-7d6734.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ Each target element has an [accessible name][] that is not empty.
3030

3131
## Assumptions
3232

33-
This rule assumes that the presence of one of the roles outlined in the applicability indicates the authors intent to include the element in the accessibility tree and thus convey information to the user about that element.
33+
This rule assumes that the presence of one of the roles outlined in the applicability indicates the author's intent to include the element in the accessibility tree and thus convey information to the user about that element.
3434

3535
## Accessibility Support
3636

‎_rules/html-page-lang-xml-lang-match-5b7ae0.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
id: 5b7ae0
3-
name: HTML page lang and xml:lang attributes have matching values
3+
name: DEPRECATED — HTML page lang and xml:lang attributes have matching values
44
rule_type: atomic
55
description: |
66
This rule checks that both `lang` and `xml:lang` attributes on the root element of a non-embedded HTML page, have the same primary language subtag.
@@ -12,6 +12,8 @@ accessibility_requirements:
1212
inapplicable: further testing needed
1313
input_aspects:
1414
- DOM Tree # The tree that HTML is parsed into.
15+
deprecated: |
16+
This rule has been deprecated, as modern screen readers no longer use xml:lang when the lang attribute is given, regardless of which MIME type the page is served with. This rule is not maintained anymore and should not be used.
1517
acknowledgments:
1618
authors:
1719
- Jey Nandakumar

‎_rules/iframe-non-empty-accessible-name-cae760.md‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,10 @@ acknowledgments:
2424

2525
## Applicability
2626

27-
This rule applies to `iframe` elements that are [included in the accessibility tree][] and for which all of the following are true:
28-
- the `iframe` does not have a negative `tabindex` [attribute value][]; and
29-
- the `iframe` does not have an [explicit semantic role][] of `presentation` or `none`.
27+
This rule applies to `iframe` elements that are [included in the accessibility tree][] except if at least one of the following is true:
28+
29+
- the `iframe` has a negative `tabindex` [attribute value][]; or
30+
- the `iframe` is [marked as decorative][].
3031

3132
## Expectation
3233

@@ -41,14 +42,14 @@ If an `iframe` is not perceived by the user as a single control, it does not qua
4142
- Browser and assistive technology support for `iframe` elements is currently **inconsistent**. Some examples of inconsistencies include (but are not limited to):
4243
- There is a known combination of a popular browser and assistive technology that ignores `aria-label` and only announces `title` attribute as an [accessible name][]
4344
- Some assistive technologies ignore empty `iframe` elements, regardless of if they are focusable or if they have an accessible name.
44-
- Some browsers instantly redirect focus from `iframe` elements to the first focusable element inside that iframe. This redirect makes it appear as though the `iframe` never receives focus. This occurs even if the `iframe` has a non-negative `tabindex` [attribute value][].
45+
- Some browsers instantly redirect focus from `iframe` elements to the first focusable element inside that iframe. This redirect makes it appear as though the `iframe` never receives focus. This occurs even if the `iframe` has a non-negative `tabindex` [attribute value][].
4546
- Not all browsers redirect focus on `iframe` elements. This ensures that the contents of `iframe` elements can be scrolled and accessed by using the keyboard. This must not be circumvented by using a negative tabindex, as this will make the `iframe` completely inaccessible for keyboard navigation.
4647

4748
## Background
4849

4950
The `frame` element is deprecated, this rule does not consider `frame` or `frameset` elements.
5051

51-
Due to inconsistencies in handling focus on `iframe`, this rule ignores `iframe` elements for which there is an attempt to hide them from assistive technologies. Whether `iframe` elements that are inapplicable to this rule still require an accessible name varies between browsers.
52+
Due to inconsistencies in handling focus on `iframe`, this rule ignores `iframe` elements for which there is an attempt to hide them from assistive technologies. Whether `iframe` elements that are inapplicable to this rule still require an accessible name varies between browsers.
5253

5354
### Bibliography
5455

@@ -157,6 +158,7 @@ This `iframe` element has an [explicit semantic role][] of `none`.
157158
[accessible name and description computation]: https://www.w3.org/TR/accname
158159
[attribute value]: #attribute-value 'Definition of Attribute value'
159160
[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of included in the accessibility tree'
161+
[marked as decorative]: #marked-as-decorative 'Definition of Marked as Decorative'
160162
[sequential focus navigation]: https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation
161163
[user interface component]: https://www.w3.org/TR/WCAG21/#dfn-user-interface-components
162164
[whitespace]: #whitespace 'Definition of whitespace'

_rules/iframe-not-focusable-has-no-interactive-content-akn7bn.md renamed to _rules/iframe-with-interactive-content-in-tab-order-akn7bn.md

File renamed without changes.

‎_rules/scrollable-element-keyboard-accessible-0ssw9k.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
id: 0ssw9k
3-
name: Scrollable element is keyboard accessible
3+
name: Scrollable content can be reached with sequential focus navigation
44
rule_type: atomic
55
description: |
6-
This rule checks that scrollable elements can be scrolled by keyboard
6+
This rule checks that scrollable elements or their descendants can be reached with sequential focus navigation so that they can be scrolled by keyboard
77
accessibility_requirements:
88
wcag20:2.1.1: # Keyboard (A)
99
forConformance: true

‎_rules/sequentially-focusable-element-has-visible-focus-oj04fd.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ Default styling in user agents provides a focus indication for focusable element
4242

4343
WCAG 2.0 and 2.1 do not have any requirement of how big or small focus indicator should be, or how far or near from the [focusable][] element it should be. Thus it is possible to pass this rule and [Success Criterion 2.4.7 Focus Visible][sc247] with barely perceptible changes at the other end of the page. That would however still be an accessibility issue. WCAG 2.2 includes [Success Criterion 2.4.11 Focus Appearance][sc2411] and [Success Criterion 2.4.12 Focus Not Obscured (Minimum)][sc2412] specifying how big the focus indicator should be. All Passed Examples in this rule satisfy those success criteria.
4444

45-
WCAG does not require that the focus indicator for each [focusable][] element is unique in appearance. Therefore, this rule can pass even if several focus indicators are identical. Such a situation may nonetheless cause confusion and all Examples in this rule avoid it.
45+
WCAG does not require that the focus indicator for each [focusable][] element is unique in appearance. Therefore, this rule can pass even if several focus indicators are identical. Such a situation may nonetheless cause confusion and all examples in this rule avoid it.
4646

4747
### Bibliography
4848

‎_rules/table-header-cell-has-assigned-cells-d0f69e.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ input_aspects:
1717
acknowledgments:
1818
authors:
1919
- Audrey Maniez
20+
- Helen Burge
2021
- Jey Nandakumar
2122
funding:
2223
- WAI-Tools
@@ -125,15 +126,15 @@ Each of the 4 `th` elements has an assigned `td` element, within the same `table
125126
```html
126127
<table role="grid">
127128
<thead>
128-
<tr role="row">
129+
<tr>
129130
<td></td>
130131
<th scope="col" role="columnheader">Breakfast</th>
131132
<th scope="col" role="columnheader">Lunch</th>
132133
<th scope="col" role="columnheader">Dinner</th>
133134
</tr>
134135
</thead>
135136
<tbody>
136-
<tr role="row">
137+
<tr>
137138
<th scope="row" role="rowheader">Day 1</th>
138139
<td>8:00</td>
139140
<td>13:00</td>

‎_rules/text-contrast-afw4f7.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ For each test target, the [highest possible contrast][] between the [foreground
5757

5858
## Background
5959

60-
Passing this rule does not mean that the text has sufficient color contrast. If all background pixels have a low contrast with all foreground pixels, the success criterion is guaranteed to not be satisfied. When some pixels have sufficient contrast, and others do not, legibility should be considered. There is no clear method for determining legibility, which is why this is out of scope for this rule.
60+
Passing this rule does not mean that the text has sufficient color contrast. If all background pixels have a low contrast with all foreground pixels, the success criterion is guaranteed to not be satisfied. When some pixels have sufficient contrast, and others do not, legibility should be considered. There is no clear method for determining legibility when some but not all pixels have sufficient contrast, which is why passing this rule does not necessarily mean the corresponding success criterion is met.
6161

6262
This rule is designed specifically for [1.4.3 Contrast (Minimum)][sc143], which has the expected contrast ratio of 4.5:1 (or 3:1 for large text). Because text that fails a contrast ratio of 4.5:1 also fails a contrast ratio of 7:1, this rule maps to [1.4.6 Contrast (Enhanced)][sc146] as well. In order to adequately test the [expectation](#expectation), some of the passed examples do not satisfy [1.4.6 Contrast (Enhanced)][sc146].
6363

‎_rules/text-contrast-enhanced-09o5cg.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ For each test target, the [highest possible contrast][] between the [foreground
6262

6363
## Background
6464

65-
Passing this rule does not mean that the text has sufficient color contrast. If all background pixels have a low contrast with all foreground pixels, the success criterion is guaranteed to not be satisfied. When some pixels have sufficient contrast, and others do not, legibility should be considered. There is no clear method for determining legibility, which is why this is out of scope for this rule.
65+
Passing this rule does not mean that the text has sufficient color contrast. If all background pixels have a low contrast with all foreground pixels, the success criterion is guaranteed to not be satisfied. When some pixels have sufficient contrast, and others do not, legibility should be considered. There is no clear method for determining legibility when some but not all pixels have sufficient contrast, which is why passing this rule does not necessarily mean the corresponding success criterion is met.
6666

6767
When the text color or background color is not specified in the web page, colors from other [origins][] will be used. Testers must ensure colors are not affected by styles from a [user origin][], such as a custom style sheet. Contrast issues caused by specifying the text color but not the background or vice versa, must be tested separately from this rule.
6868

0 commit comments

Comments
 (0)