Formulários

Um formulário é um elemento que permite ao usuário fornecer dados em um campo ou grupo de campos. Os formulários podem ser tão simples quanto um único campo ou complicados como 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 conseguir do ponto de vista da acessibilidade, porque exigem conhecimento de todos os elementos que já abordamos, além de outras regras específicas para formulários. Com certo conhecimento e tempo, é possível criar um formulário acessível para você e seus usuários.

O Formulários é o último módulo específico para componentes deste curso. Este módulo se concentrará nas diretrizes específicas do formulário, mas todas as outras diretrizes que você aprendeu nos módulos anteriores, como estrutura do conteúdo, foco do teclado e contraste de cor, também se aplicam aos elementos de forma.

Campos

A espinha dorsal dos formulários são os campos. Os campos são pequenos padrões interativos, como um elemento de entrada ou de botão de opção, que permitem aos usuários inserir conteúdo ou fazer uma escolha. Há uma grande variedade de campos de formulário para você escolher.

A recomendação padrão é usar padrões HTML estabelecidos em vez de criar algo personalizado com ARIA, já que alguns recursos e funcionalidades, como estados de campo, propriedades e valores, são inerentemente integrados aos elementos HTML, enquanto você precisa adicionar ARIA personalizada manualmente.

<div role="form" id="sundae-order-form">
  <!-- form content -->
</div>

<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, adicione também atributos de preenchimento automático HTML aos campos. Adicionar atributos de preenchimento automático permite uma definição ou identificação de finalidade mais refinada para user agents e tecnologias adaptativas (AT, na sigla em inglês).

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. Em geral, os atributos de preenchimento automático tornam o preenchimento de formulários mais fácil e rápido. Isso é especialmente útil para pessoas com transtornos cognitivos e de leitura e para aquelas que usam TA, 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 do formulário não podem produzir mudanças contextuais quando recebem foco ou entrada do usuário, a menos que o usuário tenha recebido um aviso 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 um usuário sobre a finalidade de um campo, se ele for obrigatório, e também podem fornecer informações sobre os requisitos de campo, como o formato de entrada. Os rótulos precisam estar sempre visíveis 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 é verdade visual e programaticamente. Sem esse contexto, talvez o usuário não entenda 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 de maneira programática e visual. Um método é usar o padrão fieldset/legend para agrupar elementos semelhantes.

Descrições

As descrições de campo são semelhantes aos rótulos, porque são usadas para dar mais contexto ao campo e aos requisitos. As descrições de campo não serão necessárias para acessibilidade se os rótulos ou as instruções do formulário forem descritivos o suficiente.

No entanto, há situações em que adicionar outras informações é útil para evitar erros no formulário, como redirecionar informações sobre o tamanho mínimo de entrada para um campo de senha ou informar a um usuário qual formato de agenda usar (como MM-DD-AAAA).

Há muitos métodos diferentes para adicionar descrições de campo aos seus formulários. Um dos melhores métodos é adicionar um atributo aria-describeby ao elemento do formulário, além de um elemento <label>. O leitor de tela lerá a descrição e o rótulo.

Se você adicionar o atributo aria-labelledby ao seu elemento, o valor do atributo vai substituir o texto no seu <label>. Como sempre, teste o código final com todas as ATs que você planeja oferecer.

Erros

Ao criar formulários acessíveis, há várias coisas que você pode fazer para evitar que os usuários cometem 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 se você acha que seu formulário é, em algum momento, um usuário vai cometer um erro.

Quando um usuário encontra um erro de formulário, a primeira etapa é tornar o erro conhecido. O campo em que ocorreu o erro precisa ser claramente identificado, e o erro em si precisa ser descrito ao usuário em texto.

Há diferentes métodos para exibir mensagens de erro, como:

• Um pop-up modal, inline perto de onde o erro ocorreu
• Um conjunto de erros agrupados em uma mensagem maior na parte superior da página

Preste atenção ao foco do teclado e às opções de região ativa 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 mostrar 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 para os ATs. Somente ATs receberão a mensagem, a menos que você adicione outro código para tornar a mensagem visível para todos os usuários.

Quando o usuário achar que todos os erros foram resolvidos, permita que ele reenvie o formulário e dê feedback sobre os resultados do envio. Uma mensagem de erro informa ao usuário que ele tem mais atualizações a fazer, enquanto uma mensagem de sucesso confirma que ele resolveu todos os erros e enviou o formulário.

Teste seu conhecimento

Teste seus conhecimentos sobre formulários acessíveis