ARIA attributes must be used as specified for the element's role
Accessibility testing for dev teams - No experience required
Compliance Data & Impact
Disabilities Affected
- 視覚障害
- 視聴覚障害
- 運動障害
Standard(s)
- WCAG 2.1 (A)
- WCAG 2.0 (A)
- WCAG 2.2 (A)
- EN 301 549
WCAG 達成基準 [WCAG 2.1 (A)]
- 4.1.2: 必須: Name, Role, Value
WCAG 達成基準 [WCAG 2.0 (A)]
- 4.1.2: 必須: Name, Role, Value
WCAG 達成基準 [WCAG 2.2 (A)]
- 4.1.2: 必須: Name, Role, Value
EN 301 549 Guidelines
- 9.4.1.2: 必須: Name, Role, Value
修正方法
For checkboxes, there are two options. Either aria-checked
is removed, and the browser's native checkbox state is used instead to
indicate whether the element is checked, not checked, or mix. An HTML checkbox
can be put into a mixed position by using setting its
indeterminate property.
The other option for checkboxes is to replace the native HTML checkbox with a
different element. When you do this, you will also need to Provide it with a
role, and ensure that it is keyboard accessible.
Good Example
<label>
<input type="checkbox" checked>
I agree to make my website accessible
</label>Bad Example
<label>
<input type="checkbox" aria-checked="true">
I agree to make my website accessible
</label>
For tr elements and elements with role="row", it may
be necessary to change the role of the parent table or
grid to a treegrid if the attributes are essential.
Good Example
<table role="treegrid">
<tr aria-level="1" aria-expanded="false">
<td role="gridcell">My Downloads</td>
</tr>
</table>Bad Example
<table>
<tr aria-level="1" aria-expanded="false">
<td>My Downloads</td>
</tr>
</table>なぜ重要なのか
Using ARIA attributes on elements where they are not expected can result in unpredictable behavior for assistive technologies. This can lead to a poor user experience for people with disabilities who rely on these technologies. It is important to follow the ARIA specification to ensure that assistive technologies can properly interpret and communicate the intended meaning of the content.
ルールの説明
Some ARIA attributes are only allowed on an element under certain conditions. Different attributes have different limitations to them:
aria-checked: This should not be used on an HTML
input element with type="checkbox". Such elements
have a checked state determined by the browser. Browsers should
ignore aria-checked in this scenario. Because browsers do this
inconsistently, a difference between the native checkbox state and the
aria-checked value will result in differences between screen
readers and other assistive technologies.
The aria-posinset, aria-setsize,
aria-expanded, and aria-level
attributes are conditional when used on a row. This can be either
tr element, or an element with role="row". These
attributes can only be used when the row is part of
treegrid. When used inside a table or
grid, these attributes have no function, and could result in
unpredictable behavior from screen readers and other assistive technologies.
仕組みについて (簡単に言うと)
Check that ARIA attributes are not used in a way that their role describes authors should not, or must not do. I.e the use of this ARIA attribute is conditional.
リソース
axe 4.10 ルールの一覧 を参照する
この情報は役に立ちましたか?
あなたの回答は次のとおりです。
フィードバックが提出された日付/時刻: