Formulários
É 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 e etc.
Quando o campo de texto editável recebe o foco, um grande problema é que, muitas vezes, o Virtual Vision não lê o título do campo, deixando de informar o que deve ser preenchido. Com isto, apesar de saber que algo tem que ser preenchido, não se sabe qual deverá ser o conteúdo. Para resolver este problema, basta utilizar o elemento <LABEL> envolto ao campo, dando um título ao mesmo.
Utilizando o elemento <LABEL>Exemplo do código
<form id="cadastro" action="cadastro.asp" method="GET" name="cadastro">
<label for="s_nome">Seu nome</label><br>
<input id="s_nome" type="text" name="s_nome" size="15" ><br>
<label for="s_email">Seu e-mail</label><br>
<input id="s_email" type="text" name="s_email" size="15" ><br>
<input type="submit" value="Enviar" name="submit2">
</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.
Para manter a ordem de navegação no formulário, utilize a propriedade TABINDEX
<form name="livro" action="http://www.hpg.com.br/scripts/cgi-bin/FormMail.pl" method="post">
<label for="nome">Nome</label><br>
<input type="text" id="nome" name="s_nome" size="45" tabindex="1"><br>
<label for="email">E-mail</label><br>
<input id="email" type="text" name="s_email" size="45" tabindex="2"><br>
<label for="pais">País</label><br>
<input id="pais" type="text" name="s_pais" size="45" tabindex="3"><br>
<label for="estado">Estado</label><br>
<input id="estado" type="text" name="s_estado" size="45" tabindex="4"><br>
<label for="comentarios">Comentário</label><br>
<textarea id="comentarios" name="s_comentarios" cols="55" rows="7" tabindex="5"></textarea><br>
<input type="submit" value="Enviar" name="submit" tabindex="6"> </form>
Comentário do código
À medida que for pressionada a tecla TAB, o cursor irá navegar na ordem crescente definida pelo atributo TABINDEX.
Utilizando Botões gráficos
Ao utilizar o botão gráfico para submeter um formulário, criado com o elemento <INPUT> e o atributo TYPE="image", providencie o texto alternativo através do atributo ALT="...".
<form id="cadastro" action="cadastro.asp" method="GET" name="cadastro" >
<label for="s_nome">Seu nome</label><br>
<input id="s_nome" type="text" name="s_nome2" size="15" ><br>
<label for="s_email">Seu e-mail</label><br>
<input id="s_email" type="text" name="s_email2" size="15" ><br>
<br>
<input type="image" border="0" name="imageField" src="/imagens/ok.gif" width="22" height="22" alt="OK">
</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 ALT=".." inviabilizará a sua interpretação.
Utilizando Botões de seleção
Para que o título do grupo de botões "Selecione um dos itens abaixo" seja pronunciado o grupo de botões deverão estar encapsulados em um elemento <fieldset> .
Para que o título do botão seja pronunciado ao mover o cursor com as setas, é necessário utilizar o elemento <LABEL> em cada item.
Exemplo do código