Validación HTML: Un elemento con "role=cell" debe estar contenido en, o ser propiedad de, un elemento con "role=row".

Acerca de este problema HTML

La especificación ARIA define una jerarquía de propiedad estricta para los roles relacionados con tablas. Un elemento role="cell" debe ser “propiedad de” un elemento con role="row", lo que significa que debe ser un hijo directo de ese elemento o estar asociado con él a través del atributo aria-owns. Esto refleja cómo funcionan las tablas HTML nativas: un elemento <td> debe vivir dentro de un elemento <tr>. Cuando usas roles ARIA para construir estructuras de tabla personalizadas a partir de elementos que no son tabla como <div> o <span>, eres responsable de mantener esta misma jerarquía manualmente.

El orden de anidación esperado para una tabla ARIA es:

role="table" — el contenedor más externo
role="rowgroup" (opcional) — agrupa filas juntas, como <thead>, <tbody>, o <tfoot>
role="row" — una sola fila de celdas
role="cell" o role="columnheader" / role="rowheader" — celdas individuales

Cuando un elemento role="cell" se coloca directamente dentro de un role="table" o cualquier otro contenedor que no sea role="row", los lectores de pantalla pierden la capacidad de anunciar las posiciones de fila y columna. Los usuarios que dependen de atajos de navegación de tabla (como moverse entre celdas con las flechas del teclado) encontrarán la tabla inutilizable. Esto no es solo una preocupación de validación — impacta directamente en si las personas pueden acceder a tu contenido.

Este problema surge comúnmente cuando los desarrolladores añaden elementos envolventes intermedios para propósitos de estilo y accidentalmente rompen la relación padre-hijo requerida, o cuando olvidan asignar role="row" a un elemento contenedor.

Cómo solucionarlo

Asegúrate de que cada elemento con role="cell" sea un hijo directo de un elemento con role="row". Si tienes elementos envolventes entre la fila y la celda para diseño o estilo, elimínalos, mueve las asignaciones de roles, o usa aria-owns en el elemento fila para reclamar explícitamente la propiedad de las celdas.

Ejemplos

Incorrecto — Celda sin un padre fila

Esto activa el error de validación porque los elementos role="cell" son hijos directos del contenedor role="table", sin role="row" en el medio.

<div role="table">
  <div role="cell">Name</div>
  <div role="cell">Email</div>
</div>

Incorrecto — Envolvente intermedio rompiendo la propiedad

Aquí, un envolvente de estilo se sitúa entre la fila y sus celdas. Como el <div> sin rol no es un role="row", las celdas no son propiedad apropiada.

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

Correcto — Celdas directamente dentro de filas

Cada role="cell" es un hijo directo de un elemento role="row", formando una estructura ARIA de tabla válida.

<div role="table" aria-label="Team members">
  <div role="row">
    <div role="columnheader">Name</div>
    <div role="columnheader">Email</div>
  </div>
  <div role="row">
    <div role="cell">Alice</div>
    <div role="cell">alice@example.com</div>
  </div>
  <div role="row">
    <div role="cell">Bob</div>
    <div role="cell">bob@example.com</div>
  </div>
</div>

Correcto — Usando grupos de filas

Puedes opcionalmente agrupar filas con role="rowgroup", similar a <thead> y <tbody>. Las celdas aún deben ser hijos directos de sus filas.

<div role="table" aria-label="Quarterly results">
  <div role="rowgroup">
    <div role="row">
      <div role="columnheader">Quarter</div>
      <div role="columnheader">Revenue</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="cell">Q1</div>
      <div role="cell">$10,000</div>
    </div>
    <div role="row">
      <div role="cell">Q2</div>
      <div role="cell">$12,500</div>
    </div>
  </div>
</div>

Correcto — Usando HTML nativo en su lugar

Si tu contenido es genuinamente datos tabulares, considera usar elementos de tabla HTML nativos en lugar de roles ARIA. Las tablas nativas tienen semántica incorporada y no requieren atributos de rol adicionales.

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>alice@example.com</td>
  </tr>
</table>

Las tablas HTML nativas son siempre preferibles cuando se ajustan a tu caso de uso. La primera regla de ARIA es: si puedes usar un elemento HTML nativo que ya tiene la semántica que necesitas, úsalo en lugar de añadir roles ARIA a un elemento genérico.