Skip to content
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.

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

Rule: ARIA required context role (ff89c9) #255

Merged
merged 74 commits into from
Nov 25, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
74 commits
Select commit Hold shift + click to select a range
4b2cd9a
Create SC1-3-1-aria-required-context-role.md
Sep 14, 2018
bdbfbeb
Update SC1-3-1-aria-required-context-role.md
Sep 15, 2018
f80607d
Editorial update per feedback
Oct 3, 2018
409bb9a
Removed test case per feedback
Oct 3, 2018
8f79ac6
Update to Accessibility Support
Oct 3, 2018
4f4701d
Cleaner WAI-ARIA references
Oct 5, 2018
7b43dde
Editorials per feedback from Kasper
Oct 18, 2018
2ac617f
Create owner-element.md
Jan 22, 2019
ded2be6
Update owner-element.md
Jan 22, 2019
8a81b50
Update rule to use new Owner element definition
Jan 22, 2019
1542f48
Update owner-element.md
Jan 22, 2019
b9b79a8
chore: merge from master
jeeyyy Jan 22, 2019
8bf6038
Update included-in-the-accessibility-tree.md
Jan 22, 2019
dfc56b2
Update owner-element.md
Jan 22, 2019
c2ccbc1
Removed role="none"/"presentation"
Jan 22, 2019
35d480e
Updated test cases to match new definitions
Jan 22, 2019
9835b44
Add note about divergence from WAI-ARIA spec
Jan 22, 2019
d92d89c
Update SC1-3-1-aria-required-context-role.md
Jan 22, 2019
16f50c7
Editorials
Jan 22, 2019
47e4ce5
`aria-owns` support added to Accessibility Support
Feb 12, 2019
96472af
Test case moved from Failed to Inapplicable
Feb 12, 2019
0785f09
Changed "element" to "node"
Feb 12, 2019
9c81dcd
Disclaimer notes inserted
Feb 12, 2019
52a4b1e
Note added on hiding elements
Feb 12, 2019
4339973
Editorials per Wilco's comments
Mar 5, 2019
5c7b137
Updating to account for competing owned elements
Mar 6, 2019
127beb4
Adding links to definitions
Mar 6, 2019
473016f
Added link to definition
Mar 6, 2019
b952555
Rule updated to use new "owned by" definition
Mar 6, 2019
dc50845
Reverting changes to "included in the acc. tree"
Mar 6, 2019
542090d
Added inapplicable test case
Mar 6, 2019
31a7bf1
Added Passed test case
Mar 7, 2019
576eb0d
New assumption: role being used to comply to WCAG
Mar 7, 2019
c031c89
Further elaboration of assumption
Mar 7, 2019
8d08752
Editorials per Kasper's comments
Mar 21, 2019
08069fa
Fix incorrect code and descriptions in test cases
Apr 23, 2019
7578413
Accessibility Support note on empty elements
Apr 23, 2019
b360785
Editorial: Slight rewording of Expectation
May 1, 2019
4b13b65
Add id to frontmatter of rule
May 1, 2019
922d3e8
Update template + editorials + note for Appl.
Jun 7, 2019
33d0f44
Now tree-crossing ownership for implicit ownership
Jun 12, 2019
e9f8a8a
Added test cases crossing shadow boundaries
Jun 12, 2019
1a6d693
Extended description for shadow DOM test cases
Jun 13, 2019
9a6da41
Update SC1-3-1-aria-required-context-role.md
Brynanders Jul 3, 2019
6839767
Merge branch 'develop' into sc1-3-1-aria-required-context-role
jeeyyy Jul 3, 2019
376ce5f
Editorials
Jul 10, 2019
9b73e57
Editorial: plural for consistency
Jul 12, 2019
87777d3
Change test case description to match test case
Jul 12, 2019
476a2e6
Merge branch 'develop' into sc1-3-1-aria-required-context-role
jeeyyy Jul 17, 2019
4ff8e00
Rename SC1-3-1-aria-required-context-role.md to aria-required-context…
jeeyyy Jul 17, 2019
b7e25e0
Insert link to Understanding 1.3.1 document
Jul 18, 2019
c41e314
Add example to Appl. + change definition links
Jul 26, 2019
78169f8
Remove `slot` element from Passed Example 6
Jul 26, 2019
ee977ac
Add content to elements + Add new test case
Jul 26, 2019
c41dfe3
More links to "explicit-role" def. + fix typo
Aug 5, 2019
8f62229
Expectation: Note on superclass/subclass roles
Aug 6, 2019
32b92de
Edit subclass inclusion in required context roles
Aug 13, 2019
07ba91a
Add note about descoping DPUB from applicability
Aug 13, 2019
191b5cc
Adding inapplicable DPUB test case
Aug 14, 2019
c4e760e
Merge branch 'develop' into sc1-3-1-aria-required-context-role
jeeyyy Aug 14, 2019
f152e32
chore: merge from develop
jeeyyy Aug 14, 2019
8262e3a
Rename owner-element.md to owned-by.md
Aug 16, 2019
4efedba
Remove note + inclusion i acc. tree for point 1
Aug 16, 2019
1af2679
Editorials + change test cases
Aug 16, 2019
45f5648
Changing Passed Example 5 to pass SC 1.3.1
Aug 21, 2019
ca84d89
Merge branch 'develop' into sc1-3-1-aria-required-context-role
WilcoFiers Sep 25, 2019
89aee3c
Merge branch 'develop' into sc1-3-1-aria-required-context-role
Jym77 Oct 18, 2019
f4f5188
chore: update rule to use accessibility tree as input
WilcoFiers Nov 1, 2019
5b45798
Merge branch 'develop' into sc1-3-1-aria-required-context-role
WilcoFiers Nov 1, 2019
e3db62e
chore: fix failing tests
WilcoFiers Nov 1, 2019
5cbc373
Apply suggestions from code review
WilcoFiers Nov 13, 2019
7362c00
Merge branch 'develop' into sc1-3-1-aria-required-context-role
WilcoFiers Nov 13, 2019
5db02eb
Update aria-required-context-role-ff89c9.md
WilcoFiers Nov 13, 2019
b8519e1
Merge branch 'develop' into sc1-3-1-aria-required-context-role
jeeyyy Nov 20, 2019
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
11 changes: 11 additions & 0 deletions __tests__/spelling-ignore.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@
- html
- iframe
- img
- ul
- ol
- dl
- li
- dd
- dt
- frameset
- h1
- h1-h6
Expand All @@ -32,6 +38,7 @@
- DOM
- SVG
- PDFs
- DPUB
- url
- voiceover
- subtag
Expand Down Expand Up @@ -95,6 +102,10 @@
- searchbox
- treeitem
- listbox
- listitem
- tablist
- tabpanel
- doc-biblioentry
- textbox
- autocomplete
- textarea
Expand Down
229 changes: 229 additions & 0 deletions _rules/aria-required-context-role-ff89c9.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
---
id: ff89c9
name: ARIA required context role
rule_type: atomic
description: |
This rule checks that an element with an explicit semantic role exists inside its required context.
accessibility_requirements:
wcag20:1.3.1: # Info and Relationships (A)
forConformance: true
failed: not satisfied
passed: further testing needed
inapplicable: further testing needed
input_aspects:
- Accessibility tree
- DOM Tree
acknowledgements:
authors:
- Wilco Fiers
- Brian Bors
previous_authros:
- Anne Thyme Nørregaard
---

## Applicability

The rule applies to any HTML or SVG element that is [included in the accessibility tree](#included-in-the-accessibility-tree) and has a [WAI-ARIA 1.1](https://www.w3.org/TR/wai-aria-1.1/) [explicit semantic role](#explicit-role) with a [WAI-ARIA required context role](https://www.w3.org/TR/wai-aria-1.1/#scope), except if the element has an [implicit semantic role](#implicit-role) that is identical to its [explicit semantic role](#explicit-role).
annethyme marked this conversation as resolved.
Show resolved Hide resolved
Jym77 marked this conversation as resolved.
Show resolved Hide resolved

**Note:** An example of an element that has a [WAI-ARIA required context role](https://www.w3.org/TR/wai-aria-1.1/#scope) is `tab` that has `tablist` as a [required context role](https://www.w3.org/TR/wai-aria-1.1/#scope).

**Note:** An example of an element that has an [implicit semantic role](#implicit-role) that is identical to its [explicit semantic role](#explicit-role) is an `li` element that has `role="listitem"`. These elements are not applicable.

**Note:** The applicability of this rule is limited to only the [WAI-ARIA 1.1 Recommendation](https://www.w3.org/TR/wai-aria-1.1/) roles, since there are unresolved issues with how [Digital Publishing WAI-ARIA Module (DPUB ARIA) 1.0](https://www.w3.org/TR/dpub-aria-1.0/) uses role inheritance to define the [required context roles](https://www.w3.org/TR/wai-aria-1.1/#scope), which makes it deviate from the model defined in [WAI-ARIA 1.1](https://www.w3.org/TR/wai-aria-1.1/). The [WAI-ARIA Graphics Module](https://www.w3.org/TR/graphics-aria-1.0/) does not include any [required context roles](https://www.w3.org/TR/wai-aria-1.1/#scope).

## Expectation

Each test target is [owned by](#owned-by) an element that has a [semantic role](#semantic-role) that is one of the [WAI-ARIA required context roles](https://www.w3.org/TR/wai-aria-1.1/#scope) of the target element.

**Note:** The definition of [owned by](#owned-by) used in this rule is different than the definition of ["owned element" in WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#dfn-owned-element). See more in the [owned by](#owned-by) definition.

**Note:** [Subclass roles](https://www.w3.org/TR/wai-aria-1.1/#subclassroles) of [WAI-ARIA required context roles](https://www.w3.org/TR/wai-aria-1.1/#scope) are not automatically included as possible [required context roles](https://www.w3.org/TR/wai-aria-1.1/#scope). E.g. the [`feed`](https://www.w3.org/TR/wai-aria-1.1/#feed) role is not a possible [required context role](https://www.w3.org/TR/wai-aria-1.1/#scope) for [`listitem`](https://www.w3.org/TR/wai-aria-1.1/#listitem), even though [`feed`](https://www.w3.org/TR/wai-aria-1.1/#feed) is a [subclass role](https://www.w3.org/TR/wai-aria-1.1/#subclassroles) of the [`list`](https://www.w3.org/TR/wai-aria-1.1/#list) role.

annethyme marked this conversation as resolved.
Show resolved Hide resolved
## Assumptions

If the [explicit semantic role](#explicit-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/WCAG21/#info-and-relationships).

## Accessibility Support

- User agents do not all have the same accessibility tree. Particularly the method of deriving which element owns which other elements varies between browsers. This can lead to different results for this rule, depending on which accessibility tree is used as input.
- `aria-owns` has limited support in some user agents.

## Background

- [Understanding Success Criterion 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)
- [Required Context Role](https://www.w3.org/TR/wai-aria-1.1/#scope)

This comment was marked as resolved.

This comment was marked as resolved.


## Test Cases

### Passed

This comment was marked as resolved.

This comment was marked as resolved.

Jym77 marked this conversation as resolved.
Show resolved Hide resolved

#### Passed Example 1

Element with [explicit semantic role](#explicit-role) `listitem` is contained within its [required context role](https://www.w3.org/TR/wai-aria-1.1/#scope) `list`, expressed as an [explicit semantic role](#explicit-role).
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
Element with [explicit semantic role](#explicit-role) `listitem` is contained within its [required context role](https://www.w3.org/TR/wai-aria-1.1/#scope) `list`, expressed as an [explicit semantic role](#explicit-role).
The `div` element with an [explicit semantic role](#explicit-role) `listitem` is contained within its [required context role](https://www.w3.org/TR/wai-aria-1.1/#scope) `list`, expressed as an [explicit semantic role](#explicit-role).

Copy link
Member

Choose a reason for hiding this comment

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

Unnecessary.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Can we at least go for

Suggested change
Element with [explicit semantic role](#explicit-role) `listitem` is contained within its [required context role](https://www.w3.org/TR/wai-aria-1.1/#scope) `list`, expressed as an [explicit semantic role](#explicit-role).
The element with an [explicit semantic role](#explicit-role) of `listitem` is contained within its [required context role](https://www.w3.org/TR/wai-aria-1.1/#scope) of `list`, expressed as an [explicit semantic role](#explicit-role).

in order to make it a proper English sentence.


```html
<div role="list">
<div role="listitem">List item 1</div>
</div>
```

#### Passed Example 2

Element with [explicit semantic role](#explicit-role) `listitem` is contained within its [required context role](https://www.w3.org/TR/wai-aria-1.1/#scope) `list`, through the [implicit semantic role](#implicit-role) of `ul`.
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
Element with [explicit semantic role](#explicit-role) `listitem` is contained within its [required context role](https://www.w3.org/TR/wai-aria-1.1/#scope) `list`, through the [implicit semantic role](#implicit-role) of `ul`.
The `div` element with an [explicit semantic role](#explicit-role) `listitem` is contained within its [required context role](https://www.w3.org/TR/wai-aria-1.1/#scope) `list`, through the [implicit semantic role](#implicit-role) of the `ul` element.


```html
<ul>
<div role="listitem">List item 1</div>
</ul>
```

#### Passed Example 3

Element contained within its [required context role](https://www.w3.org/TR/wai-aria-1.1/#scope) even though it is not a direct child of the [context role](https://www.w3.org/TR/wai-aria-1.1/#scope).
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
Element contained within its [required context role](https://www.w3.org/TR/wai-aria-1.1/#scope) even though it is not a direct child of the [context role](https://www.w3.org/TR/wai-aria-1.1/#scope).
The intermediate `div` element is removed from the [accessibility tree](#accessibility-tree) through the `role="presentation"`. Thus, the innermost `div` element is [owned by](#owned-by) the outermost one even though it is not its direct DOM child, and is thus contained within its [required context role](https://www.w3.org/TR/wai-aria-1.1/#scope).


```html
<div role="list">
<div role="presentation">
<div role="listitem">List item 1</div>
</div>
</div>
```

#### Passed Example 4

`aria-owns` used to give the target element the right [context role](https://www.w3.org/TR/wai-aria-1.1/#scope).
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
`aria-owns` used to give the target element the right [context role](https://www.w3.org/TR/wai-aria-1.1/#scope).
The second `div` (`item`) is owned by the first one through the `aria-owns` attribute. Hence the target element has the right [context role](https://www.w3.org/TR/wai-aria-1.1/#scope).


```html
<div role="list" aria-owns="item"></div>
<div id="item" role="listitem">List item 1</div>
```

#### Passed Example 5
Jym77 marked this conversation as resolved.
Show resolved Hide resolved

The `aria-owns` attribute override normal DOM tree relationship. Thus, the innermost `div` element (`item`) is not owned by the intermediate one (with a `role="navigation"`) and has the correct [context role](https://www.w3.org/TR/wai-aria-1.1/#scope).

```html
<div role="list" aria-owns="item">
<div role="navigation">
<div id="item" role="listitem">List item 1</div>
</div>
</div>
```

#### Passed Example 6

Since implicit ownership can cross shadow boundaries, the element with the [explicit semantic role](#explicit-role) of `listitem` is contained within its [required context role](https://www.w3.org/TR/wai-aria-1.1/#scope) of `list`.

```html
<div id="host" role="list"></div>

<script>
const host = document.querySelector('#host')
const root = host.attachShadow({ mode: 'open' })
root.innerHTML = '<div role="listitem">List item 1</div>'
</script>
```

### Failed

#### Failed Example 1

The `listitem` has no [context role](https://www.w3.org/TR/wai-aria-1.1/#scope).
Jym77 marked this conversation as resolved.
Show resolved Hide resolved

```html
<div role="listitem">List item 1</div>
```

#### Failed Example 2

The `listitem` is owned by the `tabpanel`, because it is the closest ancestor, but `tabpanel` is not the correct [context](https://www.w3.org/TR/wai-aria-1.1/#scope) for `listitem`.
Jym77 marked this conversation as resolved.
Show resolved Hide resolved

```html
<div role="list">
<div role="tabpanel">
<div role="listitem">List item 1</div>
</div>
</div>
```

#### Failed Example 3

The `listitem` is owned by the `aria-label="menu"` div, rather than the `list`.
Jym77 marked this conversation as resolved.
Show resolved Hide resolved

```html
<div role="list">
<div aria-label="menu">
Jym77 marked this conversation as resolved.
Show resolved Hide resolved
<div role="listitem">List item 1</div>
</div>
</div>
Jym77 marked this conversation as resolved.
Show resolved Hide resolved
```

#### Failed Example 4

Since explicit ownership cannot cross shadow boundaries, the element with the [explicit semantic role](#explicit-role) of `listitem` does not have a [context role](https://www.w3.org/TR/wai-aria-1.1/#scope).

```html
<div role="list" aria-owns="item"></div>

<div id="host"></div>

<script>
const host = document.querySelector('#host')
const root = host.attachShadow({ mode: 'open' })
root.innerHTML = '<div id="item" role="listitem">List item 1</div>'
</script>
```

### Inapplicable

#### Inapplicable Example 1

There is no element with an [explicit semantic role](#explicit-role).

```html
<ul>
<li>List item 1</li>
</ul>
```
Jym77 marked this conversation as resolved.
Show resolved Hide resolved

#### Inapplicable Example 2

The `listitem` is not [included in the accessibility tree](#included-in-the-accessibility-tree).
Jym77 marked this conversation as resolved.
Show resolved Hide resolved

```html
<div role="listitem" style="display:none;">List item 1</div>
```

#### Inapplicable Example 3

The `header` role does not have a [required context role](https://www.w3.org/TR/wai-aria-1.1/#scope).

```html
<div role="header" aria-level="1">Hello!</div>
<p>Welcome to my homepage!</p>
```

#### Inapplicable Example 4

The `listitem` has an [explicit semantic role](#explicit-role), but it is identical to the [implicit semantic role](#implicit-role), making the element inapplicable.
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
The `listitem` has an [explicit semantic role](#explicit-role), but it is identical to the [implicit semantic role](#implicit-role), making the element inapplicable.
The `li` element has an [explicit semantic role](#explicit-role), but it is identical to its [implicit semantic role](#implicit-role), making the element inapplicable.

Copy link
Collaborator

Choose a reason for hiding this comment

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

I'd still use

Suggested change
The `listitem` has an [explicit semantic role](#explicit-role), but it is identical to the [implicit semantic role](#implicit-role), making the element inapplicable.
The `listitem` has an [explicit semantic role](#explicit-role), but it is identical to its [implicit semantic role](#implicit-role), making the element inapplicable.


```html
<ul>
<li role="listitem">List item 1</li>
</ul>
```
Jym77 marked this conversation as resolved.
Show resolved Hide resolved

#### Inapplicable Example 5

The `doc-biblioentry` has a role from the [Digital Publishing WAI-ARIA Module (DPUB ARIA) 1.0](https://www.w3.org/TR/dpub-aria-1.0/), not the [WAI-ARIA 1.1 Recommendation](https://www.w3.org/TR/wai-aria-1.1/), and it is therefore inapplicable.
Jym77 marked this conversation as resolved.
Show resolved Hide resolved

```html
<section role="doc-bibliography">
<h1>Cited Works</h1>
<div role="list">
<p role="doc-biblioentry" id="b8cab5dd-bc24-459c-9858-7afa9da69b64">
John Steinbeck, The Grapes of Wrath (New York: The Viking Press, 1939)
</p>
</div>
</section>
```
8 changes: 8 additions & 0 deletions pages/glossary/owned-by.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: Owned by
key: owned-by
---

An element A is owned by element B if element A is a child of element B in the [accessibility tree](https://www.w3.org/TR/act-rules-aspects/#input-aspects-accessibility).
Jym77 marked this conversation as resolved.
Show resolved Hide resolved
Jym77 marked this conversation as resolved.
Show resolved Hide resolved

> **Note:** This definition is different from the definition of ["owned element" in WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#dfn-owned-element). Because browsers have different accessibility trees, which element owns which other elements can vary between browsers. Until there is a standard accessibility tree, testing with multiple accessibility trees may be necessary.