Construindo formulários HTML/XHTML acessíveis

Nível iniciante

Este tutorial foi escrito em três partes distintas classificadas pelo nível conforme links para navegação a seguir:

Nível Iniciante | Nível Intermediário | Nível Avançado

Introdução

Na primeira parte deste artigo sobre a acessibilidade em formulários, vamos analisar os princípios básicos a serem considerados com o objetivo de se ajudar o maior número possível de pessoas a interagir com os formulários do site.

Normalmente, para novatos, os formulários se constituem em um aspecto complicado do desenvolvimento Web, porque sua implementação vai além de incluir informações em elementos da marcação, para serem vistos pelos visitantes do site. Formulários coletam informações e dados a serem processados. E da mesma forma como deve ser difícil ao novato entender a mecânica de coletar e processar dados, também é difícil o entendimento dos aspectos de acessibilidade relacionados aos formulários.

Conteúdos estáticos do site serão facilmente visualizados e entendidos por usuários de leitores de tela ou até mesmo, talvez, por um computador Braille se cosiderarmos que você usou uma marcação semântica e bem estruturada (tal como h1 - h6 para cabeçalhos). Ler ou deixar de ler um conteúdo estático no site é uma atitute passiva do visitante, mas ao encontrar um formulário o usuário quer interagir com ele e de repente muda-se um campo - é uma via de duplo sentido. Para formulários, a marcação torna-se crucial para a correta captura de informações do usuário.

Elementos HTML usados

Os elementos HTML usados para marcação de formulários são:

<form> - container para todos os elementos do formulário;
<input> - podem ser de variados tipos como: text, submit, button, radio button e checkbox;
<textarea> - para entrada de textos multilinhas, tais como comentários;
<select> - também conhecido como drop-down-list, ou pull-down menu (à sua preferência);

Existe também o elemento <button>, que vem sendo pouco usado ultimamente.

Estes elementos são renderizados e têm um comportamento semelhante em diferentes browsers (GUI-based). Pode haver algumas diferenças de estilização, mas essencialmente um campo de texto se parece com um campo de texto e uma drop-down-list cumpre a finalidade de uma drop-down-list. Teoricamente a interação com formulários deveria ser fácil para qualquer um, independente do dispositivo ou browser usado.

Fundamentos do layout

Quando você lê o título de um artigo no jornal, fica sabendo que o texto que se segue diz respeito àquele título, assim como, o texto que aparece embaixo de uma foto, é a descrição da foto. Por vezes um layout de página não segue padrões e em consequência você encontra dificuldade em entender o que se passa - duas fotos sendo uma ao lado da outra com um texto entre elas, OK você é inteligente e vai acabar descobrindo a que foto se refere o texto.

Para formulários existem alguns consagrados princípios CHI (Computer-Human Interaction - Interação Computador-Humano) que funcionam de modo análogo ao jornal, isto é, formulários serão bem mais fáceis de se usar se projetados conforme determinados princípios de uso. Por isto tecnologias assistivas, tais como leitores de tela, seguem àqueles princípios quando interpretam formulários em páginas web. Assim, ao encontrar um campo "text input", os leitores de tela esperam que o texto descritivo daquele "text input" esteja antes do campo... e é ali, antes do campo que o leitor vai procurar a descrição! Então, se o leitor de tela encontra algo como abaixo, ele vai ter dificuldade em interpretar o formulário:

HTML

<input type="text" name="nome" id="nome"/> - Entre seu primeiro nome<br />
<input type="text" name="sobrenome" id="sobrenome"/> - Entre seu sobrenome<br />

Dificuldade por quê? Porque o leitor de tela poderá associar incorretamente o segundo input com a primeira linha de texto como mostrado a seguir:

HTML

<input type="text" name="sobrenome" id="sobrenome"/><-- Entre seu sobrenome<br />

Form element is associated with incorrect text

Esta é a receita para o desastre. Mas, quem foi que colocou o texto depois do campo? Bem, para alguns tipos de input isto é absolutamente correto:

HTML

<input type="checkbox" name="athome" id="athome"/> Please call me at home<br />
<input type="checkbox" name="atwork" id="atwork"/> Please call me at work<br />

Siga as recomendações abaixo e os seus formulários serão automaticamente mais acessíveis pois é desta forma que os dispositivos adaptados esperam que eles sejam::

Layout para elementos de formulário- CHI Boas técnicas
Elemento e tipo HTML	Sequência no layout	Exemplo
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 (usar atributo)	`<input type="button" name="cmdChkAvail" value="Check Availability" />`
input type="submit"	Não se aplica (usar atributo)	`<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 (usar atributo)	`<button name="cmdBigButton">Go on, click me!</button>`

Mas , e a acessibilidade?

O quê? Oh sim, nada se disse sobre as "tags de acessibilidade". Acredite em nós, seguindo as diretrizes acima e construindo seus formulários de acordo com os princípios CHI, eles serão mais acessíveis ecumprirão melhor sua finalidade. Até aqui mostramos as boas práticas e como manter as coisas simples e sem complicações (aprofundaremos neste fundamento mais adiante). E, com o propósito de manter as coisas simples, devemos considerar como usar (ou não usar) scripts para construir formulários mais acessíveis.

Scripts

Considere que scripts estão desabilitados no lado do usuário

Um formulário deve cumprir sua finalidade independentemente de scripts estarem ou não habilitados no browser (ainda que eles suportem scripts - lembre-se que alguns dispositivos adaptados não suportam scripts). Validação e manipulação de dados no lado do servidor possibilita o funcionamento de formulários independentemente de scripts no lado do usuário. Muitos desenvolvedores ainda se utilizam largamente de scripts no lado do cliente para validação, ou mesmo disparadores de eventos (observe a seguir um formulário, cujo funcionamento é totalmente dependente de scripts estarem habilitados no lado do usuário:

HTML

<input type="button" value="Place order" onclick="document.forms('main'.submit();" />

e uma maneira alternativa não dependente de scripts que cumpre a mesma finalidade:

HTML

<input type="submit" value="Place order" />

Assegure-se de que seu formulário funciona com scripts desabilitados - entregue a tarefa ao servidor!

Evite usar JavaScript para navegação

Por outro lado quais as implicações de se usar JavaScript que desencadeia no formulário uma ação fora do controle do usuário? O exemplo clássico ocorre com um elemento de formulário do tipo "drop-down-list" usado como ferramenta para navegação. Muitos sites utilizam este recurso que consiste em ao usuário selecionar um item do menu, automaticamente abre-se a página selecionada. Para usuários impossibilitados de usar mouse (pessoas cegas navegando com leitores de tela, pessoas com restrições motoras e outros casos mais) o uso do menu torna-se muito difícil (ou mesmo impossível).

The options in this dro-down list are difficult, if not impossible, to use without a mouse

Usar o teclado para tentar selecionar as opções da lista não terá efeito, pois resultará sempre em seleção e ativação do primeiro item da lista. A tentativa de encontrar uma solução inteligente resultou em uma armadilha para a acessibilidade. Mantenha as coisas simples - use uma lista "drop-down-list" sempre que assim desejar, mas forneça um botão "Go" (Ir) para o usuário ativar sua seleção, conforme mostrado abaixo:

Drop-down list made accessible by addition of a Go button

Uma observação sobre tabelas

Uma outra questão envolvendo a acessibilidade em formulários, diz respeito ao uso de tabelas para se conseguir um layout alinhado e certinho. Esta prática não implica necessariamente em um problema de acessibilidade, mas poderá vir a causar problemas - um layout de formulário baseado em tabela é irrelevante para um leitor de tela, o conteúdo é lido na ordem em que foi escrito no código fonte. Se você dispor seu layout de formulário, agrupando os rótulos descritivos e os controles do formulário você "quebrará" o relacionamento entre eles. Isto pelo fato de que leitores de tela ' linearizam' as tabelas e interpretarão erroneamente o formulário, conforme exemplo mostrado na imagem a seguir:

Table layouts for forms can confuse screen readers if you are not careful

Sumário

Estas são algumas regras básicas relacionadas ao layout e ao posicionamento de elementos de formulários e seus rótulos descritivos, que servirão como um bom ponto de partida para projetar formulários. Na página a seguir, no nível intermediário, analisaremos alguns elementos específicos do HTML para acessibilidade, tais como label, fieldset, legend e optgroup.

Nível Iniciante | Nível Intermediário | Nível Avançado

Compartilhe essa matéria com seus amigos

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.