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

Update aria-state-or-property-permitted-5c01ea.md #1612

Merged
merged 10 commits into from
Jun 24, 2021
25 changes: 22 additions & 3 deletions _rules/aria-state-or-property-permitted-5c01ea.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,7 @@ This rule applies to any [WAI-ARIA state or property][] that is specified on an

## Expectation

Each test target is either an [inherited][], [supported][], or [required][] [state][] or [property][] of the [semantic role][] of the element on which the attribute is specified. If the element has no [semantic role][], the attribute must be a [global state or property][global].

**Note:** Assessing the value of the attribute is out of scope for this rule.
Each test target is either an [inherited][], [supported][], or [required][] [state][] or [property][] for the element's [semantic role][] or the [WAI-ARIA state or property][] may be used on the language feature. If the element has no [semantic role][], the attribute must be a [global state or property][global].
Copy link
Collaborator

Choose a reason for hiding this comment

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

I'm a bit uneasy in leaving "language feature" as it and only explain it in a background note (versus trying to have a definition).
The rule is only targeting HTML and SVG, and I don't think there is a similar "ARIA in SVG" (or other feature document) out there. So maybe we can be a bit more prescriptive here (to make sure and remove the ambiguity). Pointing here to ARIA in HTML and saying that if the target is an HTML element, it may also have stuff described there.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yes, I thought about that too. In the end, I decided to leave the "language feature" for everybody else to decide on it. Yeah, I'm not sure if there ever will be an equivalent concept for SVG so we can tighten it.

Copy link
Member

Choose a reason for hiding this comment

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

I think you're trying to pack too much information into one sentence. It might be better to break this up into a list:

Suggested change
Each test target is either an [inherited][], [supported][], or [required][] [state][] or [property][] for the element's [semantic role][] or the [WAI-ARIA state or property][] may be used on the language feature. If the element has no [semantic role][], the attribute must be a [global state or property][global].
One of the following is true for each test target:
- **Global**: the test target is a [global state or property][global]; or
- **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 allowed as a language feature on the element on which it is specified. Which ARIA state or property may be used on which element is describe in [ARIA in HTML][].

This will also make it easier to add prohibited attributes when ARIA 1.2 makes it to rec.


## Assumptions

Expand All @@ -46,12 +44,17 @@ Implementation of [Presentational Roles Conflict Resolution][] varies from one b

## Background

In HTML, there are language features that do not have corresponding implicit WAI-ARIA semantics. As per [ARIA in HTML Editor's Draft](https://w3c.github.io/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.1/#usage_intro). For example, `audio` 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.1/#application).
Jym77 marked this conversation as resolved.
Show resolved Hide resolved

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

- [ARIA state or property has valid value](https://act-rules.github.io/rules/6a7281)
- [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.1, Supported States and Properties](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties)
- [WAI-ARIA 1.1, Global States and Properties](https://www.w3.org/TR/wai-aria-1.1/#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://w3c.github.io/html-aria/#docconformance)
Jym77 marked this conversation as resolved.
Show resolved Hide resolved

## Test Cases

Expand Down Expand Up @@ -139,6 +142,14 @@ This `button` element has an [explicit role][] of `none`. However, it is [focusa
<button role="none" aria-pressed="false">ACT rules are cool!</button>
```

#### Passed Example 11

This `input` element does not have an [explicit role][] of `textbox`, but the `aria-required` property may be used on such language feature.
ajanec01 marked this conversation as resolved.
Show resolved Hide resolved

```html
<label>Password<input type="password" aria-required="true" /></label>
```

### Failed

#### Failed Example 1
Expand All @@ -149,6 +160,14 @@ The `aria-sort` [property][] is neither [inherited][], [supported][], nor [requi
<button aria-sort="">Sort by year</button>
```

#### Failed Example 2

The `aria-orientation` property may not be used on `audio` element, nor it can be used on `application` (the [semantic role][] for which [inherited][], [supported][], or [required][] [states][state] or [properties][property] are also applicable to `audio` element).

```html
<audio src="/test-assets/moon-audio/moon-speech.mp3" controls aria-orientation="horizontal" ></audio>
```

### Inapplicable

#### Inapplicable Example 1
Expand Down