Anderson Sa

Em um belo dia, daqueles que trabalhamos bastante, eu recebo uma ligação com a seguinte indagação: “Há como ordenar as colunas de uma tabela com Javascript?” Eu prontamente respondi “Sim. É possível.”

É inegável que a funcionalidade é muito boa. Seria chato e demorado fazer uma requisição para o servidor simplesmente para reordenar uma coluna específica. Ainda mais se pensarmos em milhares de acessos simultâneos.

No site DHTML Crossbrowser Fácil — Um Guia Rápido para Desenvolvedores (leitura recomendada) que o Elcio criou, há um exemplo para classificar colunas de uma tabela usando Javascript.

Porém a tabela que eu precisava ordenar é mais complexa. Trata-se de uma listagem com colunas numéricas, alfanuméricas e ainda por cima, havia uma coluna com radiobuttons. Para a “minha salvação” encontrei a página sorttable: Make all your tables sortable no site kryogenix.org.

A biblioteca é bem interessante. Com uma instalação simples é possível ordenar vários tipos de dados, indicar quais colunas não devem ser classificadas e além disso, definir o rodapé da tabela. Assim é possível não mexer nos dados que estão no fim da tabela.

Eu estou com um projeto aqui na empresa para tornar o site mais acessível. A princípio não será totalmente acessível, pois a estratégia adotada é fazer a adequação em fases. Neste momento, a principal mudança será nos formulários.

Pesquisando na internet, eu encontrei alguns posts sobre formulários acessíveis. Porém, no meu caso eu preciso aplicar as tags <fieldset>, <legend> e <label> em um projeto gráfico já estabelecido, e além disso, manter o restante da codificação da página como está.

Um grande problema que eu encontrei, foi na definição de estilos para a legenda. Isto porque há diferenças de posicionamento da <legend> entre os IEs e Firefox. O artigo Legends of style no site Tyssen Design resolveu o meu problema.

Basicamente consiste em colocar um <span>, ou um <div> dentro da tag <legend> e aplicar os estilos nestes elementos. Veja os exemplos para formatar a legenda que o John Faulds disponibilizou. Com isto, eu consigo adaptar as páginas existentes.

Posts sobre formulários acessíveis

SERPRO - Acessibilidade na web - Formulários
A List Apart: Articles: Prettier Accessible Forms
WebAIM: Creating Accessible Forms
Tutorial CSS - Formulários acessíveis - Parte 1