Labels e formulários acessíveis

Formulários são uma parte essencial da interação na web. Desde um simples campo de busca até um complexo formulário de cadastro, eles permitem que os usuários enviem informações. No entanto, se não forem construídos com acessibilidade em mente, podem se tornar uma barreira intransponível para muitas pessoas, especialmente aquelas que usam tecnologias assistivas como leitores de tela.

A chave para formulários acessíveis reside na conexão correta entre os rótulos (labels) e os campos de formulário.

A tag <label>: o rótulo que conecta

A tag <label> é usada para representar o rótulo (ou nome) de um elemento de interface de usuário em um formulário. Ela é fundamental para a acessibilidade porque, quando associada corretamente a um campo de formulário, informa aos leitores de tela qual é a finalidade daquele campo.

Como associar um <label> a um campo de formulário:

Existem duas maneiras principais de associar um <label> a um campo:

1. Usando os atributos for e id (Método preferido)

• O atributo for da tag <label> deve ter o mesmo valor do atributo id do campo de formulário ao qual ele se refere.
• Esta é a forma mais robusta e recomendada.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formulário Acessível</title>
  <style>
    body { font-family: sans-serif; margin: 20px; }
    form div { margin-bottom: 15px; }
    label { display: block; margin-bottom: 5px; font-weight: bold; }
    input[type="text"], input[type="email"], textarea {
      width: 300px;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    button { padding: 10px 20px; background-color: dodgerblue; color: white; border: none; border-radius: 4px; cursor: pointer; }
  </style>
</head>
<body>

  <h1>Formulário de Contato</h1>

  <form>
    <div>
      <label for="nomeUsuario">Nome Completo:</label>
      <input type="text" id="nomeUsuario" name="nome" required>
    </div>

    <div>
      <label for="emailUsuario">E-mail:</label>
      <input type="email" id="emailUsuario" name="email" required>
    </div>

    <div>
      <label for="mensagemUsuario">Sua Mensagem:</label>
      <textarea id="mensagemUsuario" name="mensagem" rows="5"></textarea>
    </div>

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

</body>
</html>

Benefícios do for e id:

• Leitores de Tela: Quando o leitor de tela encontra o campo de entrada, ele pode anunciar o texto do <label> associado, informando ao usuário o que ele deve preencher.
• Usabilidade: Clicar no texto do <label> automaticamente coloca o foco no campo de formulário associado. Isso é ótimo para usuários com dificuldade motora ou para quem usa telas sensíveis ao toque, pois aumenta a área de clique.

2. Envolvendo o campo de formulário com o <label>

• Você pode colocar o campo de formulário dentro da tag <label>.
• Nesse caso, os atributos for e id não são estritamente necessários para a associação, mas ainda são uma boa prática para robustez e compatibilidade.

<form>
  <div>
    <label>
      Nome Completo:
      <input type="text" id="nomeUsuario2" name="nome2" required>
    </label>
  </div>
</form>

Outros elementos de formulário e acessibilidade

placeholder: Cuidado!

O atributo placeholder fornece um texto de exemplo ou uma breve dica dentro do campo de entrada.

<input type="text" id="nome" name="nome" placeholder="Seu nome completo">

• Não use placeholder como substituto para <label>!
  • O texto do placeholder desaparece quando o usuário começa a digitar.
  • Leitores de tela podem ignorar ou ter dificuldade em acessar o placeholder.
  • Pode haver problemas de contraste.
• Use placeholder apenas como um complemento ao <label>, para dicas adicionais.

fieldset e legend: Agrupando campos relacionados

Para grupos de campos relacionados (como opções de rádio ou caixas de seleção), use as tags <fieldset> e <legend>.

• <fieldset>: Agrupa visualmente e semanticamente os campos.
• <legend>: Fornece um título ou descrição para o grupo de campos.

<fieldset>
  <legend>Selecione seu Gênero:</legend>
  <div>
    <input type="radio" id="generoMasc" name="genero" value="masculino">
    <label for="generoMasc">Masculino</label>
  </div>
  <div>
    <input type="radio" id="generoFem" name="genero" value="feminino">
    <label for="generoFem">Feminino</label>
  </div>
</fieldset>

Benefícios de fieldset e legend:

• Leitores de Tela: Anunciam o texto da <legend> antes de cada campo dentro do <fieldset>, fornecendo contexto importante para o grupo.
• Organização: Ajuda a organizar formulários longos e complexos.

Mensagens de erro acessíveis

Quando um formulário tem erros de validação, é crucial que essas mensagens sejam acessíveis.

• Visibilidade: As mensagens de erro devem ser claramente visíveis e associadas ao campo que causou o erro.
• ARIA: Em casos mais complexos, atributos ARIA (como aria-describedby e aria-invalid) podem ser usados para associar mensagens de erro diretamente aos campos, informando aos leitores de tela sobre o erro. (Veremos ARIA em uma lição futura).

Resumindo

• Acessibilidade em formulários é fundamental para que todos os usuários possam interagir e enviar informações.
• A tag <label> é a chave:
  • Associe-a aos campos de formulário usando for e id (preferencial).
  • Ou envolva o campo com a tag <label>.
  • Benefícios: leitores de tela anunciam o rótulo, clicar no rótulo foca o campo.
• placeholder não substitui o <label>; use-o apenas como complemento.
• <fieldset> e <legend> são essenciais para agrupar campos relacionados e fornecer contexto para leitores de tela.
• Mensagens de erro devem ser claras e acessíveis.

Construir formulários acessíveis é uma das formas mais diretas de tornar seu site inclusivo e funcional para todos.