---
title: ARIA Conditional Attributes | Accessibility Rule
description: ARIA attributes must be used as specified for the element's role
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/aria-conditional-attr
  md: https://testingbot.com/support/accessibility/web/rules/aria-conditional-attr/index.md
---
# Ensure ARIA attributes are used as described in the specification of the element's role

Rule ID: aria-conditional-attrUser Impact: seriousGuidelines: WCAG 2.0

Using ARIA attributes on elements where they are not intended can cause unpredictable behavior in assistive technologies. This could result in a poor user experience for individuals with disabilities who depend on these tools. Adhering to the ARIA specification is crucial to ensure assistive technologies can accurately interpret and convey the intended meaning of the content.

## Why It Matters

Using ARIA attributes in unexpected ways can cause confusing behavior for assistive technologies. Adhering to ARIA specifications ensures that individuals with disabilities can effectively interpret and interact with web content.

## How to Fix

For checkboxes, consider the following approaches:

- Remove the `aria-checked` attribute from native HTML checkboxes and manage their state using the `indeterminate` property. 
- If replacing the native checkbox with a custom element, ensure it has the appropriate role and is keyboard accessible. 

For `tr` elements with a role of `row`, you may need to change the role of the parent `table` or `grid` to `treegrid`.

### Example

#### Fail

The following example incorrectly uses the `aria-checked` attribute on a native checkbox, and the `row` elements are part of a `table` instead of a `treegrid`:

    <input type="checkbox" aria-checked="true">
    
    <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

In this corrected example, the `aria-checked` attribute is removed from the native checkbox, and the parent element is correctly set to `treegrid` for the `row` elements:

    <input type="checkbox" checked>
    
    <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 rule passes under the following conditions:

- For `aria-checked`: 
  - It is not used on an HTML `input` element of type `checkbox`.
  - Browsers ignore `aria-checked` on native checkboxes.

- For `row` elements: 
  - Attributes like `aria-posinset`, `aria-setsize`, `aria-expanded`, and `aria-level` are used only when the `row` is part of a `treegrid`. 

## Other Rules

Interested in other web accessibility rules? Please see these other rules:

- [aria-deprecated-role](https://testingbot.com/support/accessibility/web/rules/aria-deprecated-role)
- [aria-hidden-body](https://testingbot.com/support/accessibility/web/rules/aria-hidden-body)
- [aria-hidden-focus](https://testingbot.com/support/accessibility/web/rules/aria-hidden-focus)
- [aria-input-field-name](https://testingbot.com/support/accessibility/web/rules/aria-input-field-name)
- [aria-meter-name](https://testingbot.com/support/accessibility/web/rules/aria-meter-name)