Como fazer uma forma acessível: é mais fácil do que você pensa

Jonathan Speek Blocked Unblock Seguir Seguindo 3 de janeiro Foto por rawpixel no Unsplash

Os formulários são um componente essencial da Web, pois conectam os usuários ao seu negócio e os ajudam a realizar o que eles acessaram em seu site ou aplicativo. Dito isso, você quer ter certeza de que todos os seus usuários poderão usar seus formulários sem ter uma experiência horrível. O objetivo é tornar essas interações com os principais usuários o mais friccionadas possível.

Embora a construção de formulários possa ser uma tarefa difícil às vezes, torná-los moderadamente acessíveis não é tão complicado quanto você imagina. Muitas vezes há desculpas espalhadas como "não temos tempo para nos preocupar com a acessibilidade" ou "vamos torná-lo acessível mais tarde". Essas desculpas são frequentemente (se não sempre) inválidas e você pode ajudar sua equipe a mudar essa mentalidade.

Aqui estão algumas coisas a considerar ao construir formulários:

  • Que dificuldades alguém com deficiências visuais pode usar com o meu formulário?
  • O usuário tem uma indicação clara de quais dados são esperados para a entrada?
  • O formulário é fácil de entender rapidamente?
  • Posso usar o teclado para preencher o formulário?

Vamos fazer um formulário básico de assinatura

Eu te dei um código inicial para ajudá-lo a enganar um pouco.

Comece com isso: código inicial na CodePen

Nós finalmente chegaremos a isso: terminou CodePen

Eu forneci a você alguns estilos e elementos básicos que formariam um simples formulário de assinatura, mas há muito que podemos fazer aqui para tornar esse formulário mais utilizável. Com qualquer coisa que você faça, usar um bom HTML semântico fará com que você tenha um longo caminho.

Vamos começar conectando os elementos <input> aos seus respectivos <label> . Fazemos isso dando o <input> um id e usando isso como o <label> for atributo. Podemos usar "nome" e "email" para isso e já fizemos duas coisas:

  1. nós programaticamente associamos o rótulo à entrada, que lerá o rótulo para um usuário leitor de tela se essa entrada estiver focada
  2. o usuário pode agora clicar no rótulo e a respectiva entrada será focada, para que os usuários tenham agora 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 ao usuário. Adicionar o atributo type ( leia sobre os diferentes tipos aqui ) ajudará o usuário a preencher automaticamente seu formulário e fornecerá um teclado mais adequado para usuários móveis. Para nosso caso de uso, podemos type="text" para a entrada de nome e type="email" para a entrada de email.

Também queremos que nossos usuários tenham uma boa ideia do tipo de dados (e sua formatação) que esperamos deles. Aqui é bastante óbvio, mas nem sempre é esse o caso. Em geral, é boa prática fornecer um rótulo que seja sempre visível e um espaço reservado que comunique a entrada esperada. Isso significa não usar o atributo de placeholder como um rótulo visual para entradas em que o rótulo não é visível quando os usuários começam a digitar. Esta tem sido uma prática popular e precisa ser colocada na cama … Podemos dar um espaço reservado para “ex. Jane Doe ”para o nome e“ ex. jane.doe@example.com ”para o email.

Agora, para finalizar, podemos trabalhar no estilo de estado de focus . O estilo padrão dos estados de foco é diferente entre os navegadores e podemos melhorar qualquer que seja o estilo padrão para tornar o usuário mais amigável. No nosso caso, queremos que as entradas tenham um contorno colorido espesso que corresponda ao botão:

Adicione seus estilos de foco no seu seletor de entrada ?

Por fim, precisamos adicionar alguns estilos de foco ao redor do elemento de botão. Isso geralmente é ignorado, mas pode realmente ajudar os usuários que usam apenas o teclado a saber onde eles estão. Nós precisamos adicionar este bit &::moz-focus-innner para se livrar de alguns estilos padrão no Firefox (você pode querer salvar o snippet para uso futuro).

Assim, temos um formulário de assinatura básico do qual você pode se orgulhar e melhorar. Como utilizamos uma boa semântica, o formulário é acessível apenas via teclado (tente usar a guia e as teclas de barra de espaço / enter). As cores usadas para o botão são uma proporção de cores de 11,51 , atendendo aos padrões AAA para WCAG (Web Content Accessibility Guidelines). Fornecemos rótulos para usuários visuais e usuários de leitores de tela, bem como estados de foco com estilo para nossos amigos que usam teclado. Finalmente, observe que a fonte está definida para 18px no corpo, isso torna a nossa forma muito mais legível ? (você deve tentar ficar acima de 14px).

Projetar e construir com acessibilidade em mente requer prática, mas você será um desenvolvedor melhor para isso e terá o benefício adicional de tornar a web um lugar melhor.

Recursos

Aqui estão alguns ótimos recursos para ajudá-lo a ter empatia com seus usuários e verificar seu trabalho:

Funkify – uma nova extensão para o Chrome que ajuda você a experimentar a web e interfaces através dos olhos de usuários extremos com diferentes habilidades e deficiências.

Sim Daltonismo – visualize as cores conforme elas são percebidas com vários tipos de daltonismo.

Web.dev – forneça qualquer URL e o web.dev executará uma série de auditorias usando o Lighthouse .

Guia de Acessibilidade do MDN – este é um ótimo recurso para continuar voltando para (I ?? guias do MDN).

Verificador de contraste de cores – fornece uma maneira rápida e fácil de verificar as taxas de contraste de cores e os padrões que elas atendem.