Valor incorrecto “rowgroup” para el atributo “role” en el elemento “header”.

El rol rowgroup representa un grupo de filas dentro de una estructura tabular — similar a lo que proporcionan <thead>, <tbody>, o <tfoot> en una <table> nativa de HTML. Según la especificación ARIA, el rol rowgroup debe usarse en elementos que sirvan como contenedores estructurales para filas dentro de un grid, table, o treegrid. Un elemento <header> no es apropiado para este rol porque conlleva su propio significado semántico fuerte (típicamente banner o un encabezado de sección), y sobrescribirlo con role="rowgroup" crea un conflicto que el validador W3C marca como error.

Esto importa por varias razones. Primero, las tecnologías de asistencia dependen de asignaciones correctas de roles para transmitir la estructura de una página. Cuando a un elemento <header> se le asigna role="rowgroup", los lectores de pantalla reciben señales contradictorias sobre lo que representa el elemento, lo que puede confundir a los usuarios. Segundo, la especificación HTML restringe qué roles ARIA pueden aplicarse a ciertos elementos — el elemento <header> no permite rowgroup como una sobrescritura de rol válida.

Para solucionar este problema, tienes dos opciones principales:

1. Reemplazar el elemento <header> con un <div> — dado que <div> no tiene rol ARIA implícito, acepta libremente role="rowgroup".
2. Usar elementos nativos de tabla HTML — reemplazar la estructura de tabla ARIA personalizada con <table>, <thead>, <tbody>, <tr>, <th>, y <td>, que proporcionan la semántica correcta sin requerir roles ARIA.

Ejemplos

❌ Incorrecto: role="rowgroup" en un 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>

El validador reporta Valor incorrecto “rowgroup” para el atributo “role” en el elemento “header” porque <header> no puede aceptar el rol rowgroup.

✅ Opción de solución 1: Usar un <div> en lugar 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>

Un <div> es semánticamente neutral, por lo que role="rowgroup" es perfectamente válido en él.

✅ Opción de solución 2: Usar elementos nativos de tabla 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>

Los elementos nativos de tabla como <thead> y <tbody> llevan implícitamente el rol rowgroup, por lo que no se necesitan atributos ARIA en absoluto. Este enfoque generalmente se prefiere porque proporciona el mejor soporte de accesibilidad desde el principio y resulta en marcado más limpio y mantenible. Solo usa roles de tabla ARIA cuando no puedas usar tablas nativas HTML (por ejemplo, cuando construyas un diseño de cuadrícula personalizado que requiera CSS que no sea de tabla).

Más información:

MDN Reference

MDN - Rowgroup role

→