Questão de Engenharia de Software — Portal Web — FCC 2026
Engenharia de Software›Portal Web
Código
fc077588
Banca
FCC
Órgão
SEFAZ-SP
Ano
2026
Nível
Superior
Cargo
Auditor Fiscal da Receita Estadual - AFRE - Tecnologia da Informação e Comunicação - Conhecimentos Especificos (P3)
Um portal de serviços fazendários disponibiliza um formulário de consulta de situação fiscal por onde usuários que utilizam leitores de tela relataram dificuldade para identificar os campos, porque os rótulos não são lidos corretamente. Considerando as diretrizes de acessibilidade para formulários na web, a solução mais adequada para associar rótulos aos campos é
Aadicionar o nome do campo em tooltips exibidos somente ao passar o mouse ou focar o componente.
Butilizar placeholders nos inputs, exibindo o nome do campo dentro da caixa de texto.
Ccriar rótulos <span> com e posicioná-los visualmente próximos aos campos, sem associação semântica.
Dvincular cada <caption> ao seu <input> correspondente usando o atributo aria associado ao id do campo.
Eassociar cada <label> ao seu <input> correspondente usando o atributo for vinculado ao id do campo.
Revelar gabarito e comentário▾
GabaritoE — associar cada <label> ao seu <input> correspondente usando o atributo for vinculado ao id do campo.
Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.
Acessibilidade em Formulários Web – Associação de Rótulos
Gabarito: letra E. No desenvolvimento web acessível, a forma correta e semântica de associar um rótulo a um campo de formulário é usar o elemento <label> com o atributo for referenciando o id do <input>. Essa técnica é recomendada pelas diretrizes WCAG (Web Content Accessibility Guidelines) e garante que leitores de tela liguem o texto do rótulo ao campo correspondente.
A questão aborda um problema real: usuários de leitores de tela não conseguem identificar campos quando não há associação explícita entre rótulo e input. Vamos analisar cada alternativa:
Alternativa A — ❌ Incorreta
Tooltips exibidos ao passar o mouse ou focar não são acessíveis para quem usa apenas teclado ou leitores de tela. Leitores de tela não ativam tooltips automaticamente, e o conteúdo pode não ser perceptível.
Alternativa B — ❌ Incorreta
Placeholders (placeholder) não substituem rótulos. O texto some quando o usuário começa a digitar, o que dificulta a identificação do campo. Além disso, leitores de tela nem sempre leem placeholders de forma confiável e, mesmo quando leem, não substituem a função semântica do <label>.
Alternativa C — ❌ Incorreta
Usar <span> apenas visualmente próximo ao campo não cria nenhuma associação semântica. Leitores de tela não conseguem relacionar o <span> ao input, pois não há vínculo programático.
Alternativa D — ❌ Incorreta
O elemento <caption> é destinado a tabelas HTML (<table><caption>...</caption></table>), não a formulários. Embora o uso de aria-labelledby possa fazer a associação, a combinação com <caption> é inadequada. A técnica correta seria usar aria-labelledby com um elemento que tenha id, mas mesmo assim não é a melhor prática quando <label> está disponível. A banca explora aqui a confusão com caption (tabelas) e o termo técnico aria.
Alternativa E — ✅ Correta ⟵ GABARITO
A associação padrão e mais acessível é utilizar o elemento <label> com o atributo for apontando para o id do <input>. Exemplo:
Essa técnica é amplamente suportada por leitores de tela e garante que, ao focar no campo, o rótulo seja lido. É a solução mais simples, semântica e eficaz, conforme as recomendações de acessibilidade web.
NÃO CAIA NESSA!
A alternativa D usa caption (elemento de tabela) e aria para dar um ar técnico. O candidato que ouviu falar de ARIA pode achar que é a melhor opção, mas o correto é <label for>. Lembre-se: <caption> só se aplica a tabelas.