HTML Guide for cell

A role="cell" element must be a child of an element with role="row" for correct ARIA relationships.

According to the ARIA specification, role="cell" should be directly contained within a parent with role="row", which itself should usually be inside an element with role="rowgroup" or role="table". This structure allows assistive technologies to interpret your table semantics correctly.

Correct Structure Example:

<div role="table">
  <div role="row">
    <div role="cell">Row 1, Cell 1</div>
    <div role="cell">Row 1, Cell 2</div>
  </div>
  <div role="row">
    <div role="cell">Row 2, Cell 1</div>
    <div role="cell">Row 2, Cell 2</div>
  </div>
</div>

Incorrect Structure Example (missing row):

<div role="table">
  <div role="cell">Cell without row</div>
</div>

How to fix:
Wrap any element with role="cell" inside an element with role="row". This ensures both validity and proper accessibility support.