html [otstproject]construindo Formulários Html/xhtml

[LorDz 14]

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:

 

•O elemento <form> (o "container" para os elementos a seguir);

•<input> - podem ser de variados tipos como: texts, submit, button, radio button e checkbox;

• <textarea> - para entrada de textos multi-linhas, tais como comentários;

•e o elemento <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:

 

<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 abaixo:

 

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

 

Terá o seguinte resultado:

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:

<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 />

 

Por que é correto agora? Considere uma série de checkboxes. Observe no layout a seguir, tudo bem alinhado.

[ ] Please call me at home

[ ] Please call me at my workplace

[ ] Please call me at the shack

 

Mas se você inverter, veja o alinhamento:

Please call me at home [ ]

Please call me at my workplace [ ]

Please call me at the shack [ ]

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

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:

<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:

<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).

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:

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:

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.

Créditos: Maujor.com

Edição/Formatação: LorDz

Editado Agosto 5, 2009 por LorDz

[satan666 12]

muito bom gostei esta bem organizado e com otimo portugues.

 

edited:

e sem conta que o conteudo e de qualidade.

Editado Agosto 5, 2009 por Marcryzius

[LorDz 14]

Muito obrigado esse é meu trabalho.

trazer contéudo de qualidade ao XTibia.

[DaNDaNrOxX 15]

:button_ok: Parabéns LorDz, seu tutorial foi aprovado!

Obrigado por trazer conteúdo à comunidade.

 

~> Tópico movido para a seção correta <~

 

 

Atenciosamente,

Daniel Oliveira.

[pedroca80 0]

Parabens muito bom.