Formulários Acessíveis

Formulários Acessíveis

Elementos básicos para construção de formulários

Um formulário é definido pela tag <form>

?

1 2 3 4

<form>   <input>   <input> </form>

Entrada (Input)

A tag de formulário mais usada é a tag <input>. O tipo de input é especificado com o atributo type (tipo) e existem vários:

"text"; "checkbox"; "button"; "file"; "password"; "submit"; "hidden"; "radio"; "image"; "reset"; "email"; "search"; "url";     "number"; "range"; "tel"; "date"; "datetime" ; "datetime-local"; "time"; "month"; "week"; "color".

Sendo esses em verde novos no HTML5, e ainda não funcionam em todos os navegadores.

Exemplos:

Caixas de Seleção (Checkboxes)

Botões Radiais (Radiobuttons)

Criar um botão

Textarea - Define uma área de texto (um controle de entrada de texto multi-linhas).
Exemplo:

?

1 2	<textarea cols="30" rows="10">O gato estava brincando no jardim. </textarea>

Resultado:


select + option - Define uma lista selecionável (uma caixa drop-down)
Exemplo:

?

1 2 3 4 5 6 7 8

<form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form>

Resultado

 Volvo Saab Fiat Audi 

Datalist + option - Especifica uma lista de opções pré-definidas para um elemento <input>. (HTML5)
Exemplo:

?

1 2 3 4 5 6 7 8

<input list="browsers" name="browser"> <datalist id="browsers">   <option value="Internet Explorer"></option>   <option value="Firefox"></option>   <option value="Chrome"></option>   <option value="Opera"></option>   <option value="Safari"></option> </datalist>

Resultado


Keygen  - Define um campo gerador de chave encriptografada para formulários. (HTML5)
Exemplo: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_keygen

Output - Representa o resultado de um cálculo.
Exemplo: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_output

Estrutura de elementos de formulários - Boas Práticas IHC (Interação Humano-Computador)

Elemento HTML e tipo	Estrutura / Ordem	Example
input type="text"	Rótulo descritivo > elemento HTML	Your First Name<br /> <input type="text" name="txtFirstName" />
input type="password"	Rótulo descritivo > elemento HTML	Your Passnumber<br /> <input type="password" name="txtPassword" />
input type="button"	Não se aplica (se usa o atributo value)	<input type="button" name="cmdChkAvail" value="Check Availability" />
input type="submit"	Não se aplica (se usa o atributo value)	<input type="submit" name="cmdBookNow" value="Place Booking" />
input type="radio"	elemento HTML > Rótulo descritivo	<input type="radio" name="radMarried" value="Yes" /> Yes, I am married<br /> <input type="radio" name="radMarried" value="No" /> No, I am single<br />
input type="checkbox"	elemento HTML > Rótulo descritivo	<input type="checkbox" name="chkSubscribe" value="Subscribe" /> Subscribe to the newsletter
select	Rótulo descritivo > elemento HTML	Title<br /> <select name="ddlTitle"> <option>Mr</option> ... </select>
textarea	Rótulo descritivo > elemento HTML	Your comments<br /> <textarea name="txtComments"></textarea>
button	Não se aplica (se usa o atributo value)	<button name="cmdBigButton">Go on, click me!</button>

Formulários Acessíveis

Label - Uma das tags mais úteis para tornar o formulário mais acessível. Diz ao navegador que o elemento de um determinado id pertence a ela

?

1 2 3

<label for="firstname">First Name</label>   <input id="firstname" name="firstname" size="20" type="text">

Outro benefício é que, acrescentando esta tag, muitos navegadores irão permitir clicar no texto contido em <label> para focar no input; muito útil para "checkboxes" e "radio buttons". Exemplo:
 Clique aqui no texto

Fieldset e Legend - O <fieldset> determina um campo, desenhando uma caixa ao redor dos elementos relacionados e o <legend> define uma descrição para os mesmos.
Exemplo:

?

1 2 3 4 5 6 7

<fieldset> <legend>My Radio Buttons</legend> <input id="rad0" name="rad" type="radio"> <label for="rad0">Option 0</label> <input id="rad1" name="rad" type="radio"> <label for="rad1">Option 1</label> ...</fieldset>

Optgroup - Assim como o <fieldset> relaciona elementos, o <optgroup> relaciona opções usadas na tag <select>


Accesskey - O atributo accesskey é utilizado para criar uma tecla de atalho para dar foco em um elemento HTML, facilitando assim a navegação do usuário (principalmente aquele que tem deficiência ou mobilidade reduzida) pelo teclado.
Exemplo:
HTML tutorial
CSS tutorialUse Alt + accessKey (ou Shift + Alt + accessKey) para acessar o elemento com o accesskey especificado.


Referências:

http://www.w3schools.com/tags
http://www.webstandards.org/learn/tutorials/accessible-forms