Formulários Acessíveis

Para que um formulário seja realmente acessível, precisamos estar cientes da existência de algumas tags básicas e para que elas servem. Vamos a elas:

• form: cria uma área para a entrada de dados podendo conter campos de texto, checkboxes, radio-buttons etc.
• fieldset: utilizado para agrupar elementos no formulário. ex: dados pessoais, dados profissionais etc.
• legend: define um nome para cada fieldset criado
• label: define um “label” para um determinado controle.
• input, checkbox e radiobutton: elementos de um form.

Conhecida as principais tags, vamos a criação do formulário. Primeiro criaremos a área válida do form:

1 2 3

<form action="/">     aqui iremos montar nosso form </form>

Dentro da área criada pela tag <form>, iremos dividir as informações em Dados Pessoais e Dados Profissionais utilizando as tags <fieldset> e <legend> para então adicionarmos os campos a serems preenchidos:

1 2 3 4 5 6 7 8 9 10

<fieldset>     <legend>Dados Pessoais</legend>     <p><label for="txtNome">Nome <input type="text" id="txtNome" value="" /></label></p>     <p><label for="txtEmail">Email <input type="text" id="txtEmail" value="" /></label></p> </fieldset> <fieldset>     <legend>Dados Pessoais</legend>     <p><label for="txtNome">Nome <input type="text" id="txtNome" value="" /></label></p>     <p><label for="txtEmail">Email <input type="text" id="txtEmail" value="" /></label></p> </fieldset>

Para finalizar, um botão para o envio dessas informações:

1	<p><input type="submit" value="Enviar" /></p>