Semântica de tabela
O que a norma pede
Toda tabela de dados está marcada no código como tabela, com linhas, colunas e células reconhecíveis pela tecnologia assistiva.
- 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:
Quando os dados se cruzam em linhas e colunas, use o componente de tabela do sistema de design, e não uma grade de cards que imita uma tabela. Preveja como ela fica em telas pequenas sem perder a relação entre os dados.
Horários de ônibus
Linhas de ônibus e horários de saída.
Errado: Grade de caixas
No protótipo
Blocos alinhados visualmente, sem componente de tabela.
O leitor lê uma sequência de números soltos.
Certo: Componente de tabela
No protótipo
Tabela com colunas “Linha”, “Saída” e “Chegada”.
Cada horário fica ligado à sua linha.
Monte tabelas de dados com table, tr, th e td. Se precisar usar div, aplique os papéis ARIA de tabela de forma completa, e nunca transforme a tabela em imagem ou canvas.
Tabela de horários
Implementação da grade de horários.
Errado: Grid de divs
<div class="grade"> <div>Linha 101</div><div>06:00</div> </div>Não há tabela para o leitor de tela.
Certo: Tabela HTML
<table> <tr><th scope="col">Linha</th><th scope="col">Saída</th></tr> <tr><td>101</td><td>06:00</td></tr> </table>O leitor navega por linhas e colunas.
Inclua tabelas acessíveis nos critérios de aceite das páginas de dados e evite publicá-las só em PDF ou imagem. Tabelas de horários e resultados são informação pública essencial.
Resultado de concurso
A lista de classificados tem nome, inscrição e nota.
Errado: Imagem da planilha
Publicação
Print da planilha publicado como imagem.
Pessoas cegas não conferem o resultado.
Certo: Tabela na página
Publicação
Tabela HTML com busca por nome ou inscrição.
Todos conferem o resultado.
Use os comandos de tabela do leitor de tela: ele precisa anunciar “tabela” com o número de linhas e colunas e permitir navegar célula a célula. Registre as tabelas que só funcionam visualmente.
Tabela de horários
O leitor de tela chega à grade de horários.
Errado: Não reconhecida
Leitor de tela anuncia: “Linha 101 06:00 07:10 Linha 102 06:15…”
Os dados viram uma sequência sem estrutura.
Certo: Reconhecida
Leitor de tela anuncia: “Tabela, 3 colunas, 12 linhas”
A pessoa navega com os comandos de tabela.
Crie tabelas com a ferramenta do editor, e não com espaços ou tabulações, e não cole prints de planilhas. Evite células mescladas, que complicam a leitura.
Tabela de taxas
A página mostra as taxas de cada serviço.
Errado: Alinhada com espaços
No editor
“Certidão R$ 20,00” em parágrafos.
A relação entre serviço e valor se perde.
Certo: Tabela do editor
No editor
Tabela com colunas “Serviço” e “Valor”.
Cada valor fica ligado ao seu serviço.