É muito comum utilizarmos formulários com campos de textos editáveis e outros tipos de campos em nossas páginas. Por exemplo, para assinar o livro de visitas, para cadastramento, seleção de opções, entre outros.
11.1 Utilizando o elemento label
Quando o elemento editável recebe o foco, para que o leitor de tela identifique para o usuário a que campo se refere, é necessário utilizar o elemento label associado ao elemento input, através da do atributo for do label e id do input, caso contrário o leitor de tela irá pronunciar algo tipo "campo editável", sem identificar a que campo se refere.
11.1.1 Utilizando o label em campos de edição do tipo type="text"
Exemplo
Exemplo do código
<form action="formulario1.htm" method="get" name="formulario1">
<label for="s_nome">Seu nome</label><br />
<input id="s_nome" size="15" type="text" /><br />
<label for="s_email">Seu e-mail</label><br />
<input id="s_email" size="15" type="text" /><br />
<input value="Enviar" name="submit" type="submit" />
</form>
Comentário do código
Neste exemplo, temos um formulário onde deverá ser preenchido o nome e o e-mail da pessoa. Ao navegar com a tecla Tab e posicionar o foco dentro de cada campo, o Virtual Vision irá ler o titulo do campo, ou seja, ao posicionar o cursor dentro do campo nome, será lido: SEU NOME, e, ao posicionar o cursor no campo e-mail, será lido: SEU E-MAIL.
11.1.2 Utilizando o label em opções de seleção tipo type="radio'
Para que o grupo de informações seja identificado e seu título pronunciado, os itens de seleção devem ser encapsulados em um elemento fieldset
Para que o texto de cada item seja pronunciado ao receber o foco, é necessário utilizar o elemento label associado ao input em cada item. Isto permitirá também que a seleção do item seja feito ao clicar no texto ou no botão de seleção.
Exemplo
Exemplo do código
<form name="DV" method="get" action="dv.asp">
<fieldset>
<legend>Selecione um identificador</legend>
<label for="mod11" 1. MÓDULO 11 </label> <input id="mod11" name="modulo" value="mod11" type="radio" />
<label for="cnpj">2. CNPJ - cadastro nacional de pessoa jurídica</label> <input id="cnpj" name="modulo" value="cnpj" type="radio" />
<label for="cpf">3. CPF - cadastro de pessoa física</label> <input id="cpf" name="modulo" value="cpf" type="radio" />
<input name="submit2" type="submit" value="Enviar" /><br />
</fieldset>
</form>
Comentário do código
Esta é a apresentação normal de botões de seleção. A navegação será feita com as teclas seta para cima e seta para baixo. Cada item, ao receber o foco, terá o título pronunciado e a seleção será feita pressionando a barra de espaço.
Um bom teste para verificar se o elemento
labelestá funcionando corretamente, é tentar selecionar o item apenas clicando com o mouse sobre o texto.
11.1.3 Utilizando o label em campos de pesquisa
Muitos sites omitem o elemento label (rótulo do campo) do campo de pesquisa, o que tornará impossível para um leitor de tela determinar a que este campo se refere.
Caso seja extremamente necessário utilize CSS para posicionar o elemento label fora da área visual da tela.
Não utilize o display:none pois a maioria dos leitores de tela não conseguirão interpretar o rótulo.
Exemplo
Exemplo do código
<form action="pesquisa.html" method="get" name="pesquisa">
<label class="contexto" for"s_pesquisa">Pesquisar</label><br />
<input value="Enviar" name="submit" type="submit" />
</form>
.contexto {
position: absolute;
left: -9999em;
width: 1em;
overflow: hidden;
}
Comentário do código
Desta forma o elemento
labelnão estará sendo exibido sobre o campo mas estará existente no formulário e poderá ser corretamente interpretado pelo leitor de tela.
11.2 Utilizando botões gráficos do tipotype="image"
Evite utilizá-los, dando preferência ao uso de objetos naturais como o buttom.
Caso utilize um gráfico para submeter um formulário, coloque o texto alternativo através do atributo alt da imagem. Informe tratar-se de um botão pois o leitor de telas não identificará o objeto como botão.
Exemplo
Exemplo do código
<form id="cadastro" action="cadastro.asp" method="get" name="cadastro">
<label for="nome1">Seu nome</label><br />
<input id="nome1" name="nome1" size="15" type="text" /><br />
<label for="s_email1">Seu e-mail</label><br />
<input id="s_email1" name="s_email1" size="15" type="text" /><br /> <br />
<input src="images/stories/ok.gif" name="imageField" alt="OK" type="image" />
</form>
Comentário do código
O botão de opção padrão será lido naturalmente pelo leitor de telas, porém, ao utilizar imagens em substituição, a não utilização do atributo
altinviabilizará a sua interpretação.
11.2 Ordem de navegação via teclado com o atributo tabindex
Somente utilize o tabindex se for extremamente necessário, pois este atributo muda a ordem natural de navegação. Se nenhum atributo tabindex for inserido a ordem natural de sequência dos campos receberá o foco.
Exemplo
Exemplo do código
<form name="livro" action="http://www.hpg.com.br/scripts/cgi-bin/FormMail.pl" method="post">
<label for="nome">Nome</label><br />
<input id="nome" name="nome" size="45" tabindex="1" type="text" /><br />
<label for="email">E-mail</label><br />
<input id="email" name="email" size="45" tabindex="2" type="text" /><br />
<label for="pais">País</label><br />
<input id="pais" name="s_pais" size="45" tabindex="3" type="text" /><br />
<label for="estado">Estado</label><br />
<input id="estado" name="s_estado" size="45" tabindex="4" type="text" /><br />
<label for="comentarios">Comentário</label><br />
<textarea id="comentarios" name="comentarios" cols="55" rows="7" tabindex="5">
</textarea><br />
<input value="Enviar" name="submit" tabindex="6" type="submit" /></form>
Comentário do código
À medida que for pressionada a tecla Tab, o cursor irá navegar na ordem crescente definida pelo atributo
tabindex.