O que o 3.3.2 exige
Rótulos ou instruções são fornecidos quando o conteúdo exigir a entrada de dados por parte do usuário.
Texto original, em inglês (WCAG 2.1)
Labels or instructions are provided when content requires user input.
As pessoas precisam saber o que digitar antes de digitar. O rótulo nomeia cada campo, e as instruções dão o formato que ele aceita, principalmente um formato incomum ou com regras rígidas. O Understanding 3.3.2 (em inglês) acrescenta que “exigir” aqui quer dizer aceitar: campos opcionais também precisam de rótulo.
O rótulo precisa ser apresentado a todo mundo, não só a quem usa leitor de tela. Um campo nomeado no aria-label cumpre o 4.1.2 e ainda pode reprovar no 3.3.2, porque nada na tela diz para que ele serve. Um ícone pode ser o rótulo quando as pessoas o entendem bem, como a lupa de uma caixa de busca. Ligar o rótulo ao campo na marcação é o 1.3.1, e se o rótulo é claro, o 2.4.6.
A WCAG lista uma falha: campos de telefone separados por pontuação e sem rótulo em texto (F82). O documento Understanding também aceita rótulos invisíveis no title em campos de telefone divididos sob uma legenda visível “Telefone”, quando o que cada campo pede está claro na tela.
No W3C
Regras ACT do 3.3.2
Nenhuma regra ACT cobre o 3.3.2 ainda.
Falhas comuns
Abaixo de cada exemplo: o que o axe-core e o Rampa relataram sobre a marcação de antes da correção, numa execução com o Gemma 4 12B em 9 de outubro de 2026.
Um campo nomeado só no aria-label
O formulário da newsletter mostra um título e um botão, e o campo entre os dois não diz nada. Quem usa leitor de tela ouve “Endereço de e-mail”; o resto precisa adivinhar pelo botão.
Antes, reprova no 3.3.2
<h2>Dicas de preparo, uma vez por mês</h2>
<input id="newsletter" type="email" name="email"
aria-label="Endereço de e-mail"
autocomplete="email">
<button type="submit">Inscrever-se</button>Depois, aprova
<h2>Dicas de preparo, uma vez por mês</h2>
<label for="newsletter">Endereço de e-mail</label>
<input id="newsletter" type="email" name="email"
autocomplete="email">
<button type="submit">Inscrever-se</button>- axe-core
Aprova: a
labelencontra um nome acessível noaria-label.- Rampa
✗ #newsletter Nada na tela diz o que preencher no campo "Endereço de e-mail": o nome está no aria-label, que só leitores de tela recebem. Evidência: "Endereço de e-mail" Patch: - <input id="newsletter" type="email" name="email" aria-label="Endereço de e-mail" autocomplete="email"> + <label for="newsletter">Endereço de e-mail</label> <input id="newsletter" type="email" name="email" aria-label="Endereço de e-mail" autocomplete="email"> confiança alta · 1/1 rodadas · evidência verificada · id a62e6272fc04
Um rótulo numa dica flutuante
A caixa de quantidade da sacola tem nome só no title, que aparece como dica quando o mouse para sobre ela, e não numa tela de toque. Na tela, é um número ao lado de um produto.
Antes, reprova no 3.3.2
<p>Etiópia Yirgacheffe, em grãos, 250 g · R$ 62,00</p>
<input id="qtd-1" type="number" name="qtd-1"
value="1" min="1" title="Quantidade">Depois, aprova
<p>Etiópia Yirgacheffe, em grãos, 250 g · R$ 62,00</p>
<label for="qtd-1">Quantidade</label>
<input id="qtd-1" type="number" name="qtd-1"
value="1" min="1">- axe-core
Aprova: a
labelaceita um nome vindo dotitle.- Rampa
✗ #qtd-1 Nada na tela diz o que preencher no campo "Quantidade": o nome está no atributo title, que só aparece como dica ao passar o mouse. Evidência: "Quantidade" Patch: - <input id="qtd-1" type="number" name="qtd-1" value="1" min="1" title="Quantidade"> + <label for="qtd-1">Quantidade</label> <input id="qtd-1" type="number" name="qtd-1" value="1" min="1" title="Quantidade"> confiança alta · 1/1 rodadas · evidência verificada · id 8da0dd6697c2
Um formato que ninguém explica
O campo do vale-presente só aceita quatro letras maiúsculas, um hífen e quatro algarismos, e nada na tela diz isso: a pessoa descobre por um erro depois de enviar. Uma dica com exemplo, ligada ao campo, avisa antes (técnica G89).
Antes, reprova no 3.3.2
<label for="vale">Código do vale-presente</label>
<input id="vale" name="vale"
pattern="[A-Z]{4}-[0-9]{4}">Depois, aprova
<label for="vale">Código do vale-presente</label>
<input id="vale" name="vale"
pattern="[A-Z]{4}-[0-9]{4}"
aria-describedby="vale-dica">
<span id="vale-dica">Por exemplo, AURO-2024</span>- axe-core
Aprova: a
labelencontra o rótulo, e nenhuma regra lê opattern.- Rampa
✗ #vale O campo "Código do vale-presente" só aceita um formato definido (pattern="[A-Z]{4}-[0-9]{4}"), e nada na tela o explica. Evidência: "Código do vale-presente" Patch: - <input id="vale" name="vale" pattern="[A-Z]{4}-[0-9]{4}"> + <input id="vale" name="vale" pattern="[A-Z]{4}-[0-9]{4}" aria-describedby="vale-hint"> <span id="vale-hint">O código deve conter 4 letras maiúsculas, seguidas de um hífen e 4 números (exemplo: ABCD-1234).</span> confiança alta · 1/1 rodadas · evidência verificada · id c9c5aa96240f
O que o axe-core verifica
O axe-core 4.14.0 mapeia uma regra para o 3.3.2: a form-field-multiple-labels reprova campo com mais de um elemento de rótulo. Duas regras mapeadas para o 4.1.2 ficam ao lado: a label reprova campo sem nome acessível, e a select-name, um select sem nome. O Rampa roda as três e relata as falhas delas como estão; um campo reprovado por elas nunca vai para o modelo. A label-title-only, de boa prática, aponta campo nomeado só por title ou aria-describedby, mas o Rampa só roda regras marcadas com WCAG A e AA, então ela não entra numa execução.
| Regra | O que verifica | Mapeada para | Numa execução do Rampa |
|---|---|---|---|
form-field-multiple-labels, página da regra na Deque University, em inglês | Campos de formulário não devem ter múltiplos elementos 'label' | 3.3.2 | roda |
label, página da regra na Deque University, em inglês | Elementos de formulário devem ter rótulos | 4.1.2 | roda |
select-name, página da regra na Deque University, em inglês | O elemento 'select' deve ter um nome acessível | 4.1.2 | roda |
label-title-only, página da regra na Deque University, em inglês | Elementos de formulário devem ter um rótulo visível | boa prática | não roda: boa prática |
Nenhuma regra de uma execução pergunta se o nome está visível. Um campo nomeado no aria-label ou no title, ou por um rótulo escondido com CSS, passa na label, e nenhuma regra lê o pattern para ver se o formato é explicado.
Cada regra leva à página dela na Deque University, a empresa que mantém o axe-core (em inglês).
O que o Rampa julga, e como
O que vai para o modelo
Dois tipos de campo visível que o axe-core não reprovou. Um campo cujo nome ninguém vê: ele vem do aria-label, do title ou de um rótulo escondido, e o campo não tem placeholder e, se for um select, nenhuma opção à mostra. E um campo com pattern. Botões, caixas de seleção, botões de opção, campos de arquivo, intervalo e cor, e campos ocultos, desabilitados ou só de leitura ficam de fora.
O que o modelo vê
- De onde vem o nome:
aria-label, atributotitle, rótulo escondido ou rótulo visível. - O placeholder, ou a opção que o
selectmostra. - O
patternque ele exige, se houver. - O texto visível logo antes e logo depois do campo, sem os rótulos de outros campos.
- O cabeçalho acima dele, a legenda do fieldset e os botões ao lado, dizendo se mostram texto ou só um ícone.
- O idioma da página, para escrever o formato.
O que ele precisa responder
Primeiro, o texto ou o ícone visível que diz o que preencher, e o que o pattern exige em palavras simples; depois um veredito, o problema (sem rótulo visível ou formato não explicado), o nome do campo copiado como evidência e um grau de confiança.
O que derruba uma alegação
- A evidência não é o nome do campo.
- Uma aprovação aponta problema, ou uma reprovação não aponta nenhum.
- Falta de rótulo alegada para um campo que, no snapshot, tem rótulo visível, ou cujo nome aparece na tela logo ao lado: um rótulo visível não ligado ao campo ainda o rotula, e a ligação é o 1.3.1.
- Falta de rótulo alegada enquanto o modelo cita texto visível que nomeia o campo.
- Formato sem explicação alegado para um campo sem
pattern, sem dizer o que o pattern exige, ou com uma palavra na tela que casa com o pattern, porque um exemplo no formato exigido o explica.
O patch
Acrescenta um label visível antes de um input ou, para um pattern, uma dica depois dele ligada por aria-describedby. Um select ou textarea não recebe patch, porque a tag de abertura não é o elemento inteiro.
Em todo critério
- O conteúdo da página chega ao modelo marcado como dado, e o prompt manda ignorar qualquer instrução que esteja nele.
- As respostas ficam em cache por um hash do prompt, da imagem, do modelo e das configurações, então a mesma entrada nunca chama um modelo duas vezes.
- Com
--runs 3, o Rampa pergunta três vezes e fica com a maioria; quando as rodadas discordam, a confiança cai. Achados abaixo de--min-confidence(média por padrão) ficam ocultos, e o--verboselista todos. - Alegações derrubadas pela verificação são contadas em todo relatório, nunca mostradas como achados.
Como o Rampa foi medido nele
Nenhuma regra ACT cobre o 3.3.2, então nenhum conjunto de testes do W3C o mede. Os pares corrompidos abaixo são a medida dele.
Pares corrompidos: o Rampa separou 7 de 7 (rótulos tirados da tela), o axe-core 0. Um par é uma página de teste que passa e uma cópia quebrada de propósito; quem dá o mesmo veredito às duas não está julgando.
Rodada em 9 de outubro de 2026: axe-core 4.14.0, Gemma 4 12B numa GPU local, raciocínio desligado, uma rodada, casos de teste ACT a9a1483e. Amostras pequenas e uma rodada só: leia os números como um pipeline que funciona, não como resultado.
Leia com estas ressalvas
- Os pares pegam as páginas que passam na regra ACT cc0f0a, em que todo campo tem rótulo visível, e põem cada rótulo no
aria-label. - As páginas intactas não dão nenhum candidato ao módulo, então os pares testam a corrupção, não falsos positivos. Páginas de exemplo no repositório cobrem a regra do pattern e uma caixa de busca com botão de ícone.
Limitações
- Um campo rotulado só pelo placeholder não é apontado: o tutorial de formulários da WAI desaconselha, mas o documento Understanding não chama isso de falha.
- O documento Understanding aceita rótulos invisíveis no
titleem campos de telefone divididos sob uma legenda visível “Telefone”. O prompt diz ao modelo que o nome de um grupo sobre vários campos nomeia uma seção, não cada campo, então campos assim podem ser apontados. - Ícones desenhados com pseudo-elementos de CSS não estão no snapshot, então o modelo não os vê.
- Em 13 páginas públicas, não achou falsos positivos depois que um select mostrando “English” ao lado de um ícone de globo saiu do escopo, e achou poucos candidatos, já que a maioria dos campos ali tem rótulo visível ou placeholder.
- Julga só páginas web.
Perguntas sobre o 3.3.2
O aria-label basta para cumprir o WCAG 3.3.2?
Não. O aria-label dá ao campo um nome acessível, o que cumpre o 4.1.2, mas nada aparece na tela. O documento Understanding diz que os rótulos ou instruções precisam ser apresentados a todos os usuários, não só a quem usa tecnologia assistiva.
Placeholder é rótulo?
O documento Understanding não chama de falha do 3.3.2 um campo rotulado só pelo placeholder, então o Rampa não aponta. O tutorial de formulários da WAI desaconselha: a dica some assim que a pessoa começa a digitar.
Um ícone conta como rótulo?
Pode contar. O documento Understanding dá o exemplo de uma caixa de busca com botão de lupa, um ícone que as pessoas entendem bem. O Rampa diz isso ao modelo e lista os botões ao lado do campo, dizendo se mostram texto ou só um ícone.
O 3.3.2 vale para campos opcionais?
Vale. O documento Understanding diz que “exigir”, no critério, quer dizer aceitar, esperar ou permitir, então todo campo de formulário precisa de rótulo ou instruções.
O axe-core verifica o 3.3.2?
Uma regra é mapeada para ele, a form-field-multiple-labels. A label e a select-name, mapeadas para o 4.1.2, conferem se o campo tem nome, e aceitam um que ninguém vê.
Verifique suas páginas
O Rampa ainda não está no npm. Clone e rode a partir do código, com Node.js 22.12 ou mais novo e Chrome ou Edge. O --criteria 3.3.2 julga só este critério; sem ele, rodam os oito que rodam por padrão.
Com o Ollama rodando, o Rampa escolhe um modelo local sozinho; o node dist/cli.mjs doctor diz o que falta.
git clone https://github.com/guilhermebsantiago/rampa-cli.git
cd rampa-cli
pnpm install && pnpm build
node dist/cli.mjs check https://example.com --criteria 3.3.2Conferido com o rampa-cli (commit 0459809) e as fontes do W3C em 9 de outubro de 2026.