Back to Info and Examples for Accessibility Insights for Web
aria-conditional-attr
Elements with ARIA roles must be checked so that they’re used properly as intended with content.
Why it matters
Using ARIA attributes when they aren’t expected to be used can result in confusing behavior for assistive technology. Using ARIA specifications makes it so people with disabilities can use those technologies and properly get the intended meaning of the content.
How to fix
For checkboxes you can do two things:
- Make sure that
aria-checkedis removed, and an HTML checkbox can be used by setting itsindeterminateproperty. - Replace the native HTML checkbox with a different element.
Note: Make sure the HTML checkbox is provided with a role and is keyboard accessible.
For tr elements and where the role is a row, you may need to change the role of the parent table or grid to a treegrid.
Example
Fail
aria-checked rule is listed as true and that makes it so that element isn't changed when the checkbox is activated. Also the row elements for the ARIA attributes are used as a part of a table and should be used as a treegrid.<div role="table">
<div role="row" aria-expanded="false">...</div>
<div role="row" aria-posinset="1">...</div>
<div role="row" aria-setsize="10">...</div>
<div role="row" aria-level="1">...</div>
</div>
Pass
aria-checked label was removed for the checkbox and was changed to a different element. The parent element is a treegrid element for the ARIA row elements<div role="treegrid">
<div role="row" aria-expanded="false">...</div>
<div role="row" aria-posinset="1">...</div>
<div role="row" aria-setsize="10">...</div>
<div role="row" aria-level="1">...</div>
</div>
About this rule
This is when the rule passes for aria-checked:
- It’s not used on an HTML input element where a type is a checkbox
- Browsers ignore
aria-checked
This is when the rule passes for 'row' elements:
aria-posinsert,aria-setsize,aria-expanded, andaria-levelfor example are only used whenrowis a part oftreegrid