Tabelas de layout são uma armadilha

Anos atrás, desenvolvedores criavam layouts de páginas com o elemento table. Esse hábito permanece em códigos antigos e ainda causa danos reais à acessibilidade hoje.

Um leitor de tela trata toda tabela como dados. Ele anuncia linhas, colunas e contagens de células do seu layout, inundando os usuários com uma estrutura sem significado.

Tabelas de layout frequentemente espalham o conteúdo pelas células em uma sequência confusa. A ordem visual e a ordem de leitura se afastam, deixando os usuários perdidos.

O layout moderno pertence ao CSS. Use flexbox ou grid para organizar uma página e mantenha o elemento table apenas para dados tabulares verdadeiros.

Quando você alinha itens em uma linha ou coluna, flexbox é a ferramenta natural. Ele se adapta ao conteúdo sem que nenhuma semântica de tabela atrapalhe.

Para combinar linhas e colunas, o grid do CSS oferece um verdadeiro sistema de layout. Ele separa a aparência da página do significado da marcação.

Com o layout em CSS, seu HTML pode usar marcos de navegação reais, como header, nav e main. Usuários de leitores de tela obtêm um mapa significativo em vez de contagens de células.

Se você realmente não puder remover uma tabela de layout antiga, adicione role=presentation. Isso elimina a semântica de tabela, fazendo com que a tecnologia assistiva ignore a grade.

Trate role=presentation como uma solução temporária. A correção real é migrar para CSS, removendo o problema em vez de apenas escondê-lo.

Ausência de caption e th, além de células que contêm seções inteiras em vez de valores, são sinais de alerta. Esse padrão quase sempre indica uma tabela de layout que precisa ser refatorada.

Faça uma pergunta simples sobre qualquer tabela: ela apresenta dados em linhas e colunas de valores relacionados? Se não, é uma tabela de layout e deve ser substituída por CSS.

Nunca organize uma página com uma table. Use flexbox ou grid, reserve table para dados reais e trate role=presentation apenas como uma solução provisória em códigos antigos.