Skip to content

Update the aria-required-owned rule [bc4a75] to include the elements with implicit roles #2318

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: develop
Choose a base branch
from
Open

Update the aria-required-owned rule [bc4a75] to include the elements with implicit roles #2318

Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
4fe5eb3
update the examples for aria-required-owned rule
shunguoy Apr 1, 2025
834c355
update the test cases
shunguoy Apr 1, 2025
f80ebcb
fix syntax errors
shunguoy Apr 1, 2025
e248047
remove implicit/explicit from the description
shunguoy Apr 10, 2025
b10da17
add more Pass and Fail test cases
shunguoy Apr 10, 2025
ccb1ec2
fix formatting issue
shunguoy Apr 10, 2025
a209462
Merge branch 'develop' into aria-required-owned-bc4a75-syan
shunguoy Apr 10, 2025
9dc4c6d
add more test cases
shunguoy Apr 11, 2025
c723534
update the test cases
shunguoy Apr 11, 2025
5c5e282
remove unused explcit_semantic_role
shunguoy Apr 11, 2025
488c53a
Add one more Failed example
shunguoy May 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 86 additions & 11 deletions _rules/aria-required-owned-element-bc4a75.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ name: ARIA required owned elements
rules_format: 1.1
rule_type: atomic
description: |
This rule checks that an element with an explicit role that restricts which elements it can own only owns such elements.
This rule checks that an element with a semantic role that restricts which elements it can own only owns such elements.
accessibility_requirements:
wcag20:1.3.1: # Info and Relationships (A)
forConformance: true
Expand All @@ -27,7 +27,7 @@ acknowledgments:

## Applicability

This rule applies to any [HTML or SVG element][] that is [included in the accessibility tree][] and has a [WAI-ARIA 1.2][] [explicit semantic role][] with [required owned elements][], except if the element has an [inclusive ancestor][] in the accessibility tree with an `aria-busy` [attribute value][] of `true`.
This rule applies to any [HTML or SVG element][] that is [included in the accessibility tree][] and has a [WAI-ARIA 1.2][] [semantic role][] with [required owned elements][], except if the element has an [inclusive ancestor][] in the accessibility tree with an `aria-busy` [attribute value][] of `true`.

## Expectation

Expand All @@ -45,7 +45,7 @@ The applicability of this rule is limited to the [WAI-ARIA 1.2 Recommendation][w

### Assumptions

If the [explicit semantic role][] on the target element is incorrectly used, and any relationships between elements are already programmatically determinable, failing this rule may not result in accessibility issues for users of assistive technologies, and it should then not be considered a failure under [WCAG success criterion 1.3.1 Info and Relationships](https://www.w3.org/TR/WCAG22/#info-and-relationships).
If the [semantic role][] on the target element is incorrectly used, and any relationships between elements are already programmatically determinable, failing this rule may not result in accessibility issues for users of assistive technologies, and it should then not be considered a failure under [WCAG success criterion 1.3.1 Info and Relationships](https://www.w3.org/TR/WCAG22/#info-and-relationships).

### Accessibility Support

Expand Down Expand Up @@ -93,16 +93,16 @@ This element with the `menu` role only owns elements with the `menuitem`, `menui

```html
<div role="menu">
<li role="none"></li>
<li role="menuitem">Item 1</li>
<div role="none"></div>
<div role="menuitem">Item 1</div>
Comment on lines -96 to +97
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see no reason to change this. This is an important example to demonstrate explicit roles override implicit ones.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change was in the original suggestion, I didn't hear objection during the discussion (I could be wrong). Per HTML 5, the li can only be used as a child of ul, ol, or menu. Otherwise, no list relationship is defined:

The li element represents a list item. If its parent element is an ol, ul, or menu element, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.

This change is to make sure no confusion on the relationship, and maintain the purpose of the example at the same time.

<div role="menuitemradio" aria-checked="false">Item 2</div>
<div role="menuitemcheckbox" aria-checked="false">Item 3</div>
</div>
```

#### Passed Example 4

This element with the `tablist` role only owns elements with the `tab` role. The `tab` role is one of the [required owned elements][] for `tablist`. The `li` element is ignored because it has an [explicit semantic role][] of `none`.
This element with the `tablist` role only owns elements with the `tab` role. The `tab` role is one of the [required owned elements][] for `tablist`. The `li` element is ignored because it has an [semantic role][] of `none`.

```html
<ul role="tablist">
Expand Down Expand Up @@ -139,6 +139,56 @@ This element with the `menu` role only owns an element with a `group` role. The
</div>
```

#### Passed Example 7

The element `ul` with an implicit `list` role owns an element `li` with an implicit `listitem` role.

```html
<ul>
<li>Item 1</li>
</ul>
```

#### Passed Example 8

The element `select` with an implicit `listbox` role owns elements `option` with implicit `option` roles.

```html
<select multiple>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
```

#### Passed Example 9

The element `table` with an implicit `table` role owns an element `tr` with implicit `row` role that in turn owns elements `td` with implicit `cell` roles.

```html
<table>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
</table>
```

#### Passed Example 10

The element `table` with an explicit `treegrid` role owns an element `tr` with implicit `row` role that in turn owns elements `td` with implicit `gridcell` roles.

```html
<table role="treegrid" aria-label="a test grid">
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
</table>
```

### Failed

#### Failed Example 1
Expand Down Expand Up @@ -225,6 +275,32 @@ This element with the `list` role owns an element with the `listitem` role and a
</div>
```

#### Failed Example 8

This element with the `menu` role owns `option` elements with implicit `option` role. The `option` role is not one of the [required owned elements][] for `menu`.

```html
<select role="menu" aria-label="a test menu">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
```

#### Failed Example 9

This element with the `menu` role owns `tr` elements with an explicit `list` role. The `list` role is not one of the [required owned elements][] for `menu`. In addition, the `tr` element with the explicit `list` role owns `td` elements with explicit `menuitem` roles. The `menuitem` role is not one of the [required owned elements][] for `list`.

```html
<table role="menu" aria-label="a test table" aria-activedescendant="item1" tabindex="0">
<tr role="list">
<td id="item1" role="menuitem">Item 1</td>
<td id="item2" role="menuitem">Item 2</td>
<td id="item3" role="menuitem">Item 3</td>
</tr>
</table>
```

### Inapplicable

#### Inapplicable Example 1
Expand All @@ -237,12 +313,12 @@ This element with the `list` role is not included in the accessibility tree beca

#### Inapplicable Example 2

This `ul` element does not have an [explicit semantic role][].
This `div` element with the `list` role is not included in the accessibility tree because it is hidden .

```html
<ul>
<li>Item 1</li>
</ul>
<div role="list" hidden>
<div role="listitem">Item 1</div>
</div>
```

#### Inapplicable Example 3
Expand All @@ -269,7 +345,6 @@ This element with the `menu` role has an `aria-busy` attribute set to `true`.
[required owned elements]: https://www.w3.org/TR/wai-aria-1.2/#mustContain 'Define Required owned element'
[owns]: #owned-by
[owned by]: #owned-by
[explicit semantic role]: #explicit-role
[semantic role]: #semantic-role
[included in the accessibility tree]: #included-in-the-accessibility-tree
[wai-aria 1.2]: https://www.w3.org/TR/wai-aria-1.2/
Expand Down