Web para Todos
3 problemas documentados

Formulários Acessíveis

Labels associados, mensagens de erro, agrupamento de campos e instruções claras para formulários.

WCAG A

Campo de formulário sem label associado

WCAG 1.3.1WCAG 3.3.2eMAG 6.1eMAG 6.2

Todo campo de formulário precisa ter um rótulo (<label>) associado programaticamente via for/id ou aria-label/aria-labelledby. Placeholder não substitui label.

Impacto por tipo de deficiência

Cegueira

Leitor de tela não anuncia o nome do campo ao receber foco — usuário não sabe o que deve preencher.

Cognitiva

Sem label visível, usuários com dificuldades cognitivas podem esquecer o propósito do campo ao digitar.

Motora

Label clicável aumenta a área de clique do campo (especialmente para checkboxes e radio buttons).

Incorreto — cria barreiras de acessibilidade
<!-- ❌ Placeholder como único rótulo -->
<input type="text" placeholder="Nome completo">

<!-- ❌ Label visualmente próxima mas não associada -->
<p>E-mail:</p>
<input type="email">

<!-- ❌ Label sem atributo for -->
<label>Senha</label>
<input type="password" id="senha">
Correto — acessível para todos os usuários
<!-- ✓ Label associada via for/id -->
<label for="nome">Nome completo</label>
<input type="text" id="nome" name="nome" autocomplete="name">

<!-- ✓ Label envolvendo o campo (implicit label) -->
<label>
  E-mail
  <input type="email" name="email" autocomplete="email">
</label>

<!-- ✓ Visualmente oculto mas acessível -->
<label for="busca" class="sr-only">Buscar</label>
<input type="search" id="busca" placeholder="Digite um termo...">

Técnicas ARIA relevantes

aria-labelaria-labelledbyaria-requiredaria-describedby
WCAG A

Mensagem de erro sem identificação do campo

WCAG 1.3.1WCAG 3.3.1WCAG 3.3.3eMAG 6.3eMAG 6.5

Mensagens de erro devem identificar o campo com problema e descrever como corrigi-lo. Erros indicados apenas por cor (ex: borda vermelha) são insuficientes.

Impacto por tipo de deficiência

Cegueira

Leitor de tela não percebe a borda vermelha — a mensagem de erro deve ser texto anunciado programaticamente.

Daltonismo

Usuários daltônicos podem não distinguir a borda vermelha da borda padrão sem indicação adicional.

Cognitiva

Mensagem genérica como "Campo inválido" não instrui o usuário sobre como corrigir o erro.

Incorreto — cria barreiras de acessibilidade
<!-- ❌ Erro indicado apenas por cor -->
<input type="email" class="borda-vermelha" value="email-invalido">

<!-- ❌ Mensagem sem associação ao campo -->
<span class="erro">Campo obrigatório</span>
<input type="text" id="cpf">
Correto — acessível para todos os usuários
<!-- ✓ Erro com aria-describedby + aria-invalid -->
<label for="cpf">CPF <span aria-hidden="true">*</span></label>
<input
  type="text"
  id="cpf"
  aria-required="true"
  aria-invalid="true"
  aria-describedby="cpf-erro"
  value="123"
>
<span id="cpf-erro" role="alert" class="mensagem-erro">
  CPF inválido. Digite os 11 dígitos (somente números).
</span>

<!-- ✓ Resumo de erros no topo do formulário -->
<div role="alert" aria-live="assertive" id="resumo-erros">
  <h2>2 erros encontrados:</h2>
  <ul>
    <li><a href="#cpf">CPF: formato inválido</a></li>
    <li><a href="#email">E-mail: campo obrigatório</a></li>
  </ul>
</div>

Técnicas ARIA relevantes

aria-invalidaria-describedbyaria-requiredrole="alert"aria-live="assertive"
WCAG A

Grupo de checkboxes/radio sem fieldset+legend

WCAG 1.3.1WCAG 3.3.2eMAG 6.2

Grupos de campos relacionados (radio buttons, checkboxes de múltipla escolha) precisam de fieldset com legend para que o contexto do grupo seja comunicado a tecnologias assistivas.

Impacto por tipo de deficiência

Cegueira

Ao navegar por teclado, o leitor de tela anuncia apenas o valor de cada opção, sem o contexto do grupo (ex: "Masculino" sem saber que é "Gênero: Masculino").

Incorreto — cria barreiras de acessibilidade
<!-- ❌ Radio sem agrupamento -->
<p>Gênero:</p>
<input type="radio" id="masc" name="genero" value="M">
<label for="masc">Masculino</label>
<input type="radio" id="fem" name="genero" value="F">
<label for="fem">Feminino</label>
Correto — acessível para todos os usuários
<!-- ✓ Fieldset + legend agrupa e contextualiza -->
<fieldset>
  <legend>Gênero</legend>
  <label>
    <input type="radio" name="genero" value="M"> Masculino
  </label>
  <label>
    <input type="radio" name="genero" value="F"> Feminino
  </label>
  <label>
    <input type="radio" name="genero" value="O"> Prefiro não informar
  </label>
</fieldset>

Técnicas ARIA relevantes

role="group"aria-labelledby
Anterior
🖼 Imagens e Alternativas Textuais
Próxima categoria
🎨 Contraste e Uso de Cor
Ver todas as categorias do Guia