Ágora ref: Table with sort columns

Análise ao componente

Pretende-se:

  • (A) uma tabela estruturada de acordo com as regras gramaticais do HTML5 com: <caption>, <th> e <td>;
  • (B) cada coluna permite 3 formas de ordenar: original, crescente e decrescente

Síntese da análise

Nota prévia

  • NOKE corresponde a melhoria
  • NOK corresponde a algo que não está bem
  • OK significa que está correto

A análise à estrutura anatómica (resposta a A) da tabela permite concluir que:

  • (OK) tem <caption> OK
  • (OK) tem <th> células cabeçalho para cada coluna OK
  • (OK) tem <td> células dados OK

A análise às funcionalidades de ordenação (B) permite concluir que:

  • (NOKE) visualmente existe um indicador de qual é o estado da ordem aplicado no momento. Esta inferência não é explicita na leitura dos ícones. Melhoraria se complementássemos o ícone com um tooltip adicional (algo como title=”ordem original, pressione para alterar”);
  • numa abordagem “não visual” (p.e. com leitor de ecrã):
    • (NOK) o Estado não é informado (NOK);
    • (NOK) a ação não é conhecida (NOK) - o que acontece se pressionar no botão?;

Solução

Encontrar uma forma de informar o Estado/Ação do Botão.

Para atingir uma solução “não visual” uma das formas poderá passar por colocar no texto alternativo do ícone a informação sugerida abaixo.

Detalhe da Análise

1º Estado do botão - por defeito

imagem

Qual é o Estado? “Coluna ordenada pela ordem original”; Qual é a Ação? “pressione para alterar a ordem da coluna”

2º Estado do botão

imagem

Qual é o Estado? “Coluna ordenada pela ordem decrescente”: Qual é a Acção? “pressione para alterar a ordem”

3º Estado do botão

imagem

Qual é o Estado? “Coluna ordenada pela ordem crescente” Qual é a ação? “pressione para alterar a ordem”