Valor incorrecto “0” para el atributo “aria-rowspan” en el elemento “div”: Cero no es un entero positivo.

El atributo aria-rowspan se usa en estructuras de cuadrícula y tabla basadas en ARIA para indicar cuántas filas abarca una celda. Tiene un propósito similar al atributo rowspan en los elementos HTML nativos <td> y <th>, pero está diseñado para widgets personalizados construidos con roles ARIA como gridcell, rowheader y columnheader dentro de estructuras grid o treegrid.

Según la especificación WAI-ARIA, el valor de aria-rowspan debe ser un entero positivo — un número entero mayor que cero. Un valor de "0" es inválido porque implica que la celda abarca cero filas, lo cual es semánticamente sin sentido. Ten en cuenta que esto difiere del atributo rowspan del HTML nativo, donde "0" tiene un significado especial (abarcar todas las filas restantes en el grupo de filas). El atributo ARIA no admite este comportamiento.

Esto es importante principalmente para la accesibilidad. Los lectores de pantalla y otras tecnologías de asistencia dependen de aria-rowspan para transmitir la estructura de cuadrículas personalizadas a los usuarios. Un valor inválido de "0" puede confundir a las tecnologías de asistencia, potencialmente causando que representen mal el diseño de la cuadrícula o se salten la celda por completo. Asegurar valores válidos ayuda a los usuarios que dependen de estas herramientas a navegar tu contenido correctamente.

Para solucionar este problema, determina cuántas filas abarca realmente la celda y establece aria-rowspan a ese número. Si la celda ocupa una sola fila, usa "1". Si abarca múltiples filas, usa el conteo apropiado. Si no necesitas que abarque filas en absoluto, puedes simplemente eliminar el atributo aria-rowspan por completo, ya que el comportamiento predeterminado es abarcar una fila.

Ejemplos

Incorrecto: aria-rowspan establecido a cero

<div role="grid">
  <div role="row">
    <div role="gridcell" aria-rowspan="0">Name</div>
    <div role="gridcell">Value</div>
  </div>
</div>

El valor "0" no es un entero positivo, por lo que el validador reporta un error.

Correcto: aria-rowspan establecido a un entero positivo

Si la celda abarca una sola fila, usa "1" (o elimina el atributo, ya que una fila es el valor predeterminado):

<div role="grid">
  <div role="row">
    <div role="gridcell" aria-rowspan="1">Name</div>
    <div role="gridcell">Value</div>
  </div>
</div>

Correcto: aria-rowspan para una celda que abarca múltiples filas

Si la celda realmente abarca dos filas, establece el valor en consecuencia:

<div role="grid">
  <div role="row">
    <div role="gridcell" aria-rowspan="2">Category</div>
    <div role="gridcell">Item A</div>
  </div>
  <div role="row">
    <div role="gridcell">Item B</div>
  </div>
</div>

Correcto: eliminando el atributo cuando no se necesita que abarque

Si la celda no abarca múltiples filas, la solución más simple es eliminar aria-rowspan por completo:

<div role="grid">
  <div role="row">
    <div role="gridcell">Name</div>
    <div role="gridcell">Value</div>
  </div>
</div>

Cuándo usar aria-rowspan vs. HTML nativo

Si estás construyendo una tabla de datos, prefiere los elementos HTML nativos <table>, <tr>, <td> y <th> con el atributo estándar rowspan. La semántica de tabla nativa es entendida automáticamente por los navegadores y tecnologías de asistencia sin ningún atributo ARIA. Reserva aria-rowspan para widgets interactivos personalizados (como cuadrículas estilo hoja de cálculo o cuadrículas de árbol) donde los elementos de tabla nativos no son apropiados. El valor de aria-rowspan siempre debe coincidir con el diseño visual y estructural real de tu cuadrícula para evitar confundir a los usuarios de tecnologías de asistencia.

Más información:

MDN Reference

MDN: aria-rowspan

→