Uso de Tabelas
O que a norma pede
Tabelas são usadas só para dados tabulares. Se uma tabela for usada para posicionar elementos (tabela de leiaute), ela não tem semântica de tabela.
Formas de atender
Basta uma delas. A primeira é a preferida; as demais são alternativas para exceções.
- Uma forma de atender: não há tabelas de leiaute; toda tabela apresenta dados.
- Outra forma: as tabelas de leiaute que existirem não têm semântica de tabela.
- 1.3.1 (A)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Reserve o componente de tabela para dados e resolva colunas de texto com o grid de leiaute do sistema de design. Revise e-mails e páginas antigas que usam tabela para posicionar elementos.
Formulário em colunas
O formulário tem rótulos à esquerda e campos à direita.
Errado: Tabela como grade
No protótipo
Formulário montado com o componente de tabela.
O leitor anuncia tabela, linhas e colunas sem sentido.
Certo: Grid de leiaute
No protótipo
Formulário no grid de colunas do sistema de design.
Nenhuma tabela falsa é anunciada.
Faça leiautes com flexbox e grid. Se uma tabela de leiaute for inevitável, como em alguns e-mails, retire a semântica com role="presentation" e não use th nem caption nela.
E-mail de confirmação
O e-mail usa tabela para posicionar o logo e o texto.
Errado: Tabela de leiaute com semântica
<table> <tr><td><img …></td><td>Seu agendamento…</td></tr> </table>O leitor anuncia uma tabela de 1 linha e 2 colunas.
Certo: Semântica removida
<table role="presentation"> <tr><td><img …></td><td>Seu agendamento…</td></tr> </table>O leitor lê só o conteúdo.
Inclua a remoção de tabelas de leiaute no escopo das migrações e revise os templates de e-mail do serviço. Ferramentas automáticas ajudam a localizar tabelas sem cabeçalho.
Migração do portal antigo
O portal de 2010 será migrado.
Errado: Migração literal
Escopo
Copiar o HTML antigo como está.
As tabelas de leiaute seguem confundindo leitores.
Certo: Migração com limpeza
Escopo
Refazer leiautes com CSS e manter tabelas só para dados.
A estrutura do novo portal nasce correta.
Use a lista de tabelas do leitor de tela e confira se cada tabela anunciada contém dados cruzados. Registre tabelas usadas só para posicionar elementos que ainda são anunciadas como tabela.
Página de contato
O leitor de tela lista as tabelas.
Errado: Tabela de leiaute anunciada
Leitor de tela anuncia: “Tabela, 2 colunas, 5 linhas” (formulário de contato)
Não há dados; é leiaute.
Certo: Nenhuma tabela falsa
Leitor de tela anuncia: “Nenhuma tabela encontrada”
O formulário é lido como formulário.
Use a tabela do editor só quando houver dados cruzados. Para colunas de texto ou uma imagem ao lado do texto, peça um bloco de leiaute ao time.
Foto e texto lado a lado
A notícia precisa de uma foto ao lado do parágrafo.
Errado: Tabela para alinhar
No editor
Tabela de 1 linha: foto na primeira célula, texto na segunda.
Cria uma tabela sem dados.
Certo: Bloco de mídia
No editor
Bloco “Imagem com texto” do gerenciador.
O leiaute sai certo sem tabela falsa.