Formulários

Formulários são as páginas mais propoensas a ocorrer erros de acessibilidade, embora eles sejam os elementos com maior quantidade de recursos para acessibilidade. Um HTML básico organizado de forma semântica já é o suficiente para eliminar grande parte dos problemas.

Um exemplo de formulário pouco acessível

Faça o teste: navegue neste formulário com o uso de um leitor de telas.

Enviar

Os erros deste formulário:

• Não associa rótulos aos campos de entrada. Este formulário usa o atributo placeholder para informar o que deve ser preenchido, porém, este texto some ao começar a digitar no campo. O rótulo dos campos deve estar sempre visível;
• Não informa quais campos são obrigatórios ou opcionais;
• Não apresenta mensagens de erro do formulário como um todo e da validação de cada campo;
• Não possui um distinção visual de qual campo está recebendo o foco no mesmo, mesmo aplicando o outline padrão do navegador;
• Possui um rótulo genérico para o botão de submissão;
• Não possui uma distinção visual para o estado de foco do botão.

Corrigindo alguns problemas

Veja agora como fica o nosso formulário com algumas melhorias apenas a nível de HTML. Faça novamente o teste com o leitor de telas.

Nome completo (obrigatório):

E-mail (obrigatório):

Telefone (opcional): Formato: (99) 99999-9999.

Finalizar cadastro

O que fizemos:

• Colocamos um rótulo visível (tag <label>) e associado a cada campo através do atributo for, com indicação de quais campos são obrigatórios e opcionais. Os campos obrigatórios também possuem o atributo required;
• Colocamos a instrução para preenchimento do telefone de forma sempre visível;
• Customizamos o outline para que fique visível qual campo contém foco;
• Mudamos o rótulo do botão para um mais significativo;
• Adicionamos estilos aos estados do botão: hover, focus e active.

Melhorando com WAI-ARIA

Nosso formulário ainda tinha alguns problemas para informar os erros e o resultado da validação do formulário, por isso, fizemos mais algumas alterações e adicionamos um pouco de JavaScript.

Nome completo (obrigatório):

E-mail (obrigatório):

Telefone (opcional): Formato: (99) 99999-9999.

Finalizar cadastro

O que fizemos:

• Adicionamos áreas para mensagem informativa de forma geral do formulário e uma área de mensagem abaixo de cada campo com erro. Esta área de mensagem informativa do formulário possui os atributos role="alert", que diz que é uma mensagem de alerta e aria-live="assertive" que diz que é um campo que pode sofrer modificações no conteúdo em tempo de execução e o leitor de telas é informado quando há modificação neste campo;
• A indicação do erro é feita de três formas: com uma cor, um texto informativo e um ícone de alerta. Assim, não usamos somente uma forma para representar esta informação, beneficiando pessoas videntes, com deficiências cognitivas, que usam leitor de telas ou que possuem daltonismo;
• Além do atributo required, também adicionamos o atributo de estado aria-invalid que pode ter os valores true ou false para indicar se o campo está válido ou inválido;
• Adicionamos um pouco de JavaScript no botão do formulário para fazer uma validação melhor do formulário e controlar a exibição das mensagens de erro.