WAI-ARIA
Warn if the role
attribute and/or aria-*
attributes don't set in accordance with specs that are WAI-ARIA and/or "ARIA in HTML".
Warn if:
- Use the role that doesn't exist in the spec.
- Use the abstract role.
- Use the
aria-*
attribute that doesn't belong to a set role (or an implicit role). - [Optional] Use a bad value of the
aria-*
attribute. - [Optional] Use the not permitted role according to ARIA in HTML.
- [Optional] Set the implicit role explicitly.
There are settings about ARIA in HTML on @markuplint/html-spec
. And you can disable them because that is draft yet.
Rule Details
👎 Examples of incorrect code for this rule
<div role="landmark" aria-busy="busy">
<ul>
<li role="button">an item</li>
</ul>
<button aria-checked="true">Click me!</button>
</div>
👍 Examples of correct code for this rule
<div role="banner" aria-busy="true">
<ul>
<li role="menuitemcheckbox">an item</li>
</ul>
<button aria-pressed="true">Click me!</button>
</div>
Setting value
Type: boolean
Options
checkingValue
Warn if use a bad value of the aria-*
attribute. This is optional but you should not disable it if you need to follow the spec. But you can disable it temporarily if you need when it happened to a problem on the spec was updated (ex: If a value was added to an allowed list on the spec, etc).
- Type:
boolean
- Optional
- Default:
true
permittedAriaRoles
Warn if use the not permitted role according to ARIA in HTML. This is based on the spec ARIA in HTML and is not strictly the spec WAI-ARIA, so it is an option.
- Type:
boolean
- Optional
- Default:
true
disallowSetImplicitRole
Disallow set the implicit role explicitly. This is based on the spec ARIA in HTML and is not strictly the spec WAI-ARIA, so it is an option.
- Type:
boolean
- Optional
- Default:
true
Default notification severity
error
Configuration Example
Explains an example of when changes configs are necessary due to browser support status or the behavior of assistive technologies.
Below is an example of disabling disallowSetImplicitRole
when the img
element loading SVG requires role="img"
in Safari and VoiceOver environments.
(This matter is based on the issue.)
{
"rules": {
"wai-aria": true
},
"nodeRules": [
{
"selector": "img[src$=.svg]",
"rules": {
// Allows the implicit role:
"wai-aria": {
"option": {
"disallowSetImplicitRole": false
}
},
// Change to require to specify role attributes:
"required-attr": "role",
// Allow only img value for the role attribute:
"invalid-attr": {
"option": {
"attrs": {
"role": {
"enum": ["img"]
}
}
}
}
}
}
]
}
The selector img[src$=.svg]
limits the rule to the element that is loading an SVG image.
Then, disabling the disallowSetImplicitRole
option allows setting role="img"
which is the implicit role of the img
element.
Furthermore, Change to require to specify the role
attribute through the required-attr
rule, and allows only the img
value for the role
attribute through the invalid-attr
rule.
Doing this will urge add role="img"
to the img[src$=.svg]
element.