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:

Formulário de exemplo 1

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:

  1. Adaptação do fonte para XHTML 1.0 Transitional;
  2. Eliminanação das tags table, tr, td e font;
  3. Folha de estilos separada da estrutura de marcação;
  4. Insersão de tags específicas para formulários semânticos e acessíveis: fieldset, legend, label, optgroup, tabindex e accesskey;
  5. 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:

Exemplo de formulário semântico

Baixe os fontes formulário acessível

Tema Portal WordPress - PortalPress


13 Responses to “Formulário semântico e acessí­vel”

  1. zidane

    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

    Reply
  2. jose jr

    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!

    Reply
  3. Chan

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

    Reply
  4. tiago

    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

    Reply
  5. Igor Escobar

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

    Reply
  6. ricardo

    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

    Reply
  7. digao

    Valeu, cara! Muito válido esse arquivo pra mim. Acho que pra muita gente que ainda não tem experiência.

    Sucesso

    Reply
  8. tigo di

    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+

    Reply
  9. Neto

    Rapaz, parabéns.
    Estava procurando aluns exeplos para passar para um amigo meu que está aprendendo, e vim para aqui.
    Gostei do material. Dei uma olhada o código, muito enxuto e organizado.

    Obrigado por compartilhar.

    Reply

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>