-
Notifications
You must be signed in to change notification settings - Fork 75
Add definition for implicit/explicit ARIA attributes #2154
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
base: develop
Are you sure you want to change the base?
Changes from 13 commits
593ab3d
07a1a6e
6fe0f13
41324e8
0571507
b3e4099
0cf36b4
a18afec
1e1fa47
a44c668
4f135b6
1e54b3e
bb7e66b
3f46f74
10ca88d
d598f7c
a21542b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -36,7 +36,7 @@ acknowledgments: | |
|
||
## 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][]. | ||
This rule applies to any [WAI-ARIA state or property][] that is [explicitly set][aria set explicit] on an [HTML or SVG element][namespaced element] that is [included in the accessibility tree][]. | ||
|
||
## Expectation 1 | ||
|
||
|
@@ -64,6 +64,8 @@ The presence of prohibited ARIA attributes is often the result of a developer us | |
|
||
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). | ||
|
||
This rule only applies to [explicitly set][aria set explicit] attributes since these have been provided by authors and using the wrong one is therefore an author issue. If an [implicitly set][aria set implicit] attribute is incorrect, this is not necessarily an author error, e.g., it can be the result of re-purposing an existing element. | ||
|
||
Assessing the value of the attribute is out of scope for this rule. | ||
|
||
### Related rules | ||
|
@@ -217,7 +219,18 @@ This `div` element is not [included in the accessibility tree][], hence its [WAI | |
<div role="button" aria-sort="" style="display:none;"></div> | ||
``` | ||
|
||
#### Inapplicable Example 3 | ||
|
||
This `button` does not have any [explicitly set][aria set explicit] ARIA attribute. It has an [implicitly set][aria set implicit] `aria-checked` state, due to the [absence of a `checked` attribute][checked absent] on the `input` element with a `type` [attribute value][] of `checkbox`. | ||
|
||
```html | ||
<input type="checkbox" role="button" /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. isn't this supposed to be used together with There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No need to mention the implicit attribute "aria-checked" because it doesn't exist in the code that a checker runs on. |
||
``` | ||
|
||
[aria set explicit]: #aria-attribute-set:explicit 'Definition of ARIA Attribute Set Explicitly' | ||
[aria set implicit]: #aria-attribute-set:implicit 'Definition of ARIA Attribute Set Implicitly' | ||
[attribute value]: #attribute-value 'Definition of attribute value' | ||
[checked absent]: https://www.w3.org/TR/html-aam-1.0/#att-checked-absent 'HTML Accessibility API Mappings, Attribute Checked absent' | ||
[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' | ||
|
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -31,11 +31,13 @@ acknowledgments: | |||||
|
||||||
## Applicability | ||||||
|
||||||
This rule applies to any [HTML or SVG element][] that is [included in the accessibility tree][] and has an [explicit semantic role][], except if the element has an [implicit semantic role][] that is identical to the [explicit semantic role][]. | ||||||
This rule applies to any [HTML or SVG element][] that is [included in the accessibility tree][]. | ||||||
|
||||||
## Expectation | ||||||
|
||||||
For each test target, the [WAI-ARIA required states and properties][] for the role are set and not empty (`""`), unless the state or property has a default value listed under [WAI-ARIA implicit value for role][]. | ||||||
For each test target, the [WAI-ARIA required states and properties][] for the role are [set][aria set] and not empty (`""`). | ||||||
|
||||||
The attributes may be [explicitly set][aria set explicit], [implicitly set][aria set implicit], or [set by default][aria set default]. | ||||||
|
||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. same with my early comment, an implicit attribute doesn't show up in the code, and thus never picks up by a checker, so it's not necessary to include any implicit attribute. |
||||||
## Assumptions | ||||||
|
||||||
|
@@ -51,7 +53,7 @@ This rule relies on browsers and assistive technologies to support leaving out [ | |||||
|
||||||
Omitting [WAI-ARIA required states and properties][] is often the result of a developer error. When required properties are missing and a default value is not specified by [WAI-ARIA Specifications][], the behavior is not defined. For [WAI-ARIA 1.2][], the only [explicit semantic roles][explicit semantic role] with a required property with a default value are the `option` and `tabs roles` for the `aria-selected` property. | ||||||
|
||||||
This rule is testing author built components that specify [explicit semantic roles][explicit semantic role] and not components that keep their [implicit semantic role][]. For components that keep their [implicit semantic role][], all native HTML and SVG elements have native attributes that are mapped to all of the [WAI-ARIA required states and properties](https://www.w3.org/TR/wai-aria/#requiredState). Most of these mappings are defined in the [HTML Accessibility API Mappings, Attribute State and Property Mappings][html aam]. | ||||||
The way the attribute is [set][aria set] doesn't matter for this rule. As long as authors can rely on User Agents or Assistive Technologies to set the attribute, this won't create problems for users. As per the [First Rule of ARIA use][], authors should rely on [implicitly set][aria set implicit] attributes when possible. | ||||||
|
||||||
### Bibliography | ||||||
|
||||||
|
@@ -65,7 +67,7 @@ This rule is testing author built components that specify [explicit semantic rol | |||||
|
||||||
#### Passed Example 1 | ||||||
|
||||||
This `heading` has the required `aria-level` property. | ||||||
This `heading` has the required `aria-level` property [explicitly set][aria set explicit]. | ||||||
|
||||||
```html | ||||||
<div role="heading" aria-level="1"> | ||||||
|
@@ -75,7 +77,7 @@ This `heading` has the required `aria-level` property. | |||||
|
||||||
#### Passed Example 2 | ||||||
|
||||||
This `checkbox` has the required `aria-checked` property. | ||||||
This `checkbox` has the required `aria-checked` property [explicitly set][aria set explicit]. | ||||||
|
||||||
```html | ||||||
<div role="checkbox" aria-checked="false" aria-labelledby="label"></div> | ||||||
|
@@ -84,7 +86,7 @@ This `checkbox` has the required `aria-checked` property. | |||||
|
||||||
#### Passed Example 3 | ||||||
|
||||||
This `scrollbar` has the required properties `aria-controls` and `aria-valuenow`. `aria-valuemin` has a default value of 0 and `aria-valuemax` of 100. | ||||||
This `scrollbar` has the required properties `aria-controls` and `aria-valuenow` [explicitly set][aria set explicit]. `aria-valuemin` has a default value of 0 and `aria-valuemax` of 100 and are thus [set by default][aria set default]. | ||||||
|
||||||
```html | ||||||
<div role="scrollbar" aria-controls="content" aria-valuenow="0"></div> | ||||||
|
@@ -93,7 +95,7 @@ This `scrollbar` has the required properties `aria-controls` and `aria-valuenow` | |||||
|
||||||
#### Passed Example 4 | ||||||
|
||||||
These `option` nodes do not need the required `aria-selected` property because it has a default value of `false`. | ||||||
These `option` nodes have the required `aria-selected` property [set by default][aria set default]. | ||||||
|
||||||
```html | ||||||
<div id="label">Tags</div> | ||||||
|
@@ -105,7 +107,7 @@ These `option` nodes do not need the required `aria-selected` property because i | |||||
|
||||||
#### Passed Example 5 | ||||||
|
||||||
This `separator` is not a `widget` because it is not [focusable][]. The `separator` role only requires the `aria-valuenow` property when the element is focusable. | ||||||
This `separator` is not a `widget` because it is not [focusable][]. The `separator` role does not have any required property when the element is not focusable. | ||||||
|
||||||
```html | ||||||
<p>My first HTML</p> | ||||||
|
@@ -115,7 +117,7 @@ This `separator` is not a `widget` because it is not [focusable][]. The `separat | |||||
|
||||||
#### Passed Example 6 | ||||||
|
||||||
This `combobox` has the required properties `aria-controls` and `aria-expanded`. | ||||||
This `combobox` has the required properties `aria-controls` and `aria-expanded` [explicitly set][aria set explicit]. | ||||||
|
||||||
```html | ||||||
<label for="tag_combo">Tag</label> | ||||||
|
@@ -126,11 +128,41 @@ This `combobox` has the required properties `aria-controls` and `aria-expanded`. | |||||
</ul> | ||||||
``` | ||||||
|
||||||
#### Passed Example 7 | ||||||
Jym77 marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
||||||
This `checkbox` has its required `aria-checked` property [implicitly set][aria set implicit]. | ||||||
|
||||||
```html | ||||||
<label> | ||||||
<input type="checkbox" /> | ||||||
Check me | ||||||
</label> | ||||||
``` | ||||||
|
||||||
#### Passed Example 8 | ||||||
|
||||||
This `menuitemcheckbox` has its required `aria-checked` property [implicitly set][aria set implicit]. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
If I am correctly understanding, This <label>
<input role="menuitemcheckbox" />
Check me
</label> |
||||||
|
||||||
```html | ||||||
<label> | ||||||
<input type="checkbox" role="menuitemcheckbox" /> | ||||||
Check me | ||||||
</label> | ||||||
``` | ||||||
|
||||||
#### Passed Example 9 | ||||||
|
||||||
This `iframe` element is [included in the accessibility tree][], even without a role, and therefore has no [WAI-ARIA required states and properties][]. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. trying to figure out this example, is it to clarify that |
||||||
|
||||||
```html | ||||||
<iframe srcdoc="<div>ACT rules are awesome!</div>" title="ACT rules" /> | ||||||
``` | ||||||
|
||||||
### Failed | ||||||
|
||||||
#### Failed Example 1 | ||||||
|
||||||
This `heading` does not have the required `aria-level` property. Prior to [WAI-ARIA 1.2][] the `heading` role had an implicit default `aria-level` value of `2`. As of WAI-ARIA 1.2 this property must be explicitly set. | ||||||
This `heading` does not have the required `aria-level` property. Prior to [WAI-ARIA 1.2][] the `heading` role had a default `aria-level` value of `2`. As of WAI-ARIA 1.2 this property must be [explicitly set][aria set explicit]. | ||||||
|
||||||
```html | ||||||
<div role="heading"> | ||||||
|
@@ -140,7 +172,7 @@ This `heading` does not have the required `aria-level` property. Prior to [WAI-A | |||||
|
||||||
#### Failed Example 2 | ||||||
|
||||||
This `switch` does not have the required `aria-checked` property. Prior to [WAI-ARIA 1.2][] the `switch` role had an implicit default `aria-checked` value of `false`. As of WAI-ARIA 1.2 this property must be explicitly set. | ||||||
This `switch` does not have the required `aria-checked` property. Prior to [WAI-ARIA 1.2][] the `switch` role had a default `aria-checked` value of `false`. As of WAI-ARIA 1.2 this property must be [explicitly set][aria set explicit]. | ||||||
|
||||||
```html | ||||||
<div role="switch"> | ||||||
|
@@ -150,7 +182,7 @@ This `switch` does not have the required `aria-checked` property. Prior to [WAI- | |||||
|
||||||
#### Failed Example 3 | ||||||
|
||||||
This `checkbox` does not have the required property `aria-checked`. Prior to [WAI-ARIA 1.2][] the `checkbox` had an implicit default `aria-checked` value of `false`. As of WAI-ARIA 1.2 this property must be explicitly set. | ||||||
This `checkbox` does not have the required property `aria-checked`. Prior to [WAI-ARIA 1.2][] the `checkbox` role had a default `aria-checked` value of `false`. As of WAI-ARIA 1.2 this property must be [explicitly set][aria set explicit]. | ||||||
|
||||||
```html | ||||||
<div role="checkbox" aria-labelledby="label"></div> | ||||||
|
@@ -169,7 +201,7 @@ This `separator` does not have the required `aria-valuenow` property. This is re | |||||
|
||||||
#### Failed Example 5 | ||||||
|
||||||
This `combobox` does not have the required `aria-expanded` property. Prior to [WAI-ARIA 1.2][] the `combobox` had an implicit default `aria-expanded` value of `false`. As of WAI-ARIA 1.2 this property must be explicitly set. | ||||||
This `combobox` does not have the required `aria-expanded` property. Prior to [WAI-ARIA 1.2][] the `combobox` had a default `aria-expanded` value of `false`. As of WAI-ARIA 1.2 this property must be [explicitly set][aria set explicit]. | ||||||
|
||||||
```html | ||||||
<label for="tag_combo">Tag</label> | ||||||
|
@@ -197,31 +229,26 @@ This `combobox` uses `aria-owns` instead of using the required `aria-controls` p | |||||
|
||||||
#### Inapplicable Example 1 | ||||||
|
||||||
This `div` does not have a [semantic role](#semantic-role). | ||||||
This `div` is not [included in the accessibility tree][] due to its role of `generic`. | ||||||
|
||||||
```html | ||||||
<div>Some Content</div> | ||||||
``` | ||||||
|
||||||
Jym77 marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
#### Inapplicable Example 2 | ||||||
|
||||||
This `checkbox` has an [implicit semantic role](#implicit-role) that is identical to the [explicit semantic role](#explicit-role). This allows native HTML `checked` attribute to apply. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. can you explain why this was removed? |
||||||
|
||||||
```html | ||||||
<input type="checkbox" role="checkbox" /> | ||||||
``` | ||||||
|
||||||
#### Inapplicable Example 3 | ||||||
|
||||||
This `combobox` is not [included in the accessibility tree][] due to its styling, hiding it from everybody. | ||||||
|
||||||
```html | ||||||
<div role="combobox" style="display:none;"></div> | ||||||
``` | ||||||
|
||||||
[aria set]: #aria-attribute-set 'Definition of ARIA Attribute Set' | ||||||
[aria set default]: #aria-attribute-set:default 'Definition of ARIA Attribute Set by Default' | ||||||
[aria set explicit]: #aria-attribute-set:explicit 'Definition of ARIA Attribute Set Explicitly' | ||||||
[aria set implicit]: #aria-attribute-set:implicit 'Definition of ARIA Attribute Set Implicitly' | ||||||
[explicit semantic role]: #explicit-role 'Definition of explicit semantic role' | ||||||
[html aam]: https://www.w3.org/TR/html-aam-1.0/#html-attribute-state-and-property-mappings 'Specification of HTML attributes value mapping to ARIA states and properties' | ||||||
[implicit semantic role]: #implicit-role 'Definition of implicit semantic role' | ||||||
[first rule of aria use]: https://www.w3.org/TR/using-aria/#rule1 'First Rule of ARIA Use' | ||||||
[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in The Accessibility Tree' | ||||||
[wai-aria required states and properties]: https://www.w3.org/TR/wai-aria-1.2/#requiredState | ||||||
[wai-aria specifications]: #wai-aria-specifications 'Definition of WAI-ARIA Specifications' | ||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
--- | ||
title: ARIA state or property is set | ||
key: aria-attribute-set | ||
unambiguous: true | ||
objective: true | ||
input_aspects: | ||
- Accessibility tree | ||
- CSS styling | ||
- DOM tree | ||
--- | ||
|
||
An ARIA [state][aria state] or [property][aria property] is <dfn>set</dfn> on an [HTML element][namespaced element] when it has a value. This may happen in three ways: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The term "value" brings to mind the explicit value of an attribute. What if we replace it with "when the accessibility tree exposes its value." There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This proved tricky, especially in combination of #2154 (comment) 😅 TLDR: DOM/HTML define the "value" of an attribute as the stuff written in the HTML code, which differs from our "attribute value", making everything hard to write. Here, we want to refer to the "value as written" since, presumably, the incorrect values could be dropped by parsing/validation and thus not make it to the "attribute value". Plus, as @carlosapaduarte stated, we do want rules to validate the "value as written" and thus not really bake it into this definition Anyway, I tried to improve the situation… |
||
|
||
- It is <dfn id="aria-attribute-set:explicit">explicitly set</dfn> if there is a corresponding `aria-*` HTML attribute on the element. If the [value][html attribute value] as written in the HTML code is not valid for this ARIA [state][aria state] or [property][aria property] and then the attribute is set but does not have an [attribute value][]. | ||
Jym77 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
For example, `aria-label` is explicitly set on `<button aria-label="Next page">Next</button>`; and `aria-checked` is explicitly set on `<input type="checkbox" aria-checked="yes" />`, even though it does not have an [attribute value][]. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. just wondering if it would be better to use a different example for |
||
|
||
- It is <dfn id="aria-attribute-set:implicit">implicitly set</dfn> if there is no corresponding `aria-*` HTML attribute on the element, but the element or one of its HTML attribute has an [ARIA attribute mapping][aria attribute mapping] setting this ARIA attribute. | ||
Jym77 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
For example, `aria-checked` is implicitly set both on `<input type="checkbox" checked />` (through the [presence of the HTML attribute `checked`][checked present]) and `<input type="checkbox" />` (through its [absence][checked absent]). It is not set on `<input type="text" />` given that the mapping for `checked` doesn't apply when the `input` element is not of type `checkbox` or `radio`. | ||
|
||
- It is <dfn id="aria-attribute-set:default">set by default</dfn> if there is no corresponding `aria-*` HTML attribute on the element, and either the element has an [semantic role][] that has a default value for this ARIA [state][aria state] or [property][aria property] or the attribute itself has a default value. | ||
|
||
For example, `aria-haspopup` is set by default on `<div role="combobox"></div>` through the role of `combobox`. | ||
|
||
#### Background | ||
|
||
For explicitly set attributes, this definition only looks at the value written in the HTML code, without considering its validity. Attributes that are explicitly set with an invalid value are author errors that are detected by the rule [Role attribute has valid value](https://www.w3.org/WAI/standards-guidelines/act/rules/674b10/), and authors should not rely on invalid value to have forbidden attributes discarded from roles not allowing it. | ||
|
||
For attributes set by default, this definition doesn't consider whether the attribute is allowed on the element (or role). Thus, `aria-expanded` (whose default value is `false`) is considered as set by default on `<input />` even though it is not allowed on the `textbox` role. While authors can (and should) rely on attributes to be set by default, they also have no direct control on them and therefore whether they are allowed on an element never causes an author error. | ||
|
||
[aria attribute mapping]: https://www.w3.org/TR/html-aam-1.0/#html-attribute-state-and-property-mappings 'HTML Attribute State and Property Mappings' | ||
[aria property]: https://www.w3.org/TR/wai-aria-1.2/#dfn-property 'Definition of ARIA Property' | ||
[aria state]: https://www.w3.org/TR/wai-aria-1.2/#dfn-state 'Definition of ARIA State' | ||
[attribute value]: #attribute-value 'Definition of Attribute Value' | ||
[checked absent]: https://www.w3.org/TR/html-aam-1.0/#att-checked-absent 'HTML Accessibility API Mappings, Attribute Checked absent' | ||
[checked present]: https://www.w3.org/TR/html-aam-1.0/#att-checked 'HTML Accessibility API Mappings, Attribute Checked present' | ||
[html attribute value]: https://html.spec.whatwg.org/multipage/dom.html#attributes 'HTML Specification of Attribute Value' | ||
[namespaced element]: #namespaced-element 'Definition of Namespaced Element' | ||
[semantic role]: #semantic-role 'Definition of Semantic Role' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would this not still be a responsibility of the author to ensure the attributes are correct? It could still lead to violations, does the ARIA state or property has valid value check for this? If so, I think we should just call that out directly.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If only it was so simple 😞
<input type="checkbox" role="button" aria-pressed="false" />
is allowed by ARIA (as far as I can tell), but has an implicitaria-checked
set bychecked
(automagically set on<input type="checkbox" />
), which is not allowed on a role ofbutton
…There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
An implicit attribute doesn't show up in the code, rather, it is only added automatically by a user agent during accessibility API mapping. A checker using the rule would never pick up any implicit attribute. Therefore, it's not necessary to call out the implicit attribute for the purpose of a rule.