Questão de Programação — Linguagens de marcação — CESPE / CEBRASPE 2024

Acessibilidade em HTML: a tag <label>

Gabarito: letra C. A tag que, ao ser associada a um campo de entrada, faz com que leitores de tela leiam em voz alta o rótulo quando o usuário foca no elemento é a tag <label>. Essa é uma das técnicas fundamentais de acessibilidade em HTML, prevista nas especificações do W3C e amplamente cobrada em concursos.

A acessibilidade web é o conjunto de práticas que permite que pessoas com deficiência — visual, auditiva, motora ou cognitiva — possam perceber, entender, navegar e interagir com a web. No caso específico de formulários, um dos maiores desafios é garantir que o usuário saiba o que deve ser digitado em cada campo. Para uma pessoa que enxerga, o rótulo (label) ao lado do campo resolve isso visualmente. Mas para uma pessoa cega, que depende de um leitor de tela (software que lê o conteúdo da página em voz alta), o rótulo precisa estar programaticamente associado ao campo — e é exatamente isso que a tag <label> faz.

A associação entre <label> e o campo de entrada pode ser feita de duas formas principais. A primeira é aninhando o campo dentro da própria tag <label>:

<label>Nome: <input type="text" name="nome"></label>

A segunda, mais comum e recomendada, é usando o atributo for na <label> e o atributo id no campo, criando um vínculo explícito:

<label for="campo-nome">Nome:</label>
<input type="text" id="campo-nome" name="nome">

Quando essa associação existe, o leitor de tela anuncia o rótulo assim que o usuário chega ao campo, dizendo algo como "Nome, edição de texto". Sem a <label>, o leitor de tela pode anunciar apenas "edição de texto" ou até mesmo nada, deixando o usuário sem saber o que digitar. Além disso, a <label> também melhora a usabilidade para todos: clicar no texto do rótulo leva o foco ao campo associado, o que é especialmente útil em dispositivos móveis e para pessoas com dificuldades motoras.

A pegadinha clássica desta questão é confundir a <label> com outras tags que também têm relação com formulários ou com acessibilidade, mas que cumprem funções diferentes. A tag <legend> agrupa e dá título a um conjunto de campos dentro de uma <fieldset>. A tag <caption> é usada para dar título a tabelas. A tag <title> define o título da página ou de um elemento específico. E a tag <span> é um contêiner genérico sem significado semântico. Nenhuma delas cria a associação entre rótulo e campo que o enunciado descreve.

Guarde o critério decisivo: a tag que associa um texto a um campo de entrada para fins de acessibilidade é a <label>. É essa associação que permite ao leitor de tela ler o rótulo em voz alta quando o usuário foca no campo — exatamente o que o enunciado pede.

Alternativa A — ❌ Incorreta

A alternativa A provavelmente apresenta a tag <legend>. Essa tag é usada para definir uma legenda para um grupo de campos dentro de uma <fieldset>, ou seja, ela dá um título ao conjunto, não a um campo individual. Ela não cria a associação direta entre um rótulo e um campo de entrada específico, portanto não atende ao requisito do enunciado.

Alternativa B — ❌ Incorreta

A alternativa B provavelmente apresenta a tag <caption>. Essa tag é utilizada para fornecer um título a uma tabela (<table>), sendo exibida acima dela. Não tem relação com formulários nem com a associação de rótulos a campos de entrada, portanto não é a resposta correta.

Alternativa C — ✅ Correta ⟵ GABARITO

A alternativa C apresenta a tag <label>, que é exatamente a tag que permite associar um texto a um campo de entrada. Quando o usuário foca no campo, o leitor de tela lê o conteúdo da <label> em voz alta, melhorando a acessibilidade para pessoas com dificuldade de leitura ou que não conseguem enxergar o texto. É a técnica fundamental de acessibilidade em formulários HTML.

Alternativa D — ❌ Incorreta

A alternativa D provavelmente apresenta a tag <title>. Essa tag define o título do documento HTML, exibido na aba do navegador, ou pode ser usada para fornecer um título a um elemento específico (como em SVG). Ela não associa um rótulo a um campo de formulário, portanto não atende ao que o enunciado descreve.

Alternativa E — ❌ Incorreta

A alternativa E provavelmente apresenta a tag <span>. Essa é uma tag de contêiner genérica, sem significado semântico, usada para agrupar elementos e aplicar estilos via CSS. Ela não cria nenhuma associação entre um texto e um campo de entrada, portanto não melhora a acessibilidade de formulários da forma descrita.

Gabarito: letra C