Formulários em uma Web para Todos.

Gilberto Porta.
Marco Antonio de Queiroz - MAQ.

O uso de formulários é a forma mais comum para a prestação de serviços interativos. Também costuma ser o primeiro obstáculo sério na implementação de acessibilidade na web. A maior parte dos usuários utilizam os formulários com o mouse e o teclado, mas existem aqueles que só os manipulam por via do teclado, outros que precisam de indicações bem claras de como e onde preencher os dados, devido a possuírem baixa visão, ou ainda aqueles que fazem uso de softwares de varrimento de tela como é o caso das pessoas com deficiências neuromotoras graves.

Existem poucas coisas que podem tornar os formulários totalmente inacessíveis a quem usa apenas o teclado como forma de interação com um computador. Uma delas é o uso de javascript. É necessário ter alguns cuidados adicionais quando se faz uso de javascript para manipular dados de um formulário, para definir o foco em um controle, para alterar elementos, ou mesmo para submeter um formulário para processamento pelo servidor. Cada um destes aspectos pode tornar o formulário difícil ou mesmo impossível de preencher caso não seja possível usar o teclado. Observe sempre se aquilo que você consegue fazer com o mouse também consegue fazer usando apenas o teclado.

Os elementos básicos para a construção de um formulário são:

• form: o container do formulário;
• input: que especifica vários tipos de campos definidos pelo atributo type como, text, password, submit, reset, button, radio, file, hidden, image e checkbox;
• textarea: campo de texto multilinha, como observações e comentários;
• select: Utilizado para listas selecionáveis (como um menu);

Com esses elementos básicos pode-se criar um formulário simples e organizado. Ele deve ser criado de uma forma lógica, na qual a sequência de preenchimento faça sentido e em que seja explicita a agregação dos diversos campos que o compõem. Os navegadores e leitores de texto possuem uma ordem de leitura e visualização desses elementos e seus rótulos. Por exemplo, ao encontrar um campo <input type="text"..., os leitores de tela esperam que o rótulo esteja antes do campo, mas ao encontrar um <input type="checkbox" ..., o leitor espera encontrar o rótulo depois do campo.

O objetivo desse texto não é o de mostrar como construir formulários, mas como podemos deixá-los acessíveis. Dessa forma, não iremos nos limitar às funções dos elementos e atributos de formulários, mas nos aprofundarmos nos elementos e atributos que permitam sua melhor visualização ou utilização por via do teclado, lembrando sempre que nosso intuito é o de construirmos uma web para todos e que, portanto, esse formulário deve estar estruturado e renderizado de maneira a servir adequadamente também às pessoas com baixa visão ou sem deficiências.

Criação de formulários acessíveis.

Nosso principal passo é a adição de elementos que garantam a acessibilidade dos formulários. Esses elementos são: label, fieldset, legend e optgroup. Além deles, determinadas configurações de alguns dados nos elementos comuns irão nos ajudar a deixar os formulários totalmente acessíveis.

O elemento label:

O elemento label é utilizado em conjunto com os atributos "for" e "id" para relacionar de forma clara o elemento ao seu rótulo. Seu uso é obrigatório para que a visualização da entrada de dados e a leitura de um leitor de telas dessa entrada seja feita com facilidade em cada elemento do formulário, pois através dele o usuário sabe o que preencher naquela entrada e sua ausência significa erro grave de acessibilidade. Ele pode ser usado em conjunto com todos os elementos de formulário, exceto no elemento button.

Até há pouco tempo, era importante que o elemento label envolvesse o rótulo e o elemento de controle (input, select etc).
Ex:

<label for="nome">Nome:
<input type="text" id="nome" name="nome" />
</label>

Note que, dessa forma, o elemento label foi aberto antes do rótulo e fechado depois do campo referido. Isso fazia com que o usuário de leitor de telas focasse de uma única vez o rótulo e o campo a ser preenchido. Entretanto, as tecnologias mais modernas já procuram o rótulo na hora da edição, podendo o elemento label ser fechado antes do campo, ex:

<label for="nome">Nome: </label>
<input type="text" id="nome" name="nome" />

Mas, no caso do rótulo precisar ficar após à edição, abre-se o label antes do input e fecha-se após o rótulo.
Ex:

<label for="ckb"><input type="checkbox" id=ckb" name="ckb" />Rótulo</label>

Os elementos fieldset e legend

O elemento FIELDSET é utilizado para agrupar os itens de formulários com características em comum e sempre deve estar dentro do elemento form. Por exemplo, um formulário para cadastro pode ter seus elementos agrupados da seguinte forma:
Dados de identificação: Nome, sobrenome, endereço físico, endereço de email;
O elemento legend é utilizado em conjunto com o fieldset e deve estar dentro deste, melhorando a acessibilidade e entendimento do usuário. Nesse caso, toda vez que um campo for anunciado, será precedido do conteúdo do legend.
Por exemplo: Em um formulário onde o legend seja "Dados Pessoais", e os labels dos inputs sejam "Nome", "endereço" e "Telefone", sonoramente leitores gráficos de qualidade sonorizarão:
"Dados pessoais" "Nome" - Edição
"Dados pessoais" "Endereço" - Edição
"Dados pessoais" "Telefone" - Edição
Além, claro, da etiqueta visual com "Dados pessoais" que pode ser estilizada no formulário para o melhor entendimento das divisões do mesmo.

O elemento optgroup:

O elemento optgroup é usado em conjunto com o elemento select. Trabalha de forma semelhante ao elemento legend no fieldeset, dando um título e agrupando os itens do elemento select, quando necessário. Cada elemento optgroup recebe um "label" que dará título ao grupo criado.

Ex:
<form id="form" method="post" action="">
<p>
<label for="lista-de-mercado">Lista de Mercado:<br />
<select name="select" id="lista-de-mercado">
<option selected="selected" value="1">Escolha um item</option>
<optgroup label="Laticíneos">
<option value="2">Leite desnatado</option>
<option value="3">Queijo ralado</option>
<option value="4">Queijo prato</option>
<option value="5">Requeijão</option>
</optgroup>
<optgroup label="Verduras">
<option value="6">Alface</option>
<option value="7">Alho</option>
<option value="8">Berinjela</option>
<option value="9">Cenoura</option>
<option value="10">Pimentão</option>
</optgroup>
</select>
</label>
</p>
</form>

• O elemento optgroup torna, junto com o atributo label (Laticínios e Verduras), visualmente mais acessível os itens a serem escolhidos.
• Para os leitores de tela a acessibilidade está sendo feita pelo elemento label (Lista de Mercado).
• Os elementos optgroup tornam a escolha do item de uma lista mais simples para quem enxerga, porém, para usuários de leitores de tela não foram observadas mudanças. Esses elementos simplesmente foram ignorados.

Alguns exemplos dos elementos e atributos de acessibilidade:

Controle: <input type="text" size="zzz" value="xyz" ...
Função: introduzir um campo de edição.

• O atributo value="xyz" é obrigatório e deve ter algum conteúdo. Quando utilizado, é necessário tomar o cuidado de não repetir a mesma informação do label. Ele tem por função orientar pessoas com baixa visão para o local onde deve iniciar a digitação.
  • Esse atributo pode prejudicar a acessibilidade para pessoas cegas, pois ao digitarem os dados no campo de edição o conteúdo do value pode ser empurrado à direita, tornando-se parte dos dados digitados.
    Ex.: Marco Antonio de QueirozDigite seu nome.
    Esse procedimento, porém, é limitado por erro à alguns navegadores, como o IE 6.0 à primeira entrada (input) do formulário.
  • O WCAG 2.0 retirou o value de seus itens de acessibilidade.
• O atributo size="zz" é importante para limitar o conteúdo que será processado em um banco de dados, como por exemplo, em um formulário de pesquisa. De forma independente de quantos caracteres tenham sido escritos pelo usuário, só irá para o banco de dados a quantidade de caracteres configurados no atributo size. Ele Também é responsável pela largura do campo tomando como referência a largura das letras.
  Ex.: <input type="text" size="30"...
  Esse campo terá o comprimento de 30 letras.
• Deve-se fixar a largura na folha de estilos (CSS)

Controle: <textarea ...
Função: Introduzir uma área editável de texto:
Exemplo de área de texto:
<label for="obs">Observações:
<textarea rows="z" cols="xxx" id="obs" name="obs"> área de texto</textarea> </label>

• O atributo cols="xxx" é importante para a definição da área a ser escrita para o navegador somente texto Webvox, muito utilizado por pessoas cegas no Brasil, pois ele define quantos caracteres, incluindo espaços, poderão ser escritos no textarea para os usuários desse navegador. Deve-se colocar, dessa forma, um valor alto nesse atributo, no mínimo de 250. Em navegadores gráficos, ele dará a largura da área editável em caracteres. Assim, para evitar que fique exageradamente larga e, ao mesmo tempo, dê uma boa margem de edição aos usuários do Webvox, deve-se fixar a largura na folha de estilos (CSS).
• O atributo rows="z" tem a função de mostrar a quantidade de linhas da caixa de edição. Ao ultrapassar o valor definido, aparece uma barra de rolagem vertical. Um número razoável de linhas garante a leitura do texto já digitado sem a necessidade de ter que rolar demais a barra de rolagem.

Controle: <input type="radio"...
Função: Usados para situações de resposta de escolha única.
NOTA: para agrupar diversos botões e garantir que somente uma opção seja marcada, usa-se o mesmo valor no atributo name.

Exemplo de Botões de opção:
<form>
<fieldset> <legend>Escolha um meio de transporte:</legend>
<label for="carro">
<input id="carro" type="radio" name="transporte" value="carro">Carro</label>
<label for="barco">
<input id="barco" type="radio" name="transporte" value="barco">Barco</label>
<label for="trem">
<input id="trem" type="radio" name="transporte" value="trem">Trem</label>
</fieldset>
</form>

• O elemento fieldset com sua legenda, repete a pergunta a cada opção.
• Um detalhe importante desse exemplo é o do atributo label estar com seu texto colocado depois do controle.

Controle: <select...
Função: Mostrar uma lista de elementos definidos pelo desenvolvedor para que o usuário faça uma escolha.

Exemplo de select:
<label for="cidade">Escolha uma Cidade:
<select id="cidade" name="cidade">
<option value="BH">Belo Horizonte</option>
<option value="RJ">Rio de Janeiro</option>
<option value="SP">São Paulo</option>
</select></label>

• Pode-se notar nnesse exemplo que a principal característica de acessibilidade é o próprio elemento label

Controle: <input type="image" ...
Função: permite construir botões gráficos com a mesma funcionalidade do <input type="submit"...
Exemplo de um botão gráfico do tipo input="image":
<input type="image" alt="Enviar!" title="Enviar!" name="botao" src="enviar.gif" width="109" height="41" />

• Neste exemplo, o básico em acessibilidade é o atributo alt para textualizar a imagem para leitores de tela. Esse texto também aparecerá no Internet Explorer ao posicionarmos o cursor sobre a imagem.
• Recomendamos utilizar o atributo title com o mesmo valor do alt para mostrar o texto alternativo ao posicionar o cursor sobre a imagem em outros navegadores gráficos.

Alguns Formulários com Acessibilidade.

Formulário 1:

<form id="form" method="post" action="enviar.php">
<fieldset><legend>Dados para Contato</legend>
<label for="nome">Nome:<input type="text" name="nome" id="nome" value="*" /></label>
<label for="email">E-mail:<input type="text" name="email" id="email" value="*" /></label>
<label for="assunto">Assunto:<input type="text" name="assunto" id="assunto" value="*" /></label>
<label for="msg">Mensagem:<textarea rows="6" cols="500" name="msg" id="msg">*</textarea></label>
<input type="submit" value="Enviar Mensagem" id="enviar" />
</fieldset>
</form>

• O elemento <fieldset> deve estar dentro do elemento <form>.
  Serve para demarcar como estando no mesmo bloco o assunto apontado pelo elemento <legend>;
• O elemento <legend> deve estar dentro do elemento <fieldset>. Serve para criar uma legenda para o elemento <fieldset>.
• NÃO utilize o atributo tabindex="número" nos campos. Ele faz com que alguns leitores de tela fiquem presos ao formulário, interrompendo a navegação por via da tecla TAB nos demais elementos da página, só permitindo a navegação por via do teclado com as SETAS. Uma solução parcial para esse problema só é alcançada quando se indexa com esse atributo todos os links e formulários da página. Mesmo assim, alguns leitores de tela não conseguem resolver a navegação por teclas de atalho ou saltos diretos.
• No campo textarea usa-se como limitador de caracteres o atributo cols="número" (no nosso caso 500). Esse valor tem que ser alto porque é ele que limita o número de caracteres que os usuários do navegador Webvox podem digitar no campo.
  • Pode-se usar javascript para limitar a quantidade de caracteres nos navegadores gráficos, mas basta desabilitar o script, ou navegar com um navegador somente texto como o Webvox, que o javascript perderá a função.
  • Para que a caixa de edição não fique exageradamente grande, defina uma largura para ela na folha de estilos (CSS), de preferência com valores relativos, caso contrário ficará com uma largura de 500 caracteres.
  • Se você definir a largura em porcentagem, faça testes em várias resoluções para chegar a uma largura ideal ao seu layout.

Formulário 2:

Veja um exemplo de campo utilizando um script para apagar o valor do atributo value quando este for focado pelo mouse ou pelo teclado e o faz reaparecer quando o foco sair do campo sem ter sido preenchido:

<label for="busca">Pesquisar no site.
<input type="text" name="busca" id="busca"
title="Digite a palavra desejada (Tecla de atalho 0)"
accesskey="0" size="30" maxlenght="40" value="*"
onfocus="if (this.value == '*') {this.value='';}"
onblur="if (this.value == '') {this.value='*';}" />
</label>

• O atributo value="*" preenche o campo com o asterisco;
  • onfocus - Apaga o asterisco do campo quando este for focado pelo mouse ou teclado;
  • onblur - Preenche o campo com o asterisco quando o foco é retirado do campo se este não for preenchido.
• O atributo title="valor" transmite informação quando o mouse foca o campo de edição;
• O atributo accesskey="valor" cria uma tecla de atalho (chave de acesso) para se chegar direto ao formulário de qualquer área da página;
• Para limitar a quantidade de caracteres nos campos <input type="text".... /> ou <input type="password".... /> você deve usar o atributo maxlenght="número".
• O atributo size permitirá ao usuário digitar uma quantidade de caracteres indefinida, porém só a quantidade configurada no size será implementada no banco de dados.
  • O atributo size delimita a quantidade de informação a ser processada, enquanto que o maxlenght a quantidade de informação a ser digitada. Dessa forma, caso os dois estejam juntos e com o mesmo valor, o atributo size torna-se desnecessário.

Dicas:

• Para facilitar a estilização, use na folha de estilos as IDs já usadas para referenciar os rótulos (label) aos campos;
• label { cursor:pointer; } - O cursor:pointer faz com que apareça a "mãozinha" quando apontamos o rótulo com o mouse. Recurso importante aos usuários com baixa visão ou pouca experiência.
• Evento onchange: quando se utiliza o onchange numa combobox com links, cada um deles é ativado ao ser marcado pelas setas ao se navegar pelo formulário. Dessa forma, se houver 20 links para outros endereços naquela combobox, para se chegar ao último, somos obrigados, com leitores de tela gráficos, a entrar automaticamente em cada link e voltar novamente para a lista de links da combo até o link desejado, perdendo-se um tempo absurdo. A solução é permitir a marcação da opção desejada e um envio através de um submit (botão de Ok) ao final, ou então a troca do evento por um onclick.

Disponibilizado em: 06/10/2008.