# An element with “role=row” must be contained in, or owned by, an element with the “role” value “treegrid”, “grid”, “rowgroup”, or “table”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/an-element-with-role-row-must-be-contained-in-or-owned-by-an-element-with-the-role-value-treegrid-grid-rowgroup-or-table
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

An element with `role="row"` must sit inside an element whose role is `table`, `grid`, `treegrid`, or `rowgroup`, or be claimed by one through `aria-owns`. A row on its own has no structure to belong to, so assistive technologies cannot tell which table or grid it is part of.

The `row` role describes one row of a composite structure. Those four allowed owners fall into two groups: `table` and `rowgroup` for static tabular data, and `grid` and `treegrid` for interactive widgets that support keyboard navigation. In every case the container supplies the context a screen reader needs to announce the row's position and its cells. Placed outside such a container, the row is orphaned and the whole table semantics break down.

The most reliable fix is to nest the `role="row"` element inside its container in the DOM. When your layout prevents that, keep the row where it is and point `aria-owns` from the container at the row's `id`.

## Invalid example

The `role="row"` is a sibling of the table, so nothing contains or owns it:

```html
<div role="table" aria-label="Prices"></div>
<div role="row">
  <span role="cell">Basic</span>
  <span role="cell">$9</span>
</div>
```

## Valid example

Nest the row inside the element with `role="table"`:

```html
<div role="table" aria-label="Prices">
  <div role="row">
    <span role="cell">Basic</span>
    <span role="cell">$9</span>
  </div>
</div>
```

If the DOM nesting is not possible, leave the row in place and add `aria-owns="price-row"` to the container so assistive technologies still treat it as the owner.