Formulário

<!-- ❌ Botão de imagem sem alternativa -->
<input type="image" src="btn-buscar.png">
<input type="image" src="btn-login.png" alt="">

<!-- ✓ Alt descritivo ou button com texto -->
<input type="image"
  src="btn-buscar.png"
  alt="Buscar">

<!-- Ainda melhor: button com texto + ícone -->
<button type="submit">
  <svg aria-hidden="true" focusable="false">
    <!-- ícone de lupa -->
  </svg>
  Buscar
</button>

<!-- ❌ Campos sem label adequado -->
<p>Nome: <input type="text" name="nome"></p>
<input type="email" placeholder="Digite seu email">
<span>Data de nascimento</span>
<input type="date" name="nascimento">

<!-- ✓ Labels explicitamente associados -->
<div class="campo">
  <label for="nome">
    Nome completo
    <span aria-label="obrigatório">*</span>
  </label>
  <input type="text" id="nome" name="nome"
    required
    autocomplete="name">
</div>

<div class="campo">
  <label for="email">E-mail</label>
  <input type="email" id="email" name="email"
    autocomplete="email"
    aria-describedby="email-dica">
  <p id="email-dica" class="instrucao">
    Exemplo: nome@orgao.gov.br
  </p>
</div>

<!-- ❌ tabindex desordenado -->
<input id="sobrenome" tabindex="2" name="sobrenome">
<input id="nome" tabindex="1" name="nome">
<button tabindex="5" type="submit">Enviar</button>
<input id="email" tabindex="3" name="email">

<!-- ✓ Ordem natural do DOM ou tabindex sequencial -->
<form>
  <label for="nome">Nome</label>
  <input type="text" id="nome" name="nome">

  <label for="sobrenome">Sobrenome</label>
  <input type="text" id="sobrenome" name="sobrenome">

  <label for="email">E-mail</label>
  <input type="email" id="email" name="email">

  <button type="submit">Enviar</button>
</form>
<!-- Sem tabindex customizado: ordem segue o DOM -->

<!-- ❌ Select que navega automaticamente -->
<label for="estado">Estado</label>
<select id="estado" name="estado"
  onchange="window.location = this.value">
  <option value="/mt">Mato Grosso</option>
  <option value="/sp">São Paulo</option>
</select>

<!-- ✓ Usuário controla quando a ação acontece -->
<label for="estado">Estado</label>
<select id="estado" name="estado">
  <option value="">Selecione um estado</option>
  <option value="MT">Mato Grosso</option>
  <option value="SP">São Paulo</option>
</select>
<button type="submit">Ir para o estado selecionado</button>

<!-- ❌ Erro genérico apenas visual -->
<div class="erro" style="color:red">
  Dados inválidos.
</div>
<input type="email" class="campo-erro"
  style="border:2px solid red">

<!-- ✓ Erro específico, acessível e com sugestão -->
<div role="alert" aria-live="polite" id="erros-formulario">
  <h3>Encontramos problemas no formulário:</h3>
  <ul>
    <li>
      <a href="#email">E-mail</a>:
      Formato inválido — use nome@dominio.com.br
    </li>
  </ul>
</div>

<div class="campo-formulario">
  <label for="email">E-mail</label>
  <input type="email" id="email"
    aria-invalid="true"
    aria-describedby="erro-email"
    value="email-invalido">
  <p id="erro-email" class="mensagem-erro" role="alert">
    <strong>Erro:</strong> E-mail inválido.
    Informe no formato nome@orgao.gov.br
  </p>
</div>

<!-- ❌ Radio sem agrupamento -->
<p>Sexo</p>
<input type="radio" name="sexo" value="m" id="m">
<label for="m">Masculino</label>
<input type="radio" name="sexo" value="f" id="f">
<label for="f">Feminino</label>

<!-- ✓ Radio agrupados com fieldset/legend -->
<fieldset>
  <legend>Sexo</legend>
  <div class="opcao">
    <input type="radio" name="sexo" value="m" id="sexo-m">
    <label for="sexo-m">Masculino</label>
  </div>
  <div class="opcao">
    <input type="radio" name="sexo" value="f" id="sexo-f">
    <label for="sexo-f">Feminino</label>
  </div>
  <div class="opcao">
    <input type="radio" name="sexo" value="n" id="sexo-n">
    <label for="sexo-n">Prefiro não informar</label>
  </div>
</fieldset>

<!-- ❌ Formato só no placeholder (some ao digitar) -->
<label for="cep">CEP</label>
<input type="text" id="cep" name="cep"
  placeholder="00000-000">

<!-- ✓ Formato e instrução visíveis -->
<div class="campo">
  <label for="cep">CEP</label>
  <input type="text" id="cep" name="cep"
    inputmode="numeric"
    pattern="[0-9]{5}-?[0-9]{3}"
    maxlength="9"
    autocomplete="postal-code"
    aria-describedby="cep-formato">
  <p id="cep-formato" class="instrucao-campo">
    Formato: 00000-000 (com ou sem hífen)
  </p>
</div>

<!-- ❌ Botão que envia imediatamente sem confirmação -->
<button type="submit"
  onclick="return confirm('Confirmar?')">
  Protocolar requerimento
</button>

<!-- ✓ Tela de confirmação com resumo dos dados -->
<section aria-labelledby="confirmar-titulo">
  <h2 id="confirmar-titulo">
    Confirme os dados do requerimento
  </h2>
  <dl>
    <dt>Tipo de requerimento:</dt>
    <dd>Solicitação de certidão negativa</dd>
    <dt>CPF/CNPJ:</dt>
    <dd>***.***.***-**</dd>
    <dt>Endereço de entrega:</dt>
    <dd>Rua das Flores, 123 — Cuiabá/MT</dd>
  </dl>
  <div class="acoes-confirmacao">
    <button type="button" onclick="voltarEditar()">
      Editar dados
    </button>
    <button type="submit" form="form-requerimento">
      Confirmar e protocolar
    </button>
  </div>
</section>

<!-- ❌ Botão ambíguo ou só ícone -->
<input type="submit" value="OK">
<button type="submit">
  <img src="seta.png" alt="">
</button>
<button type="submit">>></button>

<!-- ✓ Botão com texto descritivo da ação -->
<!-- Formulário de contato -->
<button type="submit">
  Enviar mensagem de contato
</button>

<!-- Formulário de login -->
<button type="submit">
  Entrar no Portal
</button>

<!-- Com ícone complementar -->
<button type="submit">
  <svg aria-hidden="true" focusable="false">
    <!-- ícone de envelope -->
  </svg>
  Enviar solicitação
</button>