Criar tabelas complexas acessíveis em formulários HTML5

A implementação padrão de tabelas no HTML5 Forms usa elementos HTML DIV para renderizar uma tabela. A renderização envolve o uso de funções ARIA para atender aos requisitos de acessibilidade.

Para evitar problemas de acessibilidade com leitores de tela que não suportam totalmente as funções ARIA usadas com tabelas de dados, o HTML5 Forms fornece uma representação alternativa para as tabelas. Essas tabelas são baseadas no novo formato de tabela introduzido no Designer, que também suporta:

• Cabeçalhos de linha
• Intervalo de linha

Para usar o novo formato no HTML5 Forms, marque a tabela como complexa. Para marcar a tabela como complexa, adicione a tag extras na origem XML do subformulário da tabela da seguinte maneira:

</extras>
 <text name="complexTable">1</text>
 </extras>

As tabelas marcadas como complexTable seguem a representação HTML nativa e fornecem melhor suporte de acessibilidade para determinados leitores de tela. Para criar uma extensão de linha, selecione células consecutivas de uma tabela na mesma coluna, clique com o botão direito do mouse na seleção e depois clique em Mesclar células.

Observação:​criar uma extensão de linha funciona somente para células mais à esquerda.

Para marcar uma linha como cabeçalho de linha, selecione todas as células na linha, clique com o botão direito do mouse na seleção e depois clique em Marcar Cabeçalho.

Para marcar uma célula como cabeçalho da coluna, selecione qualquer célula na coluna, clique com o botão direito do mouse na seleção e clique em Marcar cabeçalho.

Limitações no novo formato AccessibleTable:

• Falta de suporte para campos que podem ser expandidos se a extensão da linha for usada na tabela
• Nenhum suporte para tabelas aninhadas (tabelas dentro de células da tabela)
• O suporte para expansão de linha é limitado às linhas de cabeçalho e células de cabeçalho
• O suporte é limitado a tabelas regulares
• Nenhum suporte para preenchimento prévio de dados em tabelas com duração > 1