Como criar formulários da Web acessíveis

Feb 3, 2026

Como

Os formulários são um componente essencial da Web porque conectam os usuários ao seu negócio e os ajudam a realizar o que eles chegaram ao seu site ou app. Dito isto, você quer ter certeza de que todos os seus usuários são capazes de usar seus formulários sem ter que sofrer uma experiência horrível. O objetivo é tornar essas interações importantes o mais sem atrito possível.

Embora seja verdade que os formulários de construção podem ser uma tarefa difícil às vezes, tornando-as moderadamente acessíveis não é tão complicada quanto você imagina (um bom Construtor de sites vai torná-lo super-simples). Muitas vezes há desculpas lançadas como "não temos tempo para nos preocupar com a acessibilidade" ou "nós a tornaremos acessíveis mais tarde". Essas desculpas são frequentemente (se nem sempre) inválidas e você pode ajudar sua equipe a alterar essa mentalidade.

Procurando por mais conselhos? Nós temos você coberto com posts em tópicos de hospedagem na web. para armazenamento na núvem .

13 melhores pedaços de software de teste de usuário

Aqui estão algumas perguntas que você deve considerar ao construir formas:

Quais dificuldades a alguém com deficiências visuais usaram minha forma?
O usuário tem uma indicação clara de quais dados são esperados para entrada?
É o formulário fácil de usar - os usuários poderão entender rapidamente?
Eu sou capaz de usar o teclado para preencher o formulário?

Como fazer um formulário básico de assinatura

Eu dei-lhe algum código de partida para ajudá-lo a chegar à frente. Bem começar com isso e eventualmente chegar a isso .

Eu forneci a você algum estilo básico e elementos que compõem um formulário de assinatura simples, mas há muito que podemos fazer aqui para tornar este formulário mais utilizável. Com qualquer coisa que você cria, usando um bom HTML semântico vai te dar um longo caminho.

Vamos começar conectando o & lt; entrada & gt; elementos para seus respectivos & lt; etiqueta & gt; s. Nós fazemos isso dando o & lt; entrada & gt; um id e usando isso como o atributo para o & lt; etiqueta & gt; . Podemos usar "nome" e "e-mail" para estes e já fizemos duas coisas:

Nós programaticamente associamos o rótulo à entrada. O benefício disso é que ele lerá o rótulo para um usuário do leitor de tela se essa entrada for focada.
O usuário agora pode clicar no rótulo e a respectiva entrada será focada, para que os usuários agora tenham um tamanho de destino maior.

Agora que nossas entradas e rótulos estão todos conectados, podemos definir os tipos de entrada HTML. Estes são realmente úteis e uma maneira super fácil de dar uma excelente experiência de usuário. Adicionando o. modelo O atributo ajudará o usuário a preencher automaticamente seu formulário e também fornecerá um teclado mais adequado para usuários móveis. Para o nosso caso de uso, podemos fazer Tipo = "Texto" Para a entrada do nome e Tipo = "E-mail" para a entrada de email.

Também queremos que nossos usuários tenham uma boa ideia de que tipo de dados (e sua formatação) esperamos deles. Aqui é bastante óbvio, mas isso nem sempre é o caso. É geralmente uma boa prática fornecer uma etiqueta que é sempre visível e um espaço reservado que comunica a entrada esperada. Isso significa não usar o Placeholder. Atributo como uma etiqueta visual para entradas onde o rótulo não é visualizado quando um usuário começa a digitar. Esta tem sido uma prática popular para muitos desenvolvedores e realmente precisa ser colocado para a cama de uma vez por todas. Podemos dar um espaço reservado de "Ex. Jane Doe" para o nome e "ex. [email protected]" para o email.

Agora podemos começar a trabalhar no foco Estado Estilo. O estilo padrão dos estados de foco é diferente entre os navegadores e podemos melhorar qualquer que seja o estilo padrão para torná-lo mais fácil de usar. No nosso caso aqui, queremos que as entradas tenham um esboço espesso e colorido que corresponda ao botão.

14 maneiras fáceis de tornar o seu site mais acessível

Adicionar estilos de foco ao seletor de entrada

Por fim, precisamos adicionar alguns estilos de foco ao redor do elemento do botão. Isso é muitas vezes negligenciado, mas também pode ajudar os usuários somente de teclado sabem onde estão. Precisamos adicionar este & amp; :: Moz-Focus-Inner bit para se livrar de algum estilo padrão no Firefox (você pode querer salvar esse snippet para uso futuro).

Assim, temos um formulário básico de assinatura que você pode se orgulhar e melhorar. Como usamos uma boa semântica, o formulário é acessível apenas via teclado (tente usar a guia e a barra de espaço / Enter chaves). As cores usadas para o botão são uma proporção de cores de 11.51, atendendo aos padrões AAA para o WCAG (diretrizes de acessibilidade de conteúdo da Web). Nós fornecemos etiquetas para usuários visuais e usuários de leitores de tela, bem como estados de foco estilo para o nosso teclado usando amigos. Finalmente, observe que a fonte é definida para 18px. no corpo. Isso torna nossa forma muito mais legível (você deve tentar ficar acima de 14px).

Projetar e construir com acessibilidade em mente leva a prática, mas você será um desenvolvedor melhor para isso e ajudar a tornar a web um lugar melhor.

generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket — Gerar, a premiada conferência para web designers, retorna a NYC em 24 a 25 de abril! Clique na imagem para reservar um ticket

Este artigo foi originalmente publicado em questão 316 de internet , a revista mais vendida do mundo para web designers e desenvolvedores. Comprar edição 316 aqui ou Inscreva-se aqui .

Artigos relacionados:

Corrigir acessibilidade falha com esta ferramenta gratuita
50 novas ferramentas impressionantes para desenvolvedores em 2019
Quão acessível são seus projetos?

Como criar formulários da Web acessíveis

Como fazer um formulário básico de assinatura

Adicionar estilos de foco ao seletor de entrada

Como - Artigos mais populares

Comece com a Adobe Dimension CC

Use a ferramenta de caneta e texturas para adicionar profundidade no Photoshop

Melhore suas habilidades de arte conceitual no Photoshop

Crie um efeito de texto vacilante com JavaScript

Criar um componente de carrossel flexível

Como pintar uma cena tradicional da vila britânica

Como projetar interfaces móveis amigáveis

Como pintar uma vida floral vibrante

Categorias