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

5 07 2008

image

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

Exemplos

Referência

Anúncios

Ações

Information

6 responses

7 07 2008
Tutorial Avançado de HTML: Declarações « Codando

[…] Página Anterior: Formulários Acessíveis […]

8 07 2008
Tutorial Avançado de HTML: Dominando Tabelas « Codando

[…] Próxima Página: Fomulários Acessíveis […]

19 07 2008
hospedagem de sites

obrigado

5 08 2008
Tutorial Iniciante de HTML: Formulários « Codando

[…] Formulários Acessíveis (Tutorial Avançado de HTML) […]

30 11 2008
Alex

bacana

8 08 2010
André

Gostaria de saber qual o pedaço de código que faz com que esses dados caiam em um email específico.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: