Criar tabelas complexas acessíveis em formulários HTML5 create-accessible-complex-tables-in-html-forms

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 é compatível com:

  • Cabeçalhos de linha
  • Extensão de linha

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

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

As tabelas marcadas como complexTable siga a representação de HTML nativa e forneça um 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 clique em Mesclar Células.

NOTE
A criação de uma extensão de linha funciona somente para as células mais à esquerda.

Para marcar uma linha como cabeçalho da linha, selecione todas as células na linha, clique com o botão direito do mouse na seleção e 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 em novos AccessibleTable formato:

  • Falta de suporte para campos que podem ser expandidos se rowspan for usado na tabela
  • Não há suporte para tabelas aninhadas (tabelas dentro de células de tabela)
  • A compatibilidade com rowspan é limitada às linhas e células do cabeçalho
  • Suporte limitado a tabelas regulares
  • Não há suporte para preenchimentos prévios de dados em tabelas com rowspan > 1
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2