Bem, hoje vou falar um pouco sobre meu projeto final da faculdade que foi sobre acessibilidade.

Para as pesssoas que estudam acessibilidade para web, eu penso que elas ficam mais impressionadas com a programação de um formulário, com isso hoje vou explicar passo a passo como fazer um formulário acessível.

Os programadores normalmente constroem os formulários em listas, fazendo assim o seu primeiro erro. A forma mais correta e acessível de fazer um formulário é separando suas linhas ( label e input) por div, sendo assim mais acessível para os usuário com deficiente e facilitando o uso da tecla TAB. Abaixo vou por um exemplo desse formulário e explicar cada passo dele!

EXEMPLO:

<div id=”formulario”>
<form action=”formulario.php” method=”post”>
<div>
<label for=”nome” >Nome</label><input tabindex=”1″ type=”text” name=”nome” id=”nome” />
</div>
<div>
<label for=”telefone”>Telefone</label><input tabindex=”2″ type=”text” name=”telefone” id=”telefone” />
</div>
<div>
<label for=”email”>Email</label><input type=”text” tabindex=”3″ name=”email” id=”email” />
</div>
<div>
<label for=”assunto”>Assunto</label><input type=”text” tabindex=”4″ name=”assunto” id=”assunto” />
</div>
<div>
<label for=”mensagem”>Mensagem</label>
<textarea id=”mensagem” name=”mensagem” tabindex=”5″ rows=”20″ cols=”20″></textarea>
</div>
<div>
<input type=”submit” tabindex=”6″ value=”enviar” />
</div>
</form>
</div>

O form é sempre usado nos formulário, onde é necessário colocar o action e o method.

As “DIV” estão dividindo o formulário em linhas, nelas vocês podem colocar id’s ou classes. No css dessas divs vocês iram apenas usar um padding para separar-las e qualquer outro estilo que queira usar.

Agora todos devem estar se perguntando por o for no label e os ids nos input e no textarea. A resposta é simples, se todos perceberam eles são denomidos com as mesmas palavras, isso faz com que quando você clique em cima da palavra nome no formulário o campo de texto do nome será selecionado automáticamente, ajundando assim quando o usuário usar a tecla TAB.

O TABINDEX é usado normalmente com a primeira letra do label, um exemplo quando o label for nome, no tabindex se usa-se a letra “N”, assim o usuário apertando a letra “N” o campo de texto do nome será automáticamente selecionado, nesse caso eu usei uma numeração por ordem crescente.

Agora só para se certificar vou falar sobre as outras tags usadas no input, que são o type, name, rows, cols e a class quando necessário.

O type você classifica o input como texto, senha, checkbox, entre outros. Já quando é um botão de enviar como é o caso do último input do formulário é necessário colocar type submit, no qual o usuário apertando a tecla ENTER enviará seu formulário preenchido.

O name é usado para especificar o nome do campo o qual você vai colocar na programação php ou aspx.

As tags ROWS e COLS são obrigatórias quando posto um textarea em seu formulário, sem eles sua página não passará na validação da W3C, com isso você pode colocar qualquer numeração e ao mesmo tempo colocar uma classe, podendo assim mudar o estilo no css.

E a class para colocar o estilo no seu campo de texto, como todos sabem para passar pelo W3C é obrigatório colocar classes porque assim você pode repitir sempre quando necessário essa classe, já com o id você não pode repitir pois é obrigatório ter id’s diferentes numa página, se tiver id’s repitidos numa mesma página seu código não passará pela validação da W3C.

E para terminar esse post a última coisa para um formulário acessível e colocar no seu css o estilo focus. É muito simples colocar esse estilo, você simplesmente terá que colocar input:focus{} e textarea:focus{} e classificar assim o estilo que você quer que apareça quando o usuário estiver usando o campo selecionado.

Agora um exemplo de formulário acessível.

E para quem quer saber mais sobre acessibilidade é so entrar no guia que eu desenvolvi como projeto final da faculdade, nele tem todas as regras da WCAG 1.0 www.guiadeacessibilidade.com

Abraço galera.