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

Split aria-state-or-property-permitted-5c01ea.md #2036

Open
wants to merge 12 commits into
base: develop
Choose a base branch
from
150 changes: 150 additions & 0 deletions _rules/aria-state-or-property-not-prohibited.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
---
id:
name: ARIA state or property is not prohibited
rule_type: atomic
description: |
This rule checks that WAI-ARIA states or properties are not prohibited for the element they are specified on.
accessibility_requirements:
wcag-technique:ARIA5: # Using WAI-ARIA state and property attributes to expose the state of a user interface component
forConformance: false
failed: not satisfied
passed: further testing needed
inapplicable: further testing needed
aria12:state_property_processing:
title: ARIA 1.2, 8.6 State and Property Attribute Processing
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:
- Accessibility Tree
- CSS styling
- DOM Tree
acknowledgments:
authors:
- Anne Thyme Nørregaard
- Jean-Yves Moyen
- Trevor Bostic
Copy link
Collaborator Author

@tbostic32 tbostic32 Apr 5, 2023

Choose a reason for hiding this comment

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

Should I keep all of the authors? Much of the content was created by Anne and Jean-Yves so I want to make sure proper credit is given, but not have people feel like I am putting words in their mouth.

Copy link
Member

Choose a reason for hiding this comment

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

It's a significant change. Probably better to put them under previous_authors

funding:
- WAI-Tools
assets:
- JFK's "We Choose the Moon" speech excerpt is courtesy of NASA.
---

## Applicability

This rule applies to any [WAI-ARIA state or property][] that is specified on an [HTML or SVG element][namespaced element] that is [included in the accessibility tree][].

## Expectation

No test target (i.e., state or property) is prohibited on the semantic role of the element on which it is specified.

## Assumptions

There are no assumptions.

## Accessibility Support

Implementation of [Presentational Roles Conflict Resolution][] varies from one browser or assistive technology to another. Depending on this, some elements can have a [semantic role][] of `none` and their attributes fail this rule with some technologies but users of other technology would not experience any accessibility issue.

## Background

The presence of prohibited ARIA attributes is often the result of a developer using an incorrect role, or a misunderstanding of the attribute. These attributes are ignored by browsers and other assistive technologies. This often means that a state or property which should exist is missing. This can cause issues under success criterion [1.3.1 Info and Relationships][sc131] or [4.1.2 Name, Rule Value][sc412].

Assessing the value of the attribute is out of scope for this rule.

### Related rules

- [ARIA state or property has valid value](https://www.w3.org/WAI/standards-guidelines/act/rules/6a7281/proposed/)
- [ARIA state or property is permitted](https://www.w3.org/WAI/standards-guidelines/act/rules/5c01ea/proposed/)

### Bibliography

- [Understanding Success Criterion 4.1.1: Parsing](https://www.w3.org/WAI/WCAG21/Understanding/parsing.html)
- [Understanding Success Criterion 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html)
- [WAI-ARIA 1.2, Supported States and Properties](https://www.w3.org/TR/wai-aria-1.2/#states_and_properties)
- [WAI-ARIA 1.2, Global States and Properties](https://www.w3.org/TR/wai-aria-1.2/#global_states)
- [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)
- [Document conformance requirements for use of ARIA attributes in HTML](https://www.w3.org/TR/html-aria/#docconformance)

## Test Cases

### Passed

#### Passed Example 1

The `aria-pressed` [state][] is [supported][] with `button`, which is the [implicit role][] for `button` elements.

```html
<button aria-pressed="false">My button</button>
```

#### Passed Example 2

The `aria-pressed` [state][] is [supported][] with `button`, which is the [explicit role][] of this `div` element.

```html
<div role="button" aria-pressed="false">My button</div>
```

### Failed

#### Failed Example 1

The `aria-label` property is [prohibited](https://www.w3.org/TR/wai-aria-1.2/#prohibitedattributes) for an element with a generic role.
```html
<div aria-label="Bananas"></div>
```

#### Failed Example 2
The `aria-labelledby` property is [prohibited](https://www.w3.org/TR/wai-aria-1.2/#prohibitedattributes) for an element with an emphasis role.
```html
<label id="importance">A very important fruit</label>
<p><em aria-labelledby="importance">Bananas</em> are a great fruit</p>
```

#### Failed Example 3
The `aria-roledescription` property is [prohibited](https://www.w3.org/TR/wai-aria-1.2/#prohibitedattributes) for an element with a generic role.
```html
<div aria-roledescription="fruit"><p>Banana</p></div>
```

### Inapplicable

#### Inapplicable Example 1

This `div` element has no [WAI-ARIA state or property][].

```html
<div role="region">A region of content</div>
```

#### Inapplicable Example 2

This `div` element is not [included in the accessibility tree][], hence its [WAI-ARIA state or property][] is not checked.

```html
<div role="button" aria-sort="" style="display:none;"></div>
```

[attribute value]: #attribute-value 'Definition of attribute value'
[explicit role]: #explicit-role 'Definition of Explicit Role'
[focusable]: #focusable 'Definition of focusable'
[global]: https://www.w3.org/TR/wai-aria-1.2/#global_states 'Definition of Global ARIA States and Properties'
[implicit role]: #implicit-role 'Definition of Implicit Role'
[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in the Accessibility Tree'
[inherited]: https://www.w3.org/TR/wai-aria-1.2/#inheritedattributes 'Definition of Inherited ARIA States and Properties'
[presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.2/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution'
[property]: https://www.w3.org/TR/wai-aria-1.2/#dfn-property 'Definition of ARIA Property'
[required]: https://www.w3.org/TR/wai-aria-1.2/#requiredState 'Definition of Required ARIA States and Properties'
[semantic role]: #semantic-role 'Definition of Semantic Role'
[state]: https://www.w3.org/TR/wai-aria-1.2/#dfn-state 'Definition of ARIA State'
[supported]: https://www.w3.org/TR/wai-aria-1.2/#supportedState 'Definition of Supported ARIA States and Properties'
[wai-aria state or property]: https://www.w3.org/TR/wai-aria-1.2/#state_prop_def 'Definition of ARIA States and Properties'
[namespaced element]: #namespaced-element
[sc131]: https://www.w3.org/TR/WCAG21/#info-and-relationships
[sc412]: https://www.w3.org/TR/WCAG21/#name-role-value
20 changes: 2 additions & 18 deletions _rules/aria-state-or-property-permitted-5c01ea.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ acknowledgments:
authors:
- Anne Thyme Nørregaard
- Jean-Yves Moyen
- Trevor Bostic
funding:
- WAI-Tools
assets:
Expand All @@ -46,10 +47,6 @@ For each test target, one of the following is true:
- **semantic role**: the test target is an [inherited][], [supported][], or [required][] [state][] or [property][] of the [semantic role][] of the element on which the test target is specified; or
- **language feature**: the test target is specified on an [HTML element][namespaced element] and is allowed on that element. Which ARIA states or properties may be used on which element is described in [ARIA in HTML](https://w3c.github.io/html-aria/).

## Expectation 2

No test target is [prohibited][] on the [semantic role][] of the element on which it is specified.

## Assumptions

There are no assumptions.
Expand All @@ -60,8 +57,6 @@ Implementation of [Presentational Roles Conflict Resolution][] varies from one b

## Background

The presence of prohibited ARIA attributes is often the result of a developer using an incorrect role, or a misunderstanding of the attribute. These attributes are ignored by browsers and other assistive technologies. This often means that a state or property which should exist is missing. This can cause issues under [success criterion 1.3.1 Info and Relationships][sc131] or [4.1.2 Name, Rule Value][sc412].

In HTML, there are language features that do not have corresponding implicit WAI-ARIA semantics. As per [ARIA in HTML](https://www.w3.org/TR/html-aria/), those elements can have [global states or properties][global]. Some of those elements can also have [inherited][], [supported][], or [required][] [states][state] or [properties][property] that correspond to a [WAI-ARIA role](https://www.w3.org/TR/wai-aria-1.2/#introroles). For example, the `audio` element has no corresponding ARIA semantics but it can have [inherited][], [supported][], or [required][] [states][state] or [properties][property] of the [`application` role](https://www.w3.org/TR/wai-aria-1.2/#application).

Assessing the value of the attribute is out of scope for this rule.
Expand Down Expand Up @@ -177,7 +172,7 @@ This `input` element does not have an [explicit role][] of `textbox`, but the `a

#### Failed Example 1

The `aria-sort` [property][] may not be used on a [semantic][semantic role]] `button`.
The `aria-sort` [property][] may not be used on a [semantic][semantic role] `button`.

```html
<button aria-sort="">Sort by year</button>
Expand All @@ -191,14 +186,6 @@ The `aria-orientation` property may not be used on `audio` element, nor can it b
<audio src="/test-assets/moon-audio/moon-speech.mp3" controls aria-orientation="horizontal"></audio>
```

#### Failed Example 3

The `aria-label` property is [prohibited][] for an element with a `generic` role.

```html
<div aria-label="Bananas"></div>
```

### Inapplicable

#### Inapplicable Example 1
Expand Down Expand Up @@ -232,6 +219,3 @@ This `div` element is not [included in the accessibility tree][], hence its [WAI
[supported]: https://www.w3.org/TR/wai-aria-1.2/#supportedState 'Definition of Supported ARIA States and Properties'
[wai-aria state or property]: https://www.w3.org/TR/wai-aria-1.2/#state_prop_def 'Definition of ARIA States and Properties'
[namespaced element]: #namespaced-element
[prohibited]: https://www.w3.org/TR/wai-aria-1.2/#prohibitedattributes 'WAI-ARIA 1.2 Definition of Prohibited States and Properties'
[sc131]: https://www.w3.org/TR/WCAG21/#info-and-relationships
[sc412]: https://www.w3.org/TR/WCAG21/#name-role-value
4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,10 @@
"name": "Stein Erik Skotkjerra",
"url": "https://github.com/skotkjerra"
},
{
"name": "Trevor Bostic",
"url": "https://github.com/tbostic32"
},
{
"name": "Wilco Fiers",
"url": "https://github.com/wilcofiers"
Expand Down