Verificação HTML: Um elemento com "role=cell" deve estar contido em, ou pertencer a, um elemento com "role=row".

Sobre este problema HTML

A especificação ARIA define uma hierarquia de propriedade estrita para roles relacionados com tabelas. Um elemento role="cell" deve ser “propriedade de” um elemento com role="row", significando que deve ser um filho direto desse elemento ou estar associado a ele através do atributo aria-owns. Isto espelha como as tabelas HTML nativas funcionam: um elemento <td> deve estar dentro de um elemento <tr>. Quando você usa roles ARIA para construir estruturas de tabela personalizadas a partir de elementos não-tabela como <div> ou <span>, é responsável por manter manualmente essa mesma hierarquia.

A ordem de aninhamento esperada para uma tabela ARIA é:

role="table" — o contentor mais exterior
role="rowgroup" (opcional) — agrupa linhas, como <thead>, <tbody>, ou <tfoot>
role="row" — uma única linha de células
role="cell" ou role="columnheader" / role="rowheader" — células individuais

Quando um elemento role="cell" é colocado diretamente dentro de um role="table" ou qualquer outro contentor que não seja role="row", os leitores de ecrã perdem a capacidade de anunciar posições de linha e coluna. Utilizadores que dependem de atalhos de navegação de tabela (como mover-se entre células com as teclas de seta) acharão a tabela inutilizável. Isto não é apenas uma preocupação de validação — impacta diretamente se as pessoas conseguem aceder ao seu conteúdo.

Este problema surge comumente quando programadores adicionam elementos de envolvimento intermédios para fins de estilo e acidentalmente quebram a relação pai-filho necessária, ou quando se esquecem de atribuir role="row" a um elemento contentor.

Como corrigir

Certifique-se de que cada elemento com role="cell" é um filho direto de um elemento com role="row". Se você tem elementos de envolvimento entre a linha e a célula para layout ou estilo, remova-os, mova as atribuições de role, ou use aria-owns no elemento linha para explicitamente reivindicar propriedade das células.

Exemplos

Incorreto — Célula sem um pai linha

Isto desencadeia o erro de validação porque elementos role="cell" são filhos diretos do contentor role="table", sem role="row" entre eles.

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

Incorreto — Envolvimento intermediário quebrando a propriedade

Aqui, um envolvimento de estilo situa-se entre a linha e as suas células. Uma vez que o <div> sem um role não é um role="row", as células não são propriedade adequada.

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

Correto — Células diretamente dentro de linhas

Cada role="cell" é um filho direto de um elemento role="row", formando uma estrutura de tabela ARIA 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>

Correto — Usando grupos de linhas

Você pode opcionalmente agrupar linhas com role="rowgroup", similar a <thead> e <tbody>. As células ainda devem ser filhos diretos das suas linhas.

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

Correto — Usando HTML nativo em vez disso

Se o seu conteúdo é genuinamente dados tabulares, considere usar elementos de tabela HTML nativos em vez de roles ARIA. Tabelas nativas têm semântica incorporada e não requerem atributos de role adicionais.

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

Tabelas HTML nativas são sempre preferíveis quando se adequam ao seu caso de uso. A primeira regra de ARIA é: se você pode usar um elemento HTML nativo que já tenha a semântica de que precisa, use-o em vez de adicionar roles ARIA a um elemento genérico.