Toda a gente já teve de lidar com formulários em algum momento. No passado, mais em papel. Hoje, são cada vez mais formulários digitais, uma vez que são utilizados para a interação do utilizador com um sítio Web. Quer se trate de comunicar em linha ou de encomendar um artigo, é possível encontrá-los em todo o lado. As pesquisas na Internet, por exemplo no Google, também são afectadas. O preenchimento destes formulários é difícil para as pessoas com deficiências físicas ou cognitivas, bem como para as pessoas cegas e com deficiência visual. Para que todos possam participar na vida pública, estes formulários devem ser concebidos de forma a serem acessíveis. Mas como é que se criam elementos de formulários acessíveis?
Existem várias técnicas para o efeito. No entanto, antes de se familiarizar com as técnicas, deve familiarizar-se com os elementos do formulário. Estes podem ser classificados em diferentes tipos. Entre outros, existem os seguintes tipos
- Campos de entrada de uma linha
- áreas de entrada de várias linhas
- Listas de seleção
- Botões de rádio
- Caixas de verificação
- Botões para enviar/cancelar
Etiquetagem de campos de formulário
Para conseguir a acessibilidade dos formulários, os vários elementos de controlo devem ser etiquetados. Estas etiquetas permitem que as tecnologias de assistência reconheçam as funções dos controlos e as transmitam ao utilizador. É importante que as etiquetas estejam claramente ligadas aos controlos, caso contrário os leitores de ecrã não conseguirão estabelecer uma ligação com os elementos. Consequentemente, os utilizadores terão dificuldade em compreender o formulário. Não conseguem reconhecer que informação tem de ser introduzida em que campos. Por conseguinte, não conseguem preencher corretamente o formulário e cometem frequentemente erros. No entanto, as descrições não estão todas etiquetadas da mesma forma. O fator decisivo é se devem ser visíveis para todos ou não. Na linguagem de programação HTML, é feita uma distinção entre o elemento label e os atributos aria. O elemento label é utilizado para campos de entrada, listas de seleção, botões de rádio e caixas de verificação e deve ser posicionado em conformidade. Nos campos de entrada e nas listas de seleção, o rótulo é colocado antes dos elementos de controlo. No entanto, no caso dos botões de rádio e das caixas de verificação, é colocada depois do elemento de controlo. O atributo for deve ser adicionado para que as etiquetas possam também ser ligadas ao elemento correspondente.
O atributo aria é utilizado em HTML para botões. Os botões podem, por exemplo, representar a função enviar ou cancelar num formulário. Com os atributos aria, as descrições dos respectivos elementos só são reconhecíveis pelas tecnologias de apoio. Por conseguinte, também podem ser utilizados para campos de entrada que só devem ser visíveis para o leitor de ecrã. Existem muitos atributos aria que são utilizados para melhorar a acessibilidade na Internet. No entanto, estes diferem no seu tipo e função. O chamado aria-label é utilizado para etiquetar um elemento. Naturalmente, também é possível utilizar a mesma etiqueta para vários elementos. Isto é possível através de uma aria-labelledby.
Campos de entrada de uma ou várias linhas
Os campos de entrada são dos elementos mais frequentemente utilizados nos formulários. Podem ser de uma linha ou de várias linhas. Os campos de uma linha são utilizados para consultas curtas, por exemplo, o nome de uma pessoa, um endereço eletrónico, uma rua ou uma cidade.
São criados em HTML com o atributo input-Tag e o atributo type.
Podem também ser acrescentados atributos adicionais, por exemplo, para definir o comprimento da linha.
Os campos de várias linhas são geralmente utilizados para áreas de texto maiores, como mensagens de texto. Estes são então criados com o textarea-Tag . Também aqui, o programador pode especificar o número de linhas e o comprimento da linha. No entanto, para tornar estes campos acessíveis, é necessário adicionar a etiqueta-Tag . No entanto, não é possível criar uma ligação entre a etiqueta e os elementos se estes não estiverem claramente atribuídos. Estes devem então ser ligados entre si através do atributo for e do atributo id. No exemplo HTML seguinte, são implementadas etiquetas simples em campos de entrada deste tipo.
<label for=“vorname“>Ihr Vorname: </label>
<input type“text“ name=“vorname“ id=“vorname“ />
<br />
<label for=“nachricht“>Ihre Nachricht: </label>
<textarea name=“nachricht“ id=“nachricht“> </textarea>
Um campo de entrada de uma linha para o primeiro nome com o tipo "texto" é criado aqui. A etiqueta "O seu primeiro nome:" é tornada visível para todos pelo elemento label. Este elemento é colocado antes do elemento de entrada, uma vez que é emitido antes do campo de entrada. O atributo for no elemento label-Tag e o atributo id no elemento input são utilizados para ligar estas áreas. É importante que ambos os conteúdos sejam idênticos, caso contrário não podem ser ligados. O atributo name serve de identificador para este campo e é necessário para transferir os dados para uma página do servidor.
De seguida, é criada uma área de entrada de várias linhas com o Tag "textarea". O elemento label apresenta então a legenda "A sua mensagem:". Também aqui, as duas áreas com o mesmo conteúdo de texto estão ligadas entre si utilizando os atributos for e id.
Informações gerais
De um modo geral, os formulários devem ser claros e inequívocos. A previsibilidade também é muito útil. Isto permite que os utilizadores reconheçam rapidamente o que lhes é pedido. Uma estrutura clara e sensata é também muito importante. Os elementos de conteúdo relacionados podem ser agrupados. As unidades logicamente separadas também podem ser visualmente separadas. Isto facilita a orientação. Podem também ser separadas umas das outras pela cor. É importante que se mantenha o contraste mínimo de 4,5:1.
Funcionamento do teclado
Uma das características mais importantes para a conceção acessível dos campos de formulário é a sua operabilidade através do teclado. Há pessoas que não podem utilizar um rato devido à sua deficiência. Por isso, é ainda mais importante conceber os formulários de forma a que também possam ser navegados através do teclado. A utilização de elementos de etiqueta e de atributos aria facilita a compreensão e a utilização dos formulários. Outra forma de simplificar a utilização do teclado é a utilização de atalhos de teclado. Aqui podem ser atribuídas combinações de teclas aos elementos do formulário. Isto pode ajudar a aceder mais rapidamente a determinadas áreas ou a operar funções mais rapidamente. O atributo accesskey em HTML é utilizado para este efeito. Este atributo é adicionado ao elemento para o qual deve ser utilizado. A tecla que é utilizada para o comando de teclado é simplesmente atribuída aí. Por exemplo, se atribuir a tecla "n" a um campo ou botão, este pode ser acionado no Windows através do atalho de teclado (Alt + n).
No entanto, é importante garantir que este atalho não está a ser utilizado para outro comando no browser.
Redução ao mínimo
É igualmente aconselhável reduzir todo o processo ao essencial, de modo a não sobrecarregar desnecessariamente as pessoas com deficiência. Por conseguinte, só devem ser solicitados os dados absolutamente necessários. Os dados existentes não devem ser solicitados. Além disso, a visibilidade dos campos do formulário pode ser adaptada à situação. Os campos de introdução facultativa ou os campos ligados a condições não têm de ser visíveis. Podem ser apresentados se forem necessários. Por exemplo, não faz sentido perguntar a idade dos filhos se tiver sido previamente selecionado que não há filhos.
Ajuda e mensagens de erro
Também deve ser fornecida ajuda à introdução de dados. Esta ajuda pode assumir a forma de uma janela de diálogo ou de uma dica de ferramenta. Estas podem ser utilizadas para explicar a introdução de dados com mais pormenor. Outra opção seria estabelecer uma ligação a uma página de ajuda separada. Isto aumentaria enormemente a taxa de sucesso. Os erros continuam a acontecer. Por isso, é importante que as mensagens de erro sejam significativas. Por exemplo, se a palavra-passe foi introduzida incorretamente ao iniciar a sessão, a mensagem "Nome de utilizador ou palavra-passe incorreto" não deve aparecer. É preferível filtrar o erro. O correto seria: "A palavra-passe que introduziu está incorrecta. Por favor, introduza a palavra-passe correcta".
Existem diferentes tipos de erros. Em primeiro lugar, o erro de formato. Neste caso, a palavra-passe é introduzida no formato errado. Por exemplo, são introduzidas letras em vez de números. Também podem ocorrer erros de valor. Isto pode acontecer se for introduzido um valor incorreto apesar de um formato válido. Um exemplo disto seria introduzir o valor 34 para uma data Tag . A mensagem seria então: "O mês de março tem 31 dias. Por favor, introduza novamente o Tag ".
Outro tipo de erro são as entradas inválidas. Aqui, o programador especifica valores que são inválidos. Por último, existe o tipo de erro se não tiver sido efectuada qualquer entrada para os campos obrigatórios. Isto ocorre, por exemplo, se a consulta do endereço de correio eletrónico for um campo obrigatório e a entrada tiver sido esquecida. No entanto, isto também acontece frequentemente com os termos e condições gerais. Em muitos sítios Web, não é possível continuar sem concordar com esta declaração.
Campos obrigatórios
Os formulários contêm frequentemente campos obrigatórios. Estes devem ser identificados como tal. Um símbolo frequentemente utilizado para indicar um campo obrigatório é um "*", que é apresentado junto ao campo do formulário. No entanto, neste caso, deve ser indicado no início do formulário que os campos marcados com um asterisco são obrigatórios. Outra opção é apresentar estes campos obrigatórios numa cor ou tonalidade diferente. No entanto, estas opções não são acessíveis a toda a gente. Para que os utilizadores de leitores de ecrã também os reconheçam, deve ser utilizado o atributo obrigatório ou aria-obrigatório. Isto informa o leitor de ecrã de que se trata de um campo obrigatório.
Espaço reservado
Uma forma de tornar os formulários ainda mais fáceis de compreender e mais conviviais é utilizar marcadores de posição nos campos de formulário. Os marcadores de posição são textos temporários que são apresentados num campo de formulário para indicar ao utilizador o tipo de informação que deve ser introduzida. Estes textos desaparecem assim que o campo de formulário é clicado ou focado e podem ser substituídos pelo conteúdo real do campo de formulário. Os marcadores de posição podem ser facilmente inseridos no elemento de entrada HTML de um campo de formulário, utilizando o atributo marcador de posição.
Guardar entradas
Todos os utilizadores devem ter a possibilidade de guardar as suas entradas. Há sempre problemas com formulários mais longos. Para evitar a perda de dados, estes podem ser guardados. Para este efeito, pode ser implementado um botão que guarda o estado atual. Isto facilita o preenchimento de formulários complexos. Tem também a vantagem de permitir que as entradas em falta possam ser adicionadas mais tarde. A repetição destas entradas leva a que alguns utilizadores não completem o formulário. Isto pode ser irritante tanto para o operador do sítio Web como para o utilizador.
Autenticação e limite de tempo
A autenticação aumenta a segurança na Internet. No entanto, é também uma das barreiras que surgem constantemente. Estas surgem frequentemente em sítios Web onde é necessário iniciar uma sessão. No entanto, para garantir que estes são acessíveis a todos, os formulários devem ser concebidos de forma a não terem barreiras. Em muitos casos, os procedimentos de autenticação são limitados no tempo. Assim, o utilizador dispõe de muito pouco tempo para iniciar a sessão. Muitas vezes são apenas 30 ou 60 segundos. Para muitas pessoas com deficiência, este tempo não é suficiente para iniciar a sessão. Por conseguinte, é importante não estabelecer um limite de tempo para iniciar a sessão.
Os captchas colocam um problema adicional. São utilizados para identificar o utilizador como uma pessoa e não como um computador. Neste caso, pede-se ao utilizador que identifique uma imagem distorcida e introduza o resultado num campo de formulário. No entanto, muitas vezes é necessário clicar em todas as imagens que mostram um carro, por exemplo. No entanto, estas nem sempre são acessíveis. As pessoas cegas ou com deficiência visual não conseguem reconhecer estas imagens. Para ultrapassar esta barreira, deve ser oferecida uma opção áudio.
Em resumo, pode dizer-se que a conceção acessível dos campos de formulário é um passo importante para um ambiente digital acessível. A utilização de uma rotulagem correcta, uma apresentação clara e estruturada, bem como a operação através do teclado e as correspondentes mensagens de erro aumentam a probabilidade de as pessoas com deficiência também poderem preencher os formulários de forma independente.
