Verificação HTML: Valor inválido "rowgroup" para o atributo "role" no elemento "header".

Sobre este problema HTML

A função rowgroup representa um grupo de linhas dentro de uma estrutura tabular — similar ao que <thead>, <tbody>, ou <tfoot> fornecem numa <table> HTML nativa. De acordo com a especificação ARIA, a função rowgroup deve ser usada em elementos que servem como contentores estruturais para linhas dentro de uma grid, table, ou treegrid. Um elemento <header> não é apropriado para esta função porque carrega o seu próprio significado semântico forte (tipicamente banner ou um cabeçalho seccional), e sobrepor-lhe role="rowgroup" cria um conflito que o validador W3C sinaliza.

Isto é importante por várias razões. Primeiro, as tecnologias assistivas dependem de atribuições de funções corretas para transmitir a estrutura de uma página. Quando um elemento <header> recebe role="rowgroup", os leitores de ecrã recebem sinais contraditórios sobre o que o elemento representa, o que pode confundir os utilizadores. Segundo, a especificação HTML restringe que funções ARIA podem ser aplicadas a determinados elementos — o elemento <header> não permite rowgroup como uma substituição de função válida.

Para corrigir este problema, você tem duas opções principais:

Substitua o elemento <header> por um <div> — como <div> não tem função ARIA implícita, aceita livremente role="rowgroup".
Use elementos nativos de tabela HTML — substitua a estrutura de tabela ARIA personalizada por <table>, <thead>, <tbody>, <tr>, <th>, e <td>, que fornecem a semântica correta sem requerer funções ARIA.

Exemplos

❌ Incorreto: `role="rowgroup"` num elemento `<header>`

<div role="table" aria-label="Quarterly Sales">
  <header role="rowgroup">
    <div role="row">
      <span role="columnheader">Quarter</span>
      <span role="columnheader">Revenue</span>
    </div>
  </header>
  <div role="rowgroup">
    <div role="row">
      <span role="cell">Q1</span>
      <span role="cell">$1.2M</span>
    </div>
  </div>
</div>

O validador reporta Valor inválido “rowgroup” para o atributo “role” no elemento “header” porque <header> não pode aceitar a função rowgroup.

✅ Opção de correção 1: Use um `<div>` em vez de `<header>`

<div role="table" aria-label="Quarterly Sales">
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader">Quarter</span>
      <span role="columnheader">Revenue</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell">Q1</span>
      <span role="cell">$1.2M</span>
    </div>
  </div>
</div>

Um <div> é semanticamente neutro, portanto role="rowgroup" é perfeitamente válido nele.

✅ Opção de correção 2: Use elementos nativos de tabela HTML

<table>
  <caption>Quarterly Sales</caption>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>$1.2M</td>
    </tr>
  </tbody>
</table>

Elementos nativos de tabela como <thead> e <tbody> carregam implicitamente a função rowgroup, portanto não são necessários atributos ARIA. Esta abordagem é geralmente preferida porque fornece o melhor suporte de acessibilidade de forma nativa e resulta numa marcação mais limpa e sustentável. Use apenas funções de tabela ARIA quando não puder usar tabelas HTML nativas (por exemplo, ao construir um layout de grelha personalizado que requer CSS não-tabular).