É possível preencher um formulário de várias maneiras. As pessoas podem usar o formulário no smartphone enquanto elas estão em um ônibus lotado, usando um leitor de tela ou usando um laptop antigo. Vamos ver como você pode garantir que seu formulário funcione em diferentes dispositivos e em diferentes contextos.
Verificar se o formulário funciona para usuários de teclado
Um bom primeiro teste para garantir que o formulário esteja acessível é preenchê-lo usando apenas o teclado.
Abra o formulário e tente navegar com a tecla tab.
Está claro qual campo do formulário está ativo no momento?
Para ajudar os usuários a entender qual campo de formulário está ativo,
você pode usar indicadores de foco.
Faça um teste.
Use a tecla tab para navegar até a entrada.
Você vê o contorno quando a entrada está ativa?
Esse é o indicador de foco.
É possível adicionar indicadores de foco usando a
pseudoclasse CSS :focus.
input:focus {
outline: 4px solid #222;
}
Saiba mais sobre como projetar indicadores de foco acessíveis.
Ajudar os usuários a navegar pelo formulário
Outro bom teste de usabilidade e acessibilidade é garantir que a ordem lógica da tabulação siga a ordem das guias visuais. Como é possível testar a ordem da tabulação? Use a tecla Tab para navegar pelo formulário. Você percebe algum salto de navegação ilógico? Verifique se a ordem do DOM corresponde à ordem visual.
Saiba mais sobre como garantir que a ordem visual na página siga a ordem do DOM.
Ajudar os usuários a preencher formulários em dispositivos de toque
Ótimo. Você verificou se o formulário funciona com o teclado. Agora, vamos ver como garantir que ela também funcione em dispositivos de toque, como smartphones.
Abra o formulário no dispositivo touchscreen,
preencha todos os campos e envie o formulário.
Você precisou tocar várias vezes para selecionar um controle de formulário?
Talvez as áreas de toque sejam muito pequenas.
Confira se o tamanho da área de toque de um botão é de pelo menos 48 px,
e se cada <input> e <select> é grande o suficiente para ser usado.
Você também pode adicionar espaçamento suficiente entre os controles de formulários para ajudar os usuários a navegar pelo formulário em dispositivos touchscreen.
Garantir que os usuários tenham um teclado otimizado
Nos módulos anteriores, você aprendeu a ativar um teclado na tela diferente
usando os atributos type ou inputmode.
Abra
a demonstração
no smartphone e toque no campo de número de telefone.
Os números são mostrados por padrão no teclado na tela,
junto com outros caracteres que podem ser necessários para um número de telefone.
Use type="tel" para ter um teclado na tela otimizado para inserir números de telefone.
Use um smartphone para fazer um teste e tente inserir com facilidade todos os caracteres necessários para preencher um número de telefone.
Se você quer saber como o teclado na tela funciona em outro type, teste o type="email" na demonstração.
Verificar se os botões do formulário não estão ocultos
Imagine que você preencheu
um longo formulário e está pronto para enviá-lo. Mas onde está o botão Enviar?
Ele pode estar atrás da barra de ferramentas do navegador, localizada na parte inferior da tela.
Uma maneira de garantir que os botões estejam visíveis é usar a função CSS env().
Aprenda a
garantir que os botões não sejam ocultos pelas interfaces do usuário do dispositivo.
Verificar se o formulário funciona em diferentes plataformas
Teste seus formulários no maior número de dispositivos possível. Você tem um laptop antigo? Abra o navegador padrão e teste o formulário. Seu amigo tem um tablet? Pegue-o emprestado e teste seu formulário lá também.
Os estilos são diferentes em um navegador? Você pode aprender a garantir que seus estilos funcionem em várias plataformas em um módulo posterior.
O BrowserStack oferece contas de teste sem custo financeiro para projetos de código aberto, e o Browserling oferece um teste sem custo financeiro para testar em diferentes navegadores, dispositivos e sistemas operacionais.
Ajude os usuários a preencher formulários em diferentes contextos
As pessoas não usam apenas navegadores, dispositivos e sistemas operacionais diferentes. As pessoas também usam os formulários em diferentes contextos. Faça o teste! O sol está brilhando lá fora? Pegue seu celular e saia. Usar o formulário com luz forte é uma boa maneira de testar se as taxas de contraste podem ser usadas.
Saiba mais sobre a acessibilidade de cor e contraste.
Verifique se o formulário funciona com conectividade ruim
Digamos que você viaja para algum lugar em um trem. Você abre uma página da Web no smartphone. Você quer saber como o carregamento de um site pode demorar tanto CLOUD.
Você pode simular conexões lentas e diferentes tipos de rede com o WebPageTest ou o DevTools.
Saiba mais sobre testes com baixa largura de banda e alta latência.
Ajude os usuários a usar o formulário quando estiverem indo de um lugar para outro
Imagine que você está indo até um compromisso. De repente, seu telefone toca, você atende a chamada e, ao mesmo tempo, recebe um alerta da seguradora para preencher o formulário de inscrição iniciado. Você abre o formulário e tenta preenchê-lo enquanto caminha e fala.
Lembre-se de que as pessoas usam os formulários em diferentes contextos. Durante situações estressantes, enquanto você realiza outras atividades em qualquer lugar. Você pode ajudar os usuários garantindo que seu formulário seja fácil de usar.
Defina um limite de tempo para preencher o formulário. Tente simular condições imperfeitas para testar o formulário.
Compartilhe os resultados do teste
Documente todos os testes e compartilhe os resultados com sua equipe. Isso ajudará a priorizar os itens de ação, para garantir que todos na equipe estejam cientes das tarefas mais importantes.
Saiba mais sobre como compartilhar resultados de testes.
Teste seu conhecimento
Teste seus conhecimentos sobre testes multiplataforma
Você pode mostrar os indicadores de foco apenas para usuários do teclado?
:focus-visible.:focus-detected.:focus-shown.Recursos
- WebPageTest: testes de desempenho e otimização do site
- Testes com baixa largura de banda e alta latência
- Como compartilhar os resultados do teste