Tabelas

GUIA DO COMPONENTE

Explore os comportamentos antes de definir a interface.

Design de Interação

Questionamentos que devem ser feitos ao se projetar componentes do tipo Tabelas.

Importante:
Dependendo do contexto de construção de seus respectivos componentes, é possível que haja mais questionamentos, bem como alguns dos apresentados aqui não ser necessários. A avaliação precisa ser feita caso a caso.

Projetando para a "não interação"

Antes de ler os dados é possível perceber que há relação entre linhas e colunas?
A tabela possui título ou legenda que explica sua finalidade?
Cabeçalhos de linhas e colunas são visualmente claros?

Projetando para uso com mouse (qualquer dispositivo de apontamento)

Quando houver ordenação ou ação na tabela, há feedback visual no controle?
Áreas clicáveis dentro de células são distinguíveis do dado estático?
Tabela com rolagem horizontal indica que há mais conteúdo?

Projetando para uso com gestos

Em telas pequenas, a tabela continua legível e compreensível?
Rolagem horizontal, se existir, é fácil de executar?
A reorganização responsiva preserva cabeçalhos e relações dos dados?

Projetando para uso com teclado (qualquer dispositivo que não seja de apontamento)

Tabela rolável horizontalmente pode receber foco para permitir rolagem por teclado?
Controles de ordenação ou ação possuem foco visível?
A ordem de foco acompanha a ordem visual e lógica dos dados?

Projetando para uso com leitor de telas

A legenda ou título da tabela é anunciado?
Cabeçalhos de coluna e linha são associados aos dados?
Mudanças de ordenação são anunciadas quando aplicável?

Métodos de Interação

Possíveis métodos de interação em componentes do tipo Tabelas.

Importante:
Apenas os principais métodos estão listados aqui. Componentes customizados devem ter estudos aprofundados.

Interação com mouse (qualquer dispositivo de apontamento)

Tabelas estáticas não exigem interação.
Clicar em cabeçalho ordenável altera a ordenação quando esse recurso existir.
Links e botões dentro de células seguem seus próprios padrões.

Interação com teclado (qualquer dispositivo que não seja de apontamento)

Tabelas estáticas não devem adicionar foco em células sem necessidade.
Controles internos devem ser alcançáveis por TAB.
Contêiner rolável pode receber tabindex="0" para permitir rolagem por teclado.

Interação com teclado (ou gestos) + leitor de telas

Use caption para título ou descrição da tabela.
Use th com scope para cabeçalhos simples.
Tabelas complexas devem associar cabeçalhos e células de forma programática.

Gherkin

Metodologia BDD (Behavior-Driven Development ou Desenvolvimento Orientado ao Comportamento) com foco em 3 pilares: Histórias de Usuário, Critérios de Aceite e Sintaxes Gherkin (Dado (Given), Quando (When), Então (Then)). , Ref 2 (abre em uma nova aba).

Cenário: Considerando que estou em uma página que contém tabelas

Navegação por teclado

QUANDO uso teclado para navegar por uma tabela com controles interativos
VEJO foco visível nos controles disponíveis
ENTÃO, quando a tabela possui rolagem horizontal
VEJO que consigo acessar e rolar o contêiner quando necessário

Leitor de telas para desktop

Quando uso um leitor de tela no computador (NVDA, JAWS, VoiceOver) e navego pelo componente
- OUÇO o título ou legenda da tabela.
- OUÇO que o conteúdo é uma tabela.
- OUÇO cabeçalhos relacionados às células de dados.
ENTÃO, quando interajo com o componente quando aplicável
OUÇO ou percebo que a informação, estado, conteúdo ou ação correspondente está disponível.

Leitor de telas para dispositivos móveis

QUANDO uso um leitor de tela no celular (Talkback, VoiceOver) e deslizo o dedo para navegar pelo componente, acontece o seguinte:
- OUÇO o título ou legenda da tabela.
- OUÇO que o conteúdo é uma tabela.
- Consigo compreender a relação entre cabeçalhos e dados.
ENTÃO, quando interajo com o componente quando aplicável
OUÇO ou percebo que a informação, estado, conteúdo ou ação correspondente está disponível.

Pontos de Atenção

Pontos de atenção para se preocupar em componentes do tipo Tabelas.

Não use tabela para layout visual.
Tabelas complexas exigem associação mais cuidadosa entre cabeçalhos e células.
Versões responsivas não devem remover relações semânticas importantes.

Referências

Referências adicionais sobre componentes do tipo Tabelas.

Importante:
A maior parte das referências estão na plataforma do curso junto com as aulas citadas neste material.

Isenção de responsabilidade:
Os links indicados aqui não são recomendações, mas apenas uma curadoria de referências onde você pode encontrar componentes construídos. É importante ressaltar que não há uma unificação nos formatos de construção e não há garantias de que os links mencionados aqui cumpram todos os padrões de design. Dúvidas devem ser direcionadas para as respectivas equipes envolvidas nas construções dos materiais indicados. Antes de "copiar" algum modelo apresentado, leve em consideração que todos os materiais são atualizados constantemente e que os padrões (principalmente proprietários) podem sofrer alterações.