-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
new rule: ARIA required ID references exist (#2041)
* new rule: ARIA required ID references exist * Address review comments Co-authored-by: Carlos Duarte <[email protected]> * Apply suggestions from code review Co-authored-by: Jean-Yves Moyen <[email protected]> * Apply suggestions from code review Co-authored-by: Tom Brunet <[email protected]> Co-authored-by: Jean-Yves Moyen <[email protected]> * Update _rules/aria-required-id-references-in6db8.md * Apply suggestions from code review Co-authored-by: Carlos Duarte <[email protected]> --------- Co-authored-by: Carlos Duarte <[email protected]> Co-authored-by: Jean-Yves Moyen <[email protected]> Co-authored-by: Tom Brunet <[email protected]>
- Loading branch information
4 people
committed
Oct 13, 2023
1 parent
789c0bf
commit df25199
Showing
1 changed file
with
202 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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: | ||
|
|
||
| - <dfn>expanded combobox</dfn>: the element is a [semantic][] `combobox` with an `aria-expanded` [attribute value][] of `true`; or | ||
| - <dfn>scrollbar</dfn>: 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 | ||
| <main id="content">Lorem ipsum...</main> | ||
| <div | ||
| role="scrollbar" | ||
| aria-controls="content" | ||
| aria-orientation="vertical" | ||
| aria-valuemax="100" | ||
| aria-valuemin="0" | ||
| aria-valuenow="25" | ||
| ></div> | ||
| ``` | ||
|
|
||
| #### Passed Example 2 | ||
|
|
||
| The `aria-controls` [attribute value][] of this expanded `combobox` matches the `id` of the `ul` element in the same document. | ||
|
|
||
| ```html | ||
| <label for="tag_combo">Tag</label> | ||
| <input | ||
| type="text" | ||
| id="tag_combo" | ||
| role="combobox" | ||
| aria-expanded="true" | ||
| aria-controls="popup_listbox" | ||
| aria-activedescendant="selected_option" | ||
| /> | ||
| <ul role="listbox" id="popup_listbox"> | ||
| <li role="option">Zebra</li> | ||
| <li role="option" id="selected_option">Zoom</li> | ||
| </ul> | ||
| ``` | ||
|
|
||
| #### 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 | ||
| <main id="content-2">Lorem ipsum...</main> | ||
| <div | ||
| role="scrollbar" | ||
| aria-controls="content-1 content-2" | ||
| aria-orientation="vertical" | ||
| aria-valuemax="100" | ||
| aria-valuemin="0" | ||
| aria-valuenow="25" | ||
| ></div> | ||
| ``` | ||
|
|
||
| ### 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 | ||
| <label> | ||
| Tag | ||
| <input role="combobox" aria-expanded="true" aria-controls="popup_listbox" /> | ||
| </label> | ||
| ``` | ||
|
|
||
| #### 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 | ||
| <main>Lorem ipsum...</main> | ||
| <div | ||
| role="scrollbar" | ||
| aria-controls="content-1 content-2" | ||
| aria-orientation="vertical" | ||
| aria-valuemax="100" | ||
| aria-valuemin="0" | ||
| aria-valuenow="25" | ||
| ></div> | ||
| ``` | ||
|
|
||
| #### 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 | ||
| <div id="aria-listbox"> | ||
| <label for="tag_combo">Tag</label> | ||
| <input | ||
| type="text" | ||
| id="tag_combo" | ||
| role="combobox" | ||
| aria-expanded="true" | ||
| aria-controls="popup_listbox" | ||
| aria-activedescendant="selected_option" | ||
| /> | ||
| </div> | ||
| <script> | ||
| const ariaListbox = document.querySelector('#aria-listbox') | ||
| const shadowRoot = ariaListbox.attachShadow({ mode: 'open' }) | ||
| shadowRoot.innerHTML = ` | ||
| <slot></slot> | ||
| <ul role="listbox" id="popup_listbox"> | ||
| <li role="option">Zebra</li> | ||
| <li role="option" id="selected_option">Zoom</li> | ||
| </ul> | ||
| ` | ||
| </script> | ||
| ``` | ||
|
|
||
| ### 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 | ||
| <label for="tag_combo">Tag</label> | ||
| <input type="text" id="tag_combo" role="combobox" aria-expanded="false" aria-controls="popup_listbox" /> | ||
| ``` | ||
|
|
||
| #### Inapplicable Example 2 | ||
|
|
||
| This `aria-controls` attribute is not defined on a [semantic][] `scrollbar` nor `combobox`. | ||
|
|
||
| ```html | ||
| <button aria-controls="my-modal">Open the modal</button> | ||
| ``` | ||
|
|
||
| #### Inapplicable Example 3 | ||
|
|
||
| There is no `aria-controls` attribute. | ||
|
|
||
| ```html | ||
| <button>Open the modal</button> | ||
| ``` | ||
|
|
||
| [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' |