Usabilidade nos formulários
Sexta-feira, 3 de Setembro de 2004
Os formulários são uma das coisas que devemos dar maior atenção quando concebemos um website. Os formulários são um meio de interacção entre o utilizador e o sistema, e por vezes, o bom funcionamento do sistema depende da submissão de dados nos formulários.
Um dos casos que ocorre mais vezes é quando temos um conjunto de caixinhas onde devemos clicar para seleccionar uma ou mais opções. Já repararam quão pequenas são essas caixas? Elas têm cerca de 5 pixels de largura e outros 5 de altura. Uma pessoa que não tenha grande coordenação de movimentos ou que não consiga efectuar movimentos de precisão com o rato tem sérias dificuldades em clicar em qualquer um dos botões…
Aqui vai um exemplo:
Para seleccionar uma caixinha, temos de clicar mesmo no quadradinho!
No entanto, usando a tag label e o atributo for e adicionando o seguinte código à nossa folha de estilos CSS:
label {cursor: pointer;}
O resultado é o seguinte:
Aparece uma “mãozinha” sempre que passamos por cima de um item no formulário, e é possível clicar em TODO o texto, e não apenas na caixinha. Com o aparecimento da “mão” no cursor, temos um feedback positivo de que podemos clicar ali para seleccionar aquele item.
E aqui têm o código HTML do formulário:
<form action="/" class="abrir"><fieldset><legend>Formulário acessível</legend><input type="checkbox" name="hobby" id="ler"/><label for="ler">ler: </label><input type="checkbox" name="hobby" id="escrever" /><label for="escrever">escrever: </label><input type="checkbox" name="hobby" id="vertv" /><label for="vertv">ver TV: </label></fieldset></form>
Estas pequenas alterações podem significar muito para aquelas pessoas que têm dificuldade em usar formulários. Além disso, tornamos o site mais acessível e mais usável, ou como alguém já disse, mais clicável…
Ivo Gomes tem 30 anos e é licenciado em