Tutorial Avançado de HTML: Formulários Acessíveis

Formulários não são a coisa mais fácil pra usuários com deficiências. Navegar por uma página com conteúdo escrito é uma coisa, saltitar entre campos de formulário e inserir informação é outra bem diferente. Por causa disso, é uma boa idéia adicionar vários elementos ao formulário para torná-lo mais acessível.

Rótulos

Cada campo de formulário deve ter seu próprio rótulo (label).  A tag label resolve isso, com um atributo for que a conecta a algum elemento do formulário.

<form>
<label for="seuNome">Seu nome:</label> <input type="text" name="seuNome" id="seuNome" />
...


Labels ainda vem com um bônus: navegadores visuais renderizando a página fazem com que eles sejam clicáveis, colocando o foco no elemento do fomulário associado.

Nota: os atributos name e id são obrigatórios – o name para que a aplicação manipule o campo e o id para que o label se associe a ele.

Conjuntos de campos e legendas

Você pode agrupar campos, por exemplo nome (primeiro, último, do meio, título, etc.) ou endereço (linha 1, linha 2, país, código postal, etc.) usando a tag fieldset.

Dentro de um conjunto de campos, você pode definir uma legenda com a tag legend.

Nota: Navegadores visuais geralmente representam um conjunto de campos com uma borda ao redor deles e a legenda inserida no canto superior-esquerdo da borda.

<form action="algumscript.php" >
<fieldset>
<legend>Nome</legend>
<p>Primeiro nome: <input type="text" name="primeiroNome" /></p>
<p>Último nome: <input type="text" name="ultimoNome" /></p>
</fieldset>
<fieldset>
<legend>Endereço</legend>
<p>Endereço: <textarea name="endereco" ></textarea></p>
<p>CEP: <input type="text" name="cep" /></p>
</fieldset>
...


Grupos de Opções

A tag optgroup agrupa opções numa caixa de seleção. Ela requer o atributo label, que é o texto que vai ser mostrado como um pseudo-cabeçalho que não pode ser selecionado, precedendo aquele grupo na lista dropdown em navegadores visuais

<select name="pais">
	<optgroup label="África">
		<option value="gam">Gambia</option>
		<option value="mad">Madagascar</option>
		<option value="nam">Namíbia</option>
	</optgroup>
	<optgroup label="Europa">
		<option value="fra">França</option>
		<option value="rus">Russia</option>
		<option value="uk">Reino Unido</option>
	</optgroup>
	<optgroup label="America do Norte">
		<option value="can">Canada</option>
		<option value="mex">México</option>
		<option value="eua">EUA</option>
	</optgroup>
</select>

Navegando pelos campos

Como links, campos de formulário (e grupos de campos) precisam ser navegáveis sem o uso de um dispositivo apontador, como o mouse. Os mesmos métodos usados em links para facilitar essa tarefa podem ser usados em elementos de formulário – tabulação e teclas de acesso.

Os atributos accesskey e tabindex podem ser adicionados nas tags individuais do formulário, como input, e também em tags legend.

<input type="text" name="nome" accesskey="n" tabindex="1" />


Pra mais informações sobre isso, veja a página Links Acessíveis.

Páginas Relacionadas

• Próxima Página: Declarações
• Página Anterior: Dominando Tabelas
• Formulários (Tutorial Iniciante de HTML)
• Links Acessíveis – Para mais sobre tabulação e teclas de atalho.

Exemplos

• Grupos de Opções (o exemplo também demonstra o uso de label, fieldset e legend)

Referência

• label
• fieldset
• legend
• optgroup