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

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:

<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":

<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.

Learn more:

MDN Reference

MDN Web Docs: ARIA: row role

→

MDN Reference

MDN Web Docs: ARIA: table role

→

MDN Reference

MDN Web Docs: ARIA: rowgroup role

→