# The “aria-checked” attribute must not be used on any “label” element that is associated with a labelable element.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-aria-checked-attribute-must-not-be-used-on-any-label-element-that-is-associated-with-a-labelable-element
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `aria-checked` attribute is not allowed on a `label` element when that label is associated with a form control like a checkbox or radio button.

When a `label` is associated with a labelable element (via the `for` attribute or by nesting), the label acts as an accessible name provider — it doesn't represent the control's state itself. The `aria-checked` attribute is meant for elements that **act as** a checkbox or radio button, such as elements with `role="checkbox"` or `role="switch"`, not for labels that merely describe one.

Adding `aria-checked` to a `label` creates conflicting semantics. Assistive technologies already read the checked state from the associated input element, so duplicating or overriding that state on the label causes confusion.

If you need a custom toggle or checkbox, apply `aria-checked` to the element that has the interactive role, not to the label.

## Example with the issue

```html
<label for="notifications" aria-checked="true">Enable notifications</label>
<input type="checkbox" id="notifications" checked>
```

## Fixed example using a native checkbox

```html
<label for="notifications">Enable notifications</label>
<input type="checkbox" id="notifications" checked>
```

The native `<input type="checkbox">` already communicates its checked state to assistive technologies — no `aria-checked` is needed anywhere.

## Fixed example using a custom toggle

If you're building a custom control without a native checkbox, apply `aria-checked` to the element with the appropriate role:

```html
<span id="toggle-label">Enable notifications</span>
<span role="switch" tabindex="0" aria-checked="true" aria-labelledby="toggle-label"></span>
```

Here, `aria-checked` is correctly placed on the element with `role="switch"`, which is the interactive control. The label is a separate `<span>` referenced via `aria-labelledby`, keeping roles and states cleanly separated.