# Element “td” is missing one or more of the following attributes: “aria-checked”, “role”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/element-td-is-missing-one-or-more-of-the-following-attributes-aria-checked-role
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `aria-checked` attribute communicates the checked state of an interactive widget to assistive technologies. According to the WAI-ARIA specification, this attribute is only permitted on elements that have a role supporting the "checked" state — such as `checkbox`, `switch`, `radio`, `menuitemcheckbox`, or `menuitemradio`. A plain `<td>` element has an implicit role of `cell` (or `gridcell` when inside a `role="grid"` table), neither of which supports `aria-checked`. When the validator encounters `aria-checked` on a `<td>` without a compatible `role`, it flags the element as invalid.

This matters for several reasons:

- **Accessibility**: Screen readers and other assistive technologies rely on the relationship between `role` and ARIA state attributes. An `aria-checked` on an element without a recognized checkable role creates a confusing or broken experience — users may not understand that the cell is supposed to be interactive.
- **Standards compliance**: The ARIA in HTML specification defines strict rules about which attributes are allowed on which roles. Violating these rules means your HTML is technically invalid.
- **Browser behavior**: Browsers may ignore `aria-checked` entirely when it's used on an element without a valid role, making the attribute useless.

## How to fix it

You have two main approaches depending on what your `<td>` is meant to do:

**1. Add an appropriate `role` attribute.** If the table cell genuinely represents a checkable control (for example, in an interactive data grid), add `role="checkbox"`, `role="switch"`, or another appropriate checkable role to the `<td>`, along with `tabindex` for keyboard accessibility.

**2. Remove `aria-checked` and use a real control.** If the cell simply contains a checkbox or toggle, place an actual `<input type="checkbox">` inside the `<td>` and remove the ARIA attributes from the cell itself. Native HTML controls already communicate their state to assistive technologies without extra ARIA.

## Examples

### ❌ Incorrect: `aria-checked` without a `role`

```html
<table>
  <tr>
    <td aria-checked="true">Selected</td>
    <td>Item A</td>
  </tr>
</table>
```

This triggers the error because `<td>` has the implicit role of `cell`, which does not support `aria-checked`.

### ✅ Fix: Add a compatible `role` to the `<td>`

```html
<table role="grid">
  <tr>
    <td role="checkbox" aria-checked="true" tabindex="0">Selected</td>
    <td>Item A</td>
  </tr>
</table>
```

Here the `<td>` explicitly has `role="checkbox"`, which supports `aria-checked`. The `tabindex="0"` makes it keyboard-focusable, and `role="grid"` on the table signals that cells may be interactive.

### ✅ Fix: Use a native checkbox inside the `<td>`

```html
<table>
  <tr>
    <td>
      <label>
        <input type="checkbox" checked>
        Selected
      </label>
    </td>
    <td>Item A</td>
  </tr>
</table>
```

This approach is often the best option. The native `<input type="checkbox">` already conveys its checked state to assistive technologies, and no ARIA attributes are needed on the `<td>`.

### ❌ Incorrect: Mismatched `role` and `aria-checked`

```html
<table>
  <tr>
    <td role="button" aria-checked="false">Toggle</td>
    <td>Item B</td>
  </tr>
</table>
```

The `button` role does not support `aria-checked`. This would trigger a different but related validation error.

### ✅ Fix: Use a role that supports `aria-checked`

```html
<table role="grid">
  <tr>
    <td role="switch" aria-checked="false" tabindex="0">Toggle</td>
    <td>Item B</td>
  </tr>
</table>
```

The `switch` role supports `aria-checked` and is appropriate for toggle-style controls.