Contexto
Campos de senha ocultam os caracteres para reduzir a exposição visual, mas a ocultação também pode aumentar erros de digitação. Por isso, login, cadastro e recuperação de conta devem oferecer uma forma clara e opcional de conferir o valor digitado. O controle precisa preservar o valor, o foco e a possibilidade de usar teclado, preenchimento automático e gerenciadores de senha.
Oculte a senha por padrão, mas ofereça uma forma simples e opcional de conferir o que foi digitado. O controle deve ajudar a corrigir erros sem interromper o preenchimento, apagar o valor ou criar uma mudança inesperada de contexto.
Use um botão claro para mostrar ou ocultar a senha. O controle deve ficar próximo ao campo e comunicar a ação disponível, com texto acessível como “Mostrar senha” ou “Ocultar senha”. Um ícone pode reforçar a intenção, mas não deve ser o único sinal.
Preserve o valor e o estado do campo. Alternar a visibilidade não pode apagar, truncar ou reformatar a senha digitada. O campo também deve continuar associado ao seu rótulo, às mensagens de erro e às instruções relevantes.
Mantenha o foco no campo ou no controle acionado. Ao mostrar ou ocultar a senha, não envie a pessoa para outro ponto da página nem faça o teclado virtual desaparecer sem necessidade. A transição deve continuar o preenchimento exatamente de onde foi interrompido.
Atualize o estado de forma perceptível e programática. O nome acessível do botão precisa refletir a próxima ação, e seu estado deve ser compreensível para leitores de tela e outras tecnologias assistivas. Não dependa apenas da troca de ícone ou cor.
Preserve os recursos de entrada. Permita digitação, colagem, preenchimento automático e uso de gerenciadores de senha. A alternância entre texto oculto e visível não deve quebrar o autofill, alterar o valor ou impedir que o campo continue sendo tratado como senha.
Projete uma área de toque confortável. No mobile, o botão precisa ser fácil de acionar sem cobrir o texto digitado nem ficar próximo demais de outra ação. Mantenha contraste, foco visível e espaço suficiente para diferentes tamanhos de tela e níveis de zoom.
Considere o risco de exposição. A senha deve permanecer oculta quando o campo é aberto e depois de uma ação de confirmação, salvo quando a tarefa exigir outro comportamento. Mostrar o valor deve depender de uma ação intencional e ser fácil de reverter.
Teste o fluxo completo. Verifique criação de conta, login, troca e recuperação de senha com teclado, leitor de tela, toque, autofill, colagem, gerenciadores de senha, zoom, mensagens de erro e diferentes condições de rede.
Regra prática
Mascarar a senha deve ser o padrão, e mostrar o valor deve ser uma escolha explícita da pessoa. Ao alternar a visibilidade, preserve o valor, o foco, a acessibilidade e todos os recursos de entrada do campo.
Base da recomendação
A orientação combina recomendações do NIST para permitir que a pessoa veja a senha durante a entrada com critérios do W3C sobre nome, função, estado e valor de controles. Design Systems como GOV.UK e USWDS complementam a base com padrões de visibilidade, rótulos e comportamento do controle. A decisão deve equilibrar prevenção de erros com o risco de exposição no contexto real.
Porque isso importa?
A senha mascarada é mais difícil de conferir, especialmente em telas pequenas, para pessoas com dificuldades de digitação ou quando o valor foi gerado por um gerenciador. NIST recomenda oferecer uma opção para exibir a senha durante a entrada, e o W3C reconhece que mostrar o valor pode aumentar a chance de sucesso para algumas pessoas. A exposição deve acontecer somente por ação intencional e em um contexto em que isso seja aceitável.
Quando usar?
- Login.
- Cadastro.
- Troca ou redefinição de senha.
- Senhas longas, geradas ou difíceis de conferir.
- Interfaces usadas em dispositivos móveis.
Quando evitar?
- Não revele a senha automaticamente.
- Não dependa apenas de um ícone ambíguo.
- Não apague o valor ao alternar o estado.
- Não mova o foco para outro elemento.
- Não bloqueie colagem ou gerenciadores.
- Não use um alvo pequeno demais.
- Não deixe o estado sem identificação.
Recomendações
Faça
- Use botão claro.
- Oculte por padrão.
- Preserve o valor.
- Preserve o foco.
- Informe o estado.
- Permita teclado.
- Teste no mobile.
Evite
- Não revele sozinho.
- Não use só o ícone.
- Não apague a senha.
- Não mova o foco.
- Não bloqueie colar.
- Não use alvo pequeno.
- Não dependa de cor.
