Formulaires Accessibles

Rótulos e associações

Exemplo ruim

<!-- ❌ Ruim: Rótulos ausentes -->
<form>
  <h4>Login</h4>

  <!-- Sem rótulo associado -->
  <input
    type="email"
    placeholder="Seu e-mail">

  <!-- Sem rótulo associado, sem autocompletar -->
  <input
    type="password"
    placeholder="Senha">

  <!-- Caixa de seleção não associada -->
  <input type="checkbox">
  <span>Lembrar de mim</span>

  <button type="submit">Entrar</button>
</form>

Exemplo bom

<!-- ✅ Bom: Rótulos explícitos e associados -->
<form>
  <h4>Login</h4>

  <!-- Rótulo associado via for/id -->
  <label for="email-good">Endereço de e-mail</label>
  <input
    type="email"
    id="email-good"
    placeholder="exemplo@dominio.com"
    required
    aria-describedby="email-help"
    autocomplete="email">
  <div id="email-help">
    Nunca compartilharemos seu e-mail
  </div>

  <!-- Rótulo com instruções -->
  <label for="password-good">Senha</label>
  <input
    type="password"
    id="password-good"
    required
    aria-describedby="password-help"
    autocomplete="current-password">
  <div id="password-help">
    Mínimo de 8 caracteres com maiúsculas e números
  </div>

  <!-- Caixa de seleção corretamente associada -->
  <input type="checkbox" id="remember-good">
  <label for="remember-good">Lembrar de mim</label>

  <button type="submit">Entrar</button>
</form>

Explicação: Cada campo de formulário deve ter um rótulo explícito e devidamente associado. Placeholders não substituem rótulos.

Validação e mensagens de erro

Exemplo ruim

<!-- ❌ Ruim: Erros mal anunciados -->
<form @submit.prevent="submitBadForm">
  <h4>Inscrição na newsletter</h4>

  <!-- Sem associação rótulo-campo -->
  <label>Nome</label>
  <input
    type="text"
    v-model="badForm.name"
    :class="{ 'error': submitted && !badForm.name }">

  <!-- Erro apenas visual -->
  <label>E-mail</label>
  <input
    type="email"
    v-model="badForm.email"
    :class="{ 'error': submitted && !isValidEmail(badForm.email) }">

  <!-- Sem informação de erro -->
  <label>Idade</label>
  <input
    type="number"
    v-model="badForm.age"
    :class="{ 'error': submitted && badForm.age < 16 }">

  <!-- Mensagem de erro genérica e inútil -->
  <div v-if="submitted && badFormErrors.length">
    ❌ Por favor, corrija os erros
  </div>

  <button type="submit">Inscrever-se</button>
</form>

Exemplo bom

<!-- ✅ Bom: Erros claramente associados -->
<form @submit.prevent="submitGoodForm" novalidate>
  <h4>Inscrição na newsletter</h4>

  <!-- Resumo de erros com navegação -->
  <div
    v-if="submitted && goodFormErrors.length"
    role="alert"
    aria-labelledby="error-summary-title">
    <h5 id="error-summary-title">Erros a corrigir:</h5>
    <ul>
      <li v-for="error in goodFormErrors" :key="error.field">
        <a :href="`#${error.field}-good-form`">
          
        </a>
      </li>
    </ul>
  </div>

  <!-- Campo com erro específico associado -->
  <label for="name-good-form">Nome completo *</label>
  <input
    type="text"
    id="name-good-form"
    v-model="goodForm.name"
    required
    aria-invalid="submitted && !goodForm.name"
    aria-describedby="name-error">
  <div
    v-if="submitted && !goodForm.name"
    id="name-error"
    role="alert">
    ❌ Nome é obrigatório
  </div>

  <button type="submit">Inscrever-se</button>
</form>

Explicação: Erros devem ser claramente anunciados, associados aos campos relevantes e fornecer instruções precisas para correção.

Grupos de campos com aria-labelledby

Exemplo ruim

<!-- ❌ Ruim: Estrutura desorganizada -->
<form>
  <h4>Preferências</h4>

  <!-- Elementos misturados sem lógica -->
  <div>
    <input type="radio" name="contact-bad"
           id="email-contact-bad" value="email">
    <label for="email-contact-bad">E-mail</label>

    <input type="checkbox" id="newsletter-bad"
           value="newsletter">
    <label for="newsletter-bad">Newsletter</label>
  </div>

  <div>
    <input type="radio" name="contact-bad"
           id="phone-contact-bad" value="phone">
    <label for="phone-contact-bad">Telefone</label>

    <!-- Campo de texto sem contexto -->
    <input type="text" placeholder="Nome">
  </div>

  <div>
    <input type="checkbox" id="offers-bad" value="offers">
    <label for="offers-bad">Ofertas</label>

    <input type="radio" name="contact-bad"
           id="sms-contact-bad" value="sms">
    <label for="sms-contact-bad">SMS</label>
  </div>

  <!-- Seleção sem contexto -->
  <select>
    <option>Escolha...</option>
    <option>Diariamente</option>
    <option>Semanalmente</option>
  </select>

  <button type="submit">OK</button>
</form>

Exemplo bom

<!-- ✅ Bom: Grupos lógicos com aria-labelledby -->
<form>
  <h4>Preferências de contato</h4>

  <!-- Seção de informações pessoais -->
  <div role="group" aria-labelledby="personal-info-title">
    <h5 id="personal-info-title">
      Informações pessoais
    </h5>

    <label for="name-good">Nome completo *</label>
    <input
      type="text"
      id="name-good"
      name="name"
      required
      aria-required="true"
      aria-describedby="name-desc">
    <span id="name-desc">
      Seu nome completo como aparecerá em nossas comunicações
    </span>
  </div>

  <!-- Grupo de botões de rádio -->
  <div
    role="radiogroup"
    aria-labelledby="contact-method-title"
    aria-required="true">
    <h5 id="contact-method-title">
      Método de contato preferido *
    </h5>

    <input
      type="radio"
      name="contact-good"
      id="email-contact-good"
      value="email"
      required>
    <label for="email-contact-good">E-mail</label>

    <input
      type="radio"
      name="contact-good"
      id="phone-contact-good"
      value="phone"
      required>
    <label for="phone-contact-good">Telefone</label>
  </div>

  <!-- Grupo de caixas de seleção -->
  <div role="group" aria-labelledby="comm-types-title">
    <h5 id="comm-types-title">Tipos de comunicação</h5>
    <p id="comm-types-desc">
      Selecione os tipos de comunicações que deseja receber
    </p>

    <input
      type="checkbox"
      id="newsletter-good"
      value="newsletter"
      aria-describedby="comm-types-desc">
    <label for="newsletter-good">Newsletter</label>
  </div>

  <button type="submit">
    Salvar preferências
  </button>
</form>

Explicação: Grupos de campos relacionados devem ser associados aos seus títulos via aria-labelledby para criar relações semânticas claras, particularmente para botões de rádio e caixas de seleção.

Formulário complexo com validação em tempo real

Exemplo ruim

<!-- ❌ Ruim: Validação intrusiva -->
<form>
  <h4>Criar conta</h4>

  <!-- Validação imediata a cada tecla pressionada -->
  <label>Nome de usuário</label>
  <input
    type="text"
    v-model="complexBadForm.username"
    @input="validateUsernameBad"
    :class="{ 'error': usernameBadError }">
  <!-- Erro que aparece/desaparece constantemente -->
  <div v-if="usernameBadError">
    
  </div>

  <!-- Sem associação com aria-describedby -->
  <label>E-mail</label>
  <input
    type="email"
    v-model="complexBadForm.email"
    @input="validateEmailBad"
    :class="{ 'error': emailBadError }">
  <div v-if="emailBadError"></div>

  <!-- Mensagens de erro muito curtas e inúteis -->
  <!-- Sem autocompletar para ajudar gerenciadores de senha -->
  <label>Senha</label>
  <input
    type="password"
    v-model="complexBadForm.password"
    @input="validatePasswordBad"
    :class="{ 'error': passwordBadError }">
  <div v-if="passwordBadError"></div>

  <button type="submit">Criar conta</button>
</form>

Exemplo bom

<!-- ✅ Bom: Validação respeitosa com feedback -->
<form>
  <h4>Criar conta</h4>

  <!-- Validação ao sair do campo, não ao digitar -->
  <label for="username-complex">Nome de usuário *</label>
  <input
    type="text"
    id="username-complex"
    v-model="complexGoodForm.username"
    @blur="validateUsernameGood"
    :class="{ error: usernameGoodError,
              success: usernameGoodValid }"
    aria-describedby="username-requirements username-feedback"
    aria-invalid="!!usernameGoodError"
    required>

  <!-- Instruções claras -->
  <div id="username-requirements">
    <h6>Requisitos:</h6>
    <ul>
      <li :class="{ valid: complexGoodForm.username.length >= 3 }">
        Pelo menos 3 caracteres
      </li>
      <li :class="{ valid: /^[a-zA-Z0-9_]+$/.test(username) }">
        Apenas letras, números e sublinhado
      </li>
    </ul>
  </div>

  <!-- Feedback acessível -->
  <div
    v-if="usernameGoodError"
    id="username-feedback"
    role="alert"
    aria-live="polite">
    ❌ 
  </div>
  <div
    v-else-if="usernameGoodValid"
    id="username-feedback"
    role="status"
    aria-live="polite">
    ✅ Nome de usuário disponível
  </div>

  <!-- Indicador de força da senha -->
  <label for="password-complex">Senha *</label>
  <input
    type="password"
    id="password-complex"
    v-model="complexGoodForm.password"
    @input="validatePasswordGood"
    aria-describedby="password-strength"
    autocomplete="new-password"
    required>

  <div id="password-strength">
    <h6>Força da senha:</h6>
    <div class="strength-indicator">
      <div
        class="strength-bar"
        :class="`strength-${passwordStrength}`"
        :style="{ width: `${passwordStrength * 25}%` }">
      </div>
    </div>
  </div>

  <button type="submit" :disabled="!isFormValid">
    Criar conta
  </button>
</form>

Explicação: Para formulários complexos, a validação em tempo real pode ajudar, mas deve ser implementada de forma não intrusiva e acessível.

Formulários Acessíveis

Rótulos e associações

Exemplo ruim

Login

Exemplo bom

Login

Validação e mensagens de erro

Exemplo ruim

Inscrição na newsletter

Exemplo bom

Inscrição na newsletter

Grupos de campos com aria-labelledby

Exemplo ruim

Preferências

Exemplo bom

Preferências de contato

Informações pessoais

Método de contato preferido *

Tipos de comunicação

Frequência de comunicação

Formulário complexo com validação em tempo real

Exemplo ruim

Criar conta

Exemplo bom

Criar conta

Requisitos:

Força da senha:

Rótulos e associações

❌ Exemplo ruim

Login

✅ Exemplo bom

Login

Validação e mensagens de erro

❌ Exemplo ruim

Inscrição na newsletter

✅ Exemplo bom

Inscrição na newsletter

Grupos de campos com aria-labelledby

❌ Exemplo ruim

Preferências

✅ Exemplo bom

Preferências de contato

Informações pessoais

Método de contato preferido *

Tipos de comunicação

Frequência de comunicação

Formulário complexo com validação em tempo real

❌ Exemplo ruim

Criar conta

✅ Exemplo bom

Criar conta

Requisitos:

Força da senha:

Exemplo ruim

Exemplo bom

Exemplo ruim

Exemplo bom

Exemplo ruim

Exemplo bom

Exemplo ruim

Exemplo bom