Tipo de dado determinado
O que a norma pede
Campos que pedem dados pessoais conhecidos (nome, e-mail, telefone, endereço) têm o tipo de dado indicado no código, para que o navegador e a tecnologia assistiva ajudem a preencher.
- 1.3.5 (AA)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Anote na especificação o tipo de dado de cada campo, como e-mail ou CEP, para que o celular mostre o teclado certo e o navegador sugira o preenchimento. Isso poupa digitação e memória.
Campo de telefone
Formulário acessado pelo celular.
Errado: Campo genérico
Na especificação
“Campo de texto: Telefone.”
Abre teclado de letras e não sugere o número.
Certo: Tipo definido
Na especificação
“Telefone — tipo tel, preenchimento automático.”
Teclado numérico e sugestão do navegador.
Use o atributo autocomplete com os valores padronizados, como email e postal-code, e combine com type e inputmode adequados, como inputmode="numeric" no CPF.
Campos de contato
Nome, e-mail e telefone.
Errado: Sem tipo
<input id="email"> <input id="tel">Nada ajuda a preencher.
Certo: Tipos e autocomplete
<input id="email" type="email" autocomplete="email"> <input id="tel" type="tel" autocomplete="tel">Teclado certo e preenchimento automático.
Inclua o autocomplete nos critérios de aceite dos formulários e garanta que o componente de campo aceite essa propriedade. O preenchimento automático reduz tempo e erros para todos.
Tempo de preenchimento
O cadastro leva, em média, 8 minutos.
Errado: Sem ajuda do navegador
Situação
Todos os dados digitados à mão.
Mais tempo e mais erros.
Certo: Com autocomplete
Situação
Dados pessoais sugeridos pelo navegador.
O cadastro cai para poucos minutos.
Inspecione o atributo autocomplete dos campos de dados pessoais e teste o preenchimento automático num navegador com dados salvos. No celular, confira se cada campo abre o teclado adequado.
Campo de e-mail
Teste no celular.
Errado: Sem sugestão
Observação
Teclado de letras, sem “@”, sem sugestão de e-mail.
O tipo não está determinado.
Certo: Com sugestão
Observação
Teclado com “@” e sugestão do e-mail salvo.
Atende ao requisito.
Use rótulos comuns para dados pessoais, como “E-mail” e “CEP”, na ordem habitual. Rótulos criativos atrapalham o navegador e as pessoas a reconhecer o dado.
Rótulo do e-mail
Campo de e-mail do cadastro.
Errado: Rótulo criativo
Rótulo
“Seu cantinho na internet”
Pouco claro para pessoas e navegadores.
Certo: Rótulo padrão
Rótulo
“E-mail”
Reconhecível de imediato.