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 uma 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 encontrar direto de um perspectiva de acessibilidade, pois elas exigem conhecimento de todos os elementos que já abordadas, além de regras adicionais específicas somente para formulários. Com algumas compreensão e tempo, você pode criar um formulário acessível que se adapte a você e sua usuários.
O Formulários é o último módulo específico do componente deste curso. Neste módulo, focar 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 cor, também se aplicam à forma os elementos.
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 permite aos usuários inserir conteúdo ou fazer uma uma melhor opção. Existe uma ampla variedade de campos de formulário para que você pode escolher.
A recomendação padrão é usar padrões HTML estabelecidos em vez de criar algo personalizado com ARIA, como certos recursos e como estados de campo, propriedades e valores são inerentes integrado aos elementos HTML, mas você precisa adicionar ARIA personalizado manualmente.
ARIA
<div role="form" id="sundae-order-form"> <!-- form content --> </div>
HTML
<form id="sundae-order-form"> <!-- form content --> </form>
Além de escolher os padrões de campo de formulário mais acessíveis, onde aplicável, você também deve adicionar Atributos de preenchimento automático de HTML aos seus campos. Adicionar atributos de preenchimento automático permite um definição ou identificação da finalidade a user agents e tecnologias assistivas (AT).
Com os atributos de preenchimento automático, os usuários podem personalizar apresentações visuais,
Por exemplo, ao mostrar um ícone de bolo de aniversário em um campo com o preenchimento automático
(bday) atribuído a ele. De modo mais geral, os atributos de preenchimento automático
preencher formulários de forma mais fácil e rápida. Isso é especialmente útil para pessoas
com transtornos cognitivos e de leitura e pessoas que usam TAs, como telas
leitores.
<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 alterações contextuais quando recebem foco ou entrada do usuário, a menos que o usuário tenha sido avisado sobre o comportamento antes usando 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 a ele.
Rótulos
Os rótulos informam o usuário sobre a finalidade de um campo, se ele for obrigatório, Ele também pode fornecer informações sobre os requisitos de campo, como . Os rótulos precisam estar sempre visíveis e descrever o formulário com precisão aos usuários.
Um dos princípios fundamentais dos formulários acessíveis é estabelecer uma abordagem conexão precisa entre um campo e seu rótulo. Isso ocorre tanto visualmente e de forma programática. Sem esse contexto, um usuário pode não entender como preencha 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 agrupada de forma programática e visual. Um método é usar o conjunto de campos/legenda para agrupar elementos semelhantes.
Descrições
As descrições de campo são semelhantes aos rótulos, porque são usados para para dar mais contexto ao campo e aos requisitos. As descrições de campo não são necessária 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 mais informações é útil para evitar erros no formulário, como a retransmissão de informações sobre o comprimento mínimo inserir um campo de senha ou informar ao usuário qual formato de agenda usar (como como MM-DD-AAAA).
Há muitos métodos diferentes que você pode usar para adicionar descrições de campo
formas. Um dos melhores métodos é adicionar uma
aria-describeby (em inglês)
ao elemento do formulário, além de um elemento <label>. A tela
o leitor lerá a descrição e o rótulo.
Se você adicionar o parâmetro
aria-labelledby (em inglês)
ao seu elemento, o valor do atributo substitui o texto do atributo
<label> Como sempre, teste o código final com todos os ATs que você
que planeja oferecer.
Erros
Ao criar formulários acessíveis, você pode fazer muito para impedir que os usuários cometendo erros no formulário. No início deste módulo, abordamos a marcação clara campos, criando rótulos de identificação e adicionando descrições detalhadas sempre que possível. Mas, não importa quão claro você acredite que seu formulário é, em algum momento, o usuário cometerá um erro.
Quando um usuário encontra um erro no formulário, a primeira etapa é informe o erro. O campo onde o erro ocorreu deve ser identificado claramente, e o erro deve ser descrito em texto para o usuário.
Há diferentes métodos para exibir erros de mensagens, como:
- Um modal pop-up próximo ao local do erro
- Coleção de erros agrupados em uma mensagem maior na parte superior da página
Preste atenção no foco do teclado. e 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 os 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 inseridos.
- Ou você pode usar o atributo aria-required para compartilhar uma mensagem de erro personalizada com os ATs. Somente os ATs receberão a mensagem, a menos que você adicione outro código para torná-la visível a todos os usuários.
Assim que o usuário achar que todos os erros foram resolvidos, permita o reenvio formulário e fornecer feedback sobre os resultados do envio. Um erro informa ao usuário que ele tem mais atualizações para fazer, enquanto uma mensagem de sucesso confirma que resolveu todos os erros e enviou o formulário com sucesso.
Teste seu conhecimento
Teste seus conhecimentos sobre formulários acessíveis
Qual das respostas abaixo é 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>