Um formulário é um elemento que permite que um usuário forneça dados em um campo ou grupo de campos. Os formulários podem ser tão simples quanto um único campo ou tão complicados quanto um elemento de formulário de várias etapas com vários campos por página, validação de entrada e, às vezes, um CAPTCHA.
Os formulários são considerados um dos elementos mais difíceis de acertar do ponto de vista da acessibilidade, já que exigem conhecimento de todos os elementos que já abordamos, bem como regras adicionais específicas apenas para formulários. Com um pouco de compreensão e tempo, você pode criar um formulário acessível para você e seus usuários.
"Formulários" é o último módulo específico do componente neste curso. Este módulo vai se concentrar nas diretrizes específicas do formulário, mas todas as outras diretrizes que você aprendeu nos módulos anteriores, como estrutura de conteúdo, foco do teclado, e contraste de cores, também se aplicam a elementos de formulário.
Campos
A base dos formulários são os campos. Os campos são pequenos padrões interativos, como um elemento de entrada ou botão de opção, que permitem que os usuários insiram conteúdo ou façam uma escolha. Há uma grande variedade de campos de formulário para escolher.
A recomendação padrão é usar padrões HTML estabelecidos em vez de criar algo personalizado com ARIA, já que determinados recursos e funções, como estados, propriedades e valores de campo, são inerentemente incorporados aos elementos HTML. Os campos personalizados exigem que você adicione o ARIA manualmente.
Não recomendado: HTML personalizado com ARIA
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>
Recomendado: HTML padrão
<form id="sundae-order-form">
<!-- form content -->
</form>
Além de escolher os padrões de campo de formulário mais acessíveis, quando aplicável, você também precisa adicionar atributos de preenchimento automático HTML aos campos. A adição de atributos de preenchimento automático permite uma definição ou identificação mais refinada da finalidade para agentes de usuário e tecnologias assistivas (TA).
Os atributos de preenchimento automático permitem que os usuários personalizem apresentações visuais, como mostrar um ícone de bolo de aniversário em um campo com o atributo de preenchimento automático de aniversário (bday) atribuído a ele. De modo geral, os atributos de preenchimento automático facilitam e aceleram o preenchimento de formulários. Isso é especialmente útil para pessoas com distúrbios cognitivos e de leitura e para quem usa TAs, como leitores de tela.
<form id="sundae-order-form">
<p>Name: <input type="name" autocomplete="name"></p>
<p>Telephone: <input type="tel" autocomplete="tel"></p>
<p>Email address: <input type="email" autocomplete="email"></p>
</form>
Por fim, os campos de formulário não devem produzir mudanças contextuais quando recebem foco ou entrada do usuário, a menos que o usuário tenha sido avisado sobre o comportamento antes de usar o componente. Por exemplo, um formulário não deve ser enviado automaticamente quando um campo recebe foco ou quando um usuário adiciona conteúdo ao campo.
Rótulos
Os rótulos informam um usuário sobre a finalidade de um campo, se o campo é obrigatório e também podem fornecer informações sobre os requisitos do campo, como o formato de entrada. Os rótulos precisam estar visíveis em todos os momentos e descrever com precisão o campo do formulário para os usuários.
Um dos princípios fundamentais dos formulários acessíveis é estabelecer uma conexão clara e precisa entre um campo e o rótulo dele. Isso é verdadeiro tanto visual quanto programaticamente. Sem esse contexto, um usuário pode não entender como preencher os campos do formulário.
<form id="sundae-order-form">
<p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
<p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
<p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>
Além disso, os campos de formulário relacionados, como um endereço de correspondência, precisam ser agrupados programaticamente e visualmente. Um método é usar o padrão fieldset e legenda para agrupar elementos semelhantes.
Descrições
As descrições de campo são semelhantes aos rótulos, pois são usadas para dar mais contexto ao campo e aos requisitos. As descrições de campo não são necessárias para acessibilidade se os rótulos ou as instruções do formulário forem descritivas o suficiente.
No entanto, há situações em que a adição de informações extras é útil para evitar erros de formulário, como transmitir informações sobre o comprimento mínimo de entrada para um campo de senha ou informar ao usuário qual formato de calendário usar (como MM-DD-AAAA).
Há muitos métodos diferentes que você pode usar para adicionar descrições de campo aos formulários. Um dos melhores métodos é adicionar um
aria-describedby
atributo ao elemento de formulário, além de um <label> elemento. O leitor de tela vai ler a descrição e o rótulo.
Se você adicionar o
aria-labelledby
atributo ao elemento, o valor do atributo vai substituir o texto no
<label>. Como sempre, teste o código final com todas as TAs que você planeja oferecer suporte.
Erros
Ao criar formulários acessíveis, há muito que você pode fazer para evitar que os usuários cometam erros. Anteriormente neste módulo, abordamos a marcação clara de campos, a criação de rótulos de identificação e a adição de descrições detalhadas sempre que possível. Mas, não importa o quão claro você ache que seu formulário seja, eventualmente, um usuário vai cometer um erro.
Quando um usuário encontra um erro de formulário, a primeira etapa é informar o erro. O campo em que o erro ocorreu precisa ser claramente identificado, e o erro em si precisa ser descrito ao usuário em texto.
Há diferentes métodos para mostrar mensagens de erro, como:
- Um modal, inline perto de onde o erro ocorreu
- Uma coleção de erros agrupados em uma mensagem maior na parte de cima da página
Preste atenção ao foco do teclado e às opções de região ativa do ARIA ao anunciar erros.
Sempre que possível, ofereça ao usuário uma sugestão detalhada sobre como corrigir o erro. Há dois atributos disponíveis para notificar os usuários sobre erros.
- Você pode usar o atributo HTML required. O navegador vai fornecer uma mensagem de erro genérica com base nos parâmetros de validação arquivados.
- Ou você pode usar o atributo aria-required para compartilhar uma mensagem de erro personalizada com TAs. Somente as TAs vão receber a mensagem, a menos que você adicione um código extra para tornar a mensagem visível para todos os usuários.
Depois que um usuário achar que todos os erros foram resolvidos, permita que ele envie o formulário novamente e forneça feedback sobre os resultados do envio. Uma mensagem de erro informa ao usuário que ele precisa fazer mais atualizações, enquanto uma mensagem de sucesso confirma que ele resolveu todos os erros e enviou o formulário.
Outros critérios de sucesso
A WCAG 2.2 introduziu os seguintes critérios de sucesso que se concentram em experiências de formulário mais acessíveis: