Um formulário é um elemento que permite que o usuário forneça dados em um campo ou um 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 com várias etapas, 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, porque exigem conhecimento de todos os elementos que já abordamos, além de regras adicionais específicas 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 de componente deste 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 aos elementos do formulário.
Campos
A estrutura básica 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 alguns recursos e funções, como estados de campo, propriedades e valores, são intrínsecos aos elementos HTML. Os campos personalizados exigem que você adicione manualmente a ARIA.
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, também adicione atributos de preenchimento automático do HTML aos campos. A adição de atributos de preenchimento automático permite uma definição ou identificação de finalidade mais detalhada para agentes do usuário e tecnologias adaptativas (AT).
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 é útil principalmente para pessoas
com distúrbios cognitivos e de leitura e para quem usa AA, 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 pode ser enviado automaticamente quando um campo recebe foco ou quando um usuário adiciona conteúdo a ele.
Rótulos
Os rótulos informam ao usuário sobre a finalidade de um campo, se ele é 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 o tempo todo e descrever com precisão o campo do formulário para os usuários.
Um dos princípios fundamentais de formulários acessíveis é estabelecer uma conexão clara e precisa entre um campo e o rótulo dele. Isso é verdade tanto visualmente quanto programáticamente. Sem esse contexto, o usuário pode não entender como preencher os campos no 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 de forma programática e visual. Um método é usar o fieldset e o padrão de legenda para agrupar elementos semelhantes.
Descrições
As descrições de campo são semelhantes aos rótulos em termos de propósito, porque 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 instruções do formulário forem suficientemente descritivos.
No entanto, há situações em que adicionar informações adicionais é ú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 (por exemplo, dd-mm-aaaa).
Há muitos métodos diferentes que podem ser usados para adicionar descrições de campos aos
formulários. Um dos melhores métodos é adicionar um atributo
aria-describedby
ao elemento de formulário, além de um elemento <label>. O leitor de tela
vai ler a descrição e o rótulo.
Se você adicionar o atributo
aria-labelledby
ao elemento, o valor do atributo vai substituir o texto no
<label>. Como sempre, teste o código final com todos os ATs que você
planeja oferecer suporte.
Erros
Ao criar formulários acessíveis, há muitas coisas que você pode fazer para evitar que os usuários cometam erros. No início deste 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ê acha que seu formulário é, um usuário vai cometer um erro.
Quando um usuário encontra um erro no formulário, a primeira etapa é informar o erro. O campo em que o erro ocorreu precisa ser identificado claramente, e o erro precisa ser descrito para o usuário em texto.
Há diferentes métodos para exibir mensagens de erro, como:
- Um modal inline próximo ao local em que 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 da 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.
- É possível usar o atributo HTML required. O navegador vai fornecer uma mensagem de erro genérica com base nos parâmetros de validação informados.
- Ou você pode usar o atributo aria-required para compartilhar uma mensagem de erro personalizada com as ATs. Somente os ATs vão receber a mensagem, a menos que você adicione outro código para que ela fique visível para todos os usuários.
Quando um usuário achar que todos os erros foram resolvidos, permita que ele reenvie o formulário 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:
Teste seu conhecimento
Teste seus conhecimentos sobre formulários acessíveis
Qual das opções a seguir é a entrada de formulário mais acessível?
Email address: <input type="email" required><label>Email address: <input type="email" required></label><label>Email address: <input type="email" required autocomplete="email"></label><label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>