ARIA attributes must be used as specified for the element's role

Rule ID: aria-conditional-attr

Ruleset: axe-core 4.9

User Impact: Serious

Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549

Start building more accessible experiences

Axe DevTools Pro helps dev teams find and fix up to 80% of accessibility issues while coding. No experience required. Get started with your free trial today.

Start for free

Compliance Data & Impact

User Impact

Serious
▼

Minor

Critical

Disabilities Affected

Blind
Deafblind
Mobility

Standard(s)

WCAG 2.1 (A)
WCAG 2.0 (A)
WCAG 2.2 (A)
EN 301 549

WCAG Success Criteria [WCAG 2.1 (A)]

4.1.2: MUST: Name, Role, Value

WCAG Success Criteria [WCAG 2.0 (A)]

4.1.2: MUST: Name, Role, Value

WCAG Success Criteria [WCAG 2.2 (A)]

4.1.2: MUST: Name, Role, Value

EN 301 549 Guidelines

9.4.1.2: MUST: Name, Role, Value

How to Fix the Problem

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>

Why it Matters

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.

Rule Description

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.

The Algorithm (in simple terms)

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.

Resources

Deque University Course Pages (subscription required)

Contribute to axe-core on GitHub

Other Resources

You may also want to check out these other resources.

Refer to the complete list of axe 4.9 rules.

Was this information helpful?

You have already given your feedback, thank you..