Acessibilidade em Formulários Web: Associando Rótulos a Campos
Gabarito: letra E. A solução mais adequada para associar rótulos a campos em um formulário acessível é usar o elemento <label> com o atributo for vinculado ao id do campo correspondente. Essa é a técnica semântica padrão do HTML que permite que leitores de tela anunciem corretamente o nome de cada campo, garantindo a acessibilidade para usuários com deficiência visual.
A acessibilidade na web é um princípio fundamental que visa garantir que pessoas com diferentes capacidades possam perceber, entender, navegar e interagir com a web. No contexto de formulários, um dos problemas mais comuns é a falta de associação explícita entre o rótulo (o texto que descreve o campo) e o próprio campo de entrada de dados. Quando essa associação não é feita corretamente, tecnologias assistivas, como leitores de tela, não conseguem identificar qual informação deve ser preenchida em cada campo, tornando o formulário inutilizável para esses usuários.
A técnica mais robusta e recomendada pelas diretrizes de acessibilidade (como as WCAG - Web Content Accessibility Guidelines) é utilizar o elemento <label> com o atributo for. O atributo for deve conter exatamente o mesmo valor do atributo id do campo <input> ao qual o rótulo se refere. Essa associação explícita cria um vínculo semântico que é interpretado por navegadores e leitores de tela, permitindo que o usuário saiba exatamente qual é a finalidade de cada campo. Além disso, essa técnica também melhora a usabilidade para todos os usuários, pois clicar no rótulo também foca o campo correspondente.
Outras abordagens, como usar placeholder ou tooltip, podem parecer soluções visuais, mas falham em fornecer uma associação semântica adequada. O placeholder é um texto de exemplo que desaparece quando o usuário começa a digitar, e não é um substituto para um rótulo persistente. O tooltip só aparece em interações específicas (como passar o mouse), o que não é acessível para usuários que dependem exclusivamente do teclado ou de leitores de tela. A alternativa que menciona <caption> está incorreta, pois <caption> é um elemento usado para tabelas, não para formulários. A alternativa que sugere <span> sem associação semântica também é inadequada, pois não cria nenhum vínculo programático entre o texto e o campo.
A pegadinha desta questão está em reconhecer a técnica correta de associação semântica. A banca tenta confundir o candidato com elementos que são visualmente próximos ou que parecem funcionar, mas que não possuem a semântica necessária para a acessibilidade. O elemento <label> com for é a solução canônica e mais aceita para esse problema.
Alternativa A — ❌ Incorreta
Adicionar o nome do campo em tooltips exibidos somente ao passar o mouse ou focar o componente não é uma solução adequada. Tooltips são elementos que aparecem em resposta a uma interação específica (hover ou foco) e não fornecem uma associação persistente e semântica entre o rótulo e o campo. Usuários de leitores de tela podem não conseguir acessar o conteúdo do tooltip de forma confiável, e a informação não está disponível de forma consistente. A técnica correta é usar <label> com for, que fornece uma associação explícita e permanente.
Alternativa B — ❌ Incorreta
Utilizar placeholders nos inputs, exibindo o nome do campo dentro da caixa de texto, é uma prática desaconselhada para acessibilidade. O placeholder é um texto de exemplo que desaparece quando o usuário começa a digitar, e não é um substituto para um rótulo persistente. Além disso, o placeholder pode ter baixo contraste e não é anunciado de forma consistente por todos os leitores de tela. A associação correta é feita com <label> e for, que garante que o nome do campo esteja sempre disponível e associado semanticamente.
Alternativa C — ❌ Incorreta
Criar rótulos com <span> e posicioná-los visualmente próximos aos campos, sem associação semântica, não resolve o problema de acessibilidade. O elemento <span> é um contêiner genérico sem significado semântico. Sem uma associação programática (como for e id), o leitor de tela não consegue relacionar o texto do rótulo ao campo de entrada. A solução correta é usar o elemento <label> com o atributo for, que cria um vínculo semântico explícito.
Alternativa D — ❌ Incorreta
Vincular cada <caption> ao seu <input> correspondente usando o atributo aria associado ao id do campo é uma abordagem incorreta. O elemento <caption> é usado exclusivamente para fornecer um título a uma tabela (<table>), não para rotular campos de formulário. Embora o uso de atributos ARIA possa melhorar a acessibilidade em alguns casos, a técnica mais simples e correta para associar um rótulo a um campo é usar <label> com for. A alternativa mistura elementos de contextos diferentes e não representa a solução adequada.
Alternativa E — ✅ Correta ⟵ GABARITO
Associar cada <label> ao seu <input> correspondente usando o atributo for vinculado ao id do campo é a solução mais adequada e amplamente recomendada. Essa técnica cria uma associação semântica explícita entre o texto do rótulo e o campo de entrada, permitindo que leitores de tela anunciem corretamente o nome de cada campo. Além disso, melhora a usabilidade para todos os usuários, pois clicar no rótulo também foca o campo. Essa é a prática padrão do HTML e está alinhada com as diretrizes de acessibilidade da WCAG.
Gabarito: letra E