banco-credencial.html · bancada do §66 · preview v0.2 — catálogo de ESTADOS dos campos de credencial (CD1–CD16), do seed-componentes.md. Bancada, não tela (CP31). Dado sintético: nenhuma credencial, e-mail ou código real — e nada aqui envia nada a lugar nenhum.

Credenciais — senha e código de uso único

Os dois campos moram na mesma seção porque falham do mesmo jeito. O SC 3.3.8 Accessible Authentication (WCAG 2.2, AA) proíbe teste de função cognitiva em qualquer etapa da autenticação — memorizar, transcrever, soletrar, calcular. O Understanding é literal: “um serviço que requer transcrição manual de código de verificação não é compatível… deve ser possível ao usuário pelo menos colar o código”.

Por isso o campo de código é UM, e não seis caixinhas. Com maxlength="1", colar 482913 deixa “4” na primeira caixa e as outras cinco vazias. Esta bancada não cita esse defeito: ela o exerce — o contraexemplo está impresso ao lado, operante, e a suíte cola nos dois e compara.

Entrar — senha com revelar

Estado 1 · repouso — a senha começa OCULTA (CD9) O erro não diz qual metade errou (CD13): dizer “essa senha está errada” confirma que o usuário existe. Mas erro de FORMATO diz — a fronteira é: formato ajuda, existência não.

Estado 2 · criar senha — sem “confirme a senha” (CD5)

Nova senha

Mínimo de 12 caracteres. Sem limite máximo e sem maxlength (CD4): truncar em silêncio faz a pessoa guardar uma senha que ela não digitou.

Força da senha: Boa — 3 de 4

O campo de confirmação não existe, e isso é uma decisão com fonte: a pesquisa do GOV.UK concluiu que “um segundo campo não ajuda os usuários” — ainda mais com o botão de revelar disponível. O que substitui a confirmação é ver o que se digitou e uma mensagem de erro clara.
A força não bloqueia o envio (CD14): ela informa, não impede. E é texto + forma — quantos blocos estão preenchidos —, nunca só cor. Ligue a escala de cinza.

Código de uso único — o campo, e o contraexemplo

Os dois desenhos abaixo pedem o mesmo código de 6 dígitos. Cole 482913 nos dois (Ctrl+V) e veja o que sobra em cada um.

CANÔNICO · um campo (CD10)

Código enviado por e-mail 6 dígitos. Vale por 10 minutos — o prazo é declarado, não escondido (CD12).

A aparência segmentada vem de tipografia — fonte monoespaçada com letter-spacing —, não de seis elementos. O olho vê dígitos separados; o clipboard, o autofill e o leitor de tela veem um campo. autocomplete="one-time-code" deixa o sistema operacional oferecer o código do SMS sozinho — e isso é o “mecanismo” que o SC 3.3.8 aceita como conformidade.

CONTRAEXEMPLO · seis caixinhas — não copie isto

Código enviado por e-mail (desenho comum de mercado)

Cada caixa é um <input maxlength="1">, e elas estão na melhor forma de mercado: avançam ao digitar, voltam apagando no Backspace e navegam por setas — três remendos de JavaScript. Compare com o campo único ao lado, que precisa de zero.
E mesmo assim, colar o código inteiro deixa um dígito e descarta os outros cinco: seria preciso um quarto remendo só para distribuir o texto entre as caixas. É transcrição manual obrigatória, que o Understanding do SC 3.3.8 nomeia como não-conforme. Some-se seis paradas de tabulação para um dado só, seis nomes acessíveis (“dígito 3 de 6”) e o autofill do sistema sem alvo.
Comparar com uma versão capenga seria espantalho — por isso o contraexemplo é o melhor que o desenho consegue ser, e a suíte mede este, não uma lembrança dele.

Os contratos, e onde cada um se prova

#	Contrato	Onde se prova
CD1	COLAR nunca é bloqueado — em senha nem em código	SC 3.3.8. A suíte cola nos dois campos e confere o valor
CD2	`autocomplete` correto e obrigatório em todo campo de credencial	`current-password` · `new-password` · `one-time-code`
CD3	Senha com `spellcheck="false"` e `autocapitalize="none"`	Corretor ortográfico envia texto a serviço remoto — spell-jacking
CD4	Senha SEM `maxlength`: o limite vira mensagem de erro	Truncar em silêncio faz a pessoa guardar uma senha que ela não digitou
CD5	SEM campo “confirme a senha”	Achado do GOV.UK: “um segundo campo não ajuda” — com revelar, é ruído
CD6	O revelar é `button type="button"` com `aria-controls` e nome que diz o EFEITO	“Mostrar senha” / “Ocultar senha” — nunca um olho mudo
CD7	O estado da visibilidade é ANUNCIADO, não só refletido no botão	“Sua senha está visível.” — quem não vê precisa saber que o texto está exposto
CD8	Ao ENVIAR, o campo volta a `type="password"`	Senão o navegador guarda o valor como texto e o oferece em autofill de outro campo
CD9	A senha começa OCULTA; revelar é ação deliberada	Estado inicial da bancada
CD10	O código de uso único é UM campo — nunca N caixinhas	Contraexemplo operante ao lado: colar nas caixinhas deixa 1 de 6 dígitos
CD11	No código, `inputmode`, `pattern` e `maxlength` SÃO legítimos	O comprimento é do sistema, não da pessoa — o oposto do CD4, e o porquê está dito
CD12	O prazo do código é DECLARADO em texto, e existe reenvio	SC 2.2.1 cai na exceção Essential; o contrato é declarar, não esconder
CD13	Erro de credencial não diz qual metade errou; erro de FORMATO diz	“Usuário ou senha inválidos” × “O código tem 6 dígitos”
CD14	Força de senha com TEXTO e FORMA, e ela não bloqueia o envio	Blocos preenchidos + rótulo — prova “Escala de cinza”
CD15	Caps Lock ligado é AVISO anunciado, não erro	Com a senha oculta, a causa do erro fica invisível
CD16	Nenhuma transcrição PARCIAL (“digite o 1º, 3º e 5º caractere”)	Falha explicitamente citada no Understanding do SC 3.3.8