Sobre este problema HTML
O atributo aria-rowspan é usado em estruturas de grade e tabela baseadas em ARIA para indicar quantas linhas uma célula abrange. Serve um propósito semelhante ao atributo rowspan em elementos HTML nativos <td> e <th>, mas é concebido para widgets personalizados construídos com roles ARIA como gridcell, rowheader e columnheader dentro de estruturas grid ou treegrid.
De acordo com a especificação WAI-ARIA, o valor de aria-rowspan deve ser um número inteiro positivo — um número inteiro maior que zero. Um valor de "0" é inválido porque implica que a célula abrange zero linhas, o que é semanticamente sem significado. Note que isto difere do atributo nativo rowspan do HTML, onde "0" tem um significado especial (abranger todas as linhas restantes no grupo de linhas). O atributo ARIA não suporta este comportamento.
Isto importa principalmente para a acessibilidade. Leitores de ecrã e outras tecnologias assistivas dependem do aria-rowspan para transmitir a estrutura de grades personalizadas aos utilizadores. Um valor inválido de "0" pode confundir a tecnologia assistiva, potencialmente fazendo com que represente mal o layout da grade ou ignore completamente a célula. Garantir valores válidos ajuda os utilizadores que dependem destas ferramentas a navegar corretamente no seu conteúdo.
Para corrigir este problema, determine quantas linhas a célula realmente abrange e defina aria-rowspan para esse número. Se a célula ocupar uma única linha, use "1". Se abranger múltiplas linhas, use a contagem apropriada. Se não precisar de abrangência de linhas de todo, pode simplesmente remover completamente o atributo aria-rowspan, uma vez que o comportamento padrão é abranger uma linha.
Exemplos
Incorreto: aria-rowspan definido como zero
<div role="grid">
<div role="row">
<div role="gridcell" aria-rowspan="0">Name</div>
<div role="gridcell">Value</div>
</div>
</div>
O valor "0" não é um número inteiro positivo, pelo que o validador reporta um erro.
Correto: aria-rowspan definido como um número inteiro positivo
Se a célula abranger uma única linha, use "1" (ou remova o atributo, uma vez que uma linha é o padrão):
<div role="grid">
<div role="row">
<div role="gridcell" aria-rowspan="1">Name</div>
<div role="gridcell">Value</div>
</div>
</div>
Correto: aria-rowspan para uma célula que abrange múltiplas linhas
Se a célula realmente abrange duas linhas, defina o valor em conformidade:
<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>Correto: remover o atributo quando não é necessária abrangência
Se a célula não abrange múltiplas linhas, a correção mais simples é remover completamente o aria-rowspan:
<div role="grid">
<div role="row">
<div role="gridcell">Name</div>
<div role="gridcell">Value</div>
</div>
</div>
Quando usar aria-rowspan vs. HTML nativo
Se está a construir uma tabela de dados, prefira elementos HTML nativos <table>, <tr>, <td> e <th> com o atributo rowspan padrão. A semântica de tabela nativa é automaticamente compreendida pelos navegadores e tecnologias assistivas sem quaisquer atributos ARIA. Reserve o aria-rowspan para widgets interativos personalizados (como grades de estilo folha de cálculo ou grades de árvore) onde os elementos de tabela nativos não são apropriados. O valor de aria-rowspan deve sempre corresponder ao layout visual e estrutural real da sua grade para evitar confundir os utilizadores de tecnologia assistiva.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.
Saiba mais: