0Pricing
HTML Academy · Aula

O elemento label e a acessibilidade

Associar labels a inputs para dar suporte a leitores de ecrã.

O elemento label e a acessibilidade é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

Por que os rótulos são importantes

O elemento <label> associa uma descrição textual a um controle de formulário:

  • Leitores de tela anunciam o rótulo quando o campo de entrada recebe foco
  • Clicar no rótulo ativa o campo de entrada associado
  • Sem um rótulo, usuários de leitores de tela não sabem para que serve um campo

Rótulo explícito com for

O atributo for vincula um rótulo a um campo de entrada por meio de id:

<label for="email">Email address</label>
<input type="email" id="email" name="email">

<!-- for="email" matches id="email" -->
<!-- Clicking "Email address" moves focus to the input -->
<!-- Required for proper accessibility -->

Rótulo implícito (envolvendo o campo)

Envolver o campo de entrada dentro do rótulo cria uma associação implícita:

<!-- No for/id needed — input is inside label -->
<label>
  Email address
  <input type="email" name="email">
</label>

<!-- Works fine but explicit association is more robust
     (especially when label and input are far apart in the DOM) -->

Separação entre rótulo e campo de entrada

Quando o rótulo e o campo de entrada não podem ficar adjacentes, use aria-labelledby:

<h2 id="section-title">Billing Details</h2>
<input type="text" name="name" aria-labelledby="section-title">
<!-- The heading serves as the accessible label for the input -->

aria-label como alternativa

Quando não for possível usar um rótulo visível, use aria-label:

<!-- Search form with icon button -->
<form>
  <input type="search" name="q" aria-label="Search the site">
  <button type="submit" aria-label="Submit search">
    <svg><!-- magnifier icon --></svg>
  </button>
</form>

Um rótulo por campo de entrada

Cada campo de entrada deve ter exatamente um rótulo. Campos de entrada diferentes devem ter rótulos separados:

<!-- BAD: one label for multiple inputs -->
<label>First and last name
  <input type="text" name="first">
  <input type="text" name="last">
</label>

<!-- GOOD: separate labels -->
<label for="first">First name</label>
<input type="text" id="first" name="first">

<label for="last">Last name</label>
<input type="text" id="last" name="last">

Indicação de campo obrigatório

Indique os campos obrigatórios de forma acessível:

<!-- Visual + accessible required indicator -->
<label for="email">
  Email address
  <span aria-hidden="true">*</span>         <!-- visual asterisk -->
  <span class="sr-only">(required)</span>    <!-- screen reader text -->
</label>
<input type="email" id="email" name="email" required>

Fieldset e legend para grupos

Agrupe campos de entrada relacionados com <fieldset> e <legend>:

<fieldset>
  <legend>Shipping address</legend>

  <label for="addr-street">Street</label>
  <input type="text" id="addr-street" name="street" autocomplete="address-line1">

  <label for="addr-city">City</label>
  <input type="text" id="addr-city" name="city" autocomplete="address-level2">
</fieldset>

Fieldset para grupos de botões de opção

Grupos de botões de opção sempre precisam de fieldset + legend:

<fieldset>
  <legend>Preferred contact method</legend>

  <label>
    <input type="radio" name="contact" value="email"> Email
  </label>
  <label>
    <input type="radio" name="contact" value="phone"> Phone
  </label>
  <label>
    <input type="radio" name="contact" value="text"> Text message
  </label>
</fieldset>

Placeholder não é um rótulo

Um placeholder desaparece quando o usuário digita — ele não pode substituir um rótulo:

<!-- BAD: placeholder used as a label -->
<input type="email" placeholder="Email address">
<!-- Screen readers may announce the placeholder, but many skip it -->
<!-- User cannot see the field purpose while typing -->

<!-- GOOD: -->
<label for="email">Email address</label>
<input type="email" id="email" placeholder="you@example.com">

Rótulos ocultos visualmente

Se o design não tiver um rótulo visível, oculte-o visualmente, mantendo-o disponível para leitores de tela:

<label for="search" class="sr-only">Search</label>
<input type="search" id="search" placeholder="Search...">

/* sr-only utility class: */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

Verificação rápida

Como associar um rótulo a um campo de entrada usando uma associação explícita?

Recapitulação: acessibilidade de label

Princípios essenciais dos rótulos:

  • Todo campo de entrada precisa de um rótulo — sempre
  • <label for="id"> cria uma associação explícita
  • Envolver o campo de entrada dentro do rótulo = associação implícita
  • aria-labelledby vincula a qualquer elemento por id
  • aria-label para botões que contêm apenas ícones e não têm texto visível
  • <fieldset> + <legend> para controles agrupados

Perguntas Frequentes

A aula “O elemento label e a acessibilidade” é grátis?

Sim — o texto completo de “O elemento label e a acessibilidade” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “O elemento label e a acessibilidade”?

Associar labels a inputs para dar suporte a leitores de ecrã. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “O elemento label e a acessibilidade”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O elemento form: action, method e enctype
  2. Tipos de input: text, password, email, number e tel
  3. O elemento label e a acessibilidade
  4. O elemento button: submit, reset e button
← Voltar para HTML Academy