Formulário semântico e acessível

Esta semana peguei um formulá¡rio de boleto online para torná-lo semântico e acessível, e no momento em que alterava aqui e ali, pensei: preciso escrever artigos voltados ao desenvolvimento web.

Não vou falar de tags como h1, h2, h3, h4, h5, h6 ou p, span, blockquote etc. Todos já estão “carecas” de saber o que é certo e o que é errado.

Tive a idéia de escrever um artigo sobre formulários depois de alterar um boleto online que continha um fonte totalmente fora da realidade. Então, estou pegando um simples formulário escrito em HTML, para deixá-lo acessével e correto, semanticamente falando.

Há vá¡rios tópicos que eu poderia abordar sobre usabilidade, mas não quero o fazer agora. O que eu quero é mostrar a parte “por trás”, da coisa. Sei que muitos ainda se esquecem de escrever corretamente formulários HTML, pensam em tudo, mas quando chega a hora, esquecem de coisas simples que fazem grande diferença aos usuários de leitores de tela ou para aqueles que por algum motivo, não podem usar o mouse.

O preview abaixo, é de um simples formulário de 5 campos, escrito do modo antigo:

Clique aqui para ver o código fonte.

Vamos fazer a mágica? Abaixo, segue a lista das etapas para a transformação do formulário:

Adaptação do fonte para XHTML 1.0 Transitional;
Eliminanação das tags table, tr, td e font;
Folha de estilos separada da estrutura de marcação;
Insersão de tags específicas para formulários semânticos e acessíveis: fieldset, legend, label, optgroup, tabindex e accesskey;
Validação do formulário.

Pronto! Confira o resultado do novo formulário semântico e acessível logo abaixo ou clique aqui para ver o resultado:

Baixe os fontes formulário acessível

Tags: Web Design e CSS, Web Standards

Este artigo foi postado em Sábado, nov 4th, 2006 às 5:28 PM na categoria Web Design e CSS, Web Standards. Você pode ver todos os comentários deste artigo, cadastrando em seu navegador ou software, o endereço Feed: RSS 2.0.

Deixe seu comentário logo abaixo, ou envie trackback.

11 comentários em “Formulário semântico e acessível”

Rael B. Riolino:
nov 5th, 2006 at 2:16 AM
Muito bom Thalis….

ainda nao conhecia o optgroup, tabindex e acesskey

valeu pela dica! ;-0
zidane:
nov 5th, 2006 at 5:28 PM
Muito legal. eu estava olhando os códigos e vi como melhorou… principalmente tirando as tags de tabelas e colocando tags mais atuais do xhtml. da pra perceber que usando css o layout do formulario fica muito mais amigavel, bem web 20 mesmo.

inte
jose jr:
nov 5th, 2006 at 10:21 PM
Perfeito rapaz!

Confesso que tinha muitas duvidas com formulários Tableless e semânticos, como esse. Esse artigo foi milagroso pra mim.

Agradeço em nome de todos!
Chan:
nov 6th, 2006 at 8:06 AM
bacana cara, mas nao esta tao bacana no IEca, no Moz ficou blz.
e outra e se tiver mais colunas o formulário ? tipo pra formulário simples blz mas uns forms mais complexos a coisa nao fica tao bonita.
eu fiz de teste, ahh nao sou especialista em css e nem html antes das criticas, bem se quiser melhorar ele pode ficar a vontade rs.. se tiver dicas hehehe ta ai o link a href=”http://chander.20ver.com.br/testeFormulario.htm” title=”formulario”>
tiago:
nov 6th, 2006 at 8:34 AM
gostei muito do artigo, thalis. eu, há tempos que procurava exemplo de formularios semanticos e acessiveis. isso me abriu mais a mente…

chan, valeu tb pelo formulario que vc fez.

grande abraço a voces
Igor Escobar:
nov 6th, 2006 at 8:59 AM
Boa Thallis !
É pelo jeito eu estou por dentro da coisa rsrs, Faço meus formulários desta forma também =)

Seria legal se você falasse um pouco do significado semântico das tags utilizadas (fieldset, legend, label, optgroup, tabindex e accesskey) já que estamos tratando de acessibilidade e semântica =)
ricardo:
nov 6th, 2006 at 5:22 PM
opaaaa!!!!!! muito legal… nem imaginava que existia alguma stagas dessas que você colocou no codigo fonte.

assim como o igor, voce poderia explicar ela, thalis.

abração
digao:
nov 7th, 2006 at 8:37 AM
Valeu, cara! Muito válido esse arquivo pra mim. Acho que pra muita gente que ainda não tem experiência.

Sucesso
tigo di:
nov 14th, 2006 at 2:41 AM
bom bro, gostei mesmo, só não vejo semântica nessa quebra de linha.
“display:block” resolve o caso entre labels e inputs.
[]’s/t+
Leandro Vieira Pinho:
dez 5th, 2006 at 9:55 AM
Ótima abordagem Thalis,

Veja este tutorial também: http://www.themaninblue.com/experiment/InForm/index.htm é excelente.

Um abraço.
Thalis Valle:
dez 5th, 2006 at 10:29 AM
Valeu pela colaboração Leandro. Abraços