0Pricing
HTML Academy · Aula

aria-label aria-labelledby e aria-describedby

Forneça nomes e descrições acessíveis para os elementos.

aria-label aria-labelledby e aria-describedby é 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 nomes acessíveis são importantes

Todo elemento interativo precisa de um nome acessível — uma cadeia de texto que a tecnologia assistiva usa para identificá-lo. Sem um nome acessível, os leitores de tela não conseguem dizer aos usuários o que um botão ou campo de entrada faz.

aria-label

aria-label fornece diretamente em um elemento um nome acessível em texto:

<button aria-label="Close dialog">×</button>
<!-- The × character has no accessible meaning
     aria-label provides the name: 'Close dialog, button' -->

<input type="search" aria-label="Search products">
<!-- No visible label — aria-label provides the accessible name -->

aria-labelledby

aria-labelledby referencia outro elemento como nome acessível:

<h2 id="section-title">Billing Information</h2>
<form aria-labelledby="section-title">
  <!-- Form's accessible name is 'Billing Information' -->
</form>

<!-- Multiple id references: -->
<button aria-labelledby="action-verb object-name">
  Delete
</button>
<span id="object-name" hidden>User Account</span>
<!-- Screen reader: 'Delete User Account, button' -->

aria-describedby

aria-describedby fornece uma descrição detalhada (como complemento do nome):

<label for="pwd">Password</label>
<input
  type="password"
  id="pwd"
  aria-describedby="pwd-hint"
>
<p id="pwd-hint">Must be 8+ characters with one uppercase letter and one number.</p>
<!-- Screen reader: 'Password [input]' then reads the description on focus -->

Rótulo vs descrição

A diferença entre nome acessível e descrição:

  • Nome acessível — identifica o elemento (aria-label, aria-labelledby ou elemento de rótulo)
  • Descrição — complementa o nome com contexto adicional (aria-describedby)
  • Os leitores de tela anunciam: nome, função, estado → depois a descrição

aria-label em pontos de referência

Use aria-label para distinguir vários pontos de referência do mesmo tipo:

<nav aria-label="Primary">...</nav>
<nav aria-label="Breadcrumb">...</nav>

<!-- Screen reader landmark list:
     'Primary, navigation'
     'Breadcrumb, navigation' -->

<!-- When only one nav, aria-label is optional but still helpful -->

aria-labelledby em seções

Associe as seções aos seus títulos para fornecer contexto aos leitores de tela:

<section aria-labelledby="about-heading">
  <h2 id="about-heading">About Our Team</h2>
  <p>We are a team of passionate developers...</p>
</section>
<!-- Screen reader: 'About Our Team, region' when entering section -->

aria-label vs texto visível

aria-label substitui o texto visível — tenha cuidado:

<button aria-label="Delete account permanently">
  Delete
</button>
<!-- Screen reader hears: 'Delete account permanently'
     Sighted user reads: 'Delete' -->

<!-- Best practice: visible text and aria-label should agree
     If possible, include extra context in visible text too:
     <button>Delete account permanently</button> -->

<!-- aria-label should start with the visible text when possible
     for speech recognition users who use voice commands -->

aria-describedby para erros

Vincule as mensagens de erro aos campos de entrada:

<label for="email">Email</label>
<input
  type="email"
  id="email"
  aria-describedby="email-error"
  aria-invalid="true"
>
<span id="email-error" role="alert">
  Please enter a valid email address.
</span>
<!-- When input receives focus, screen reader reads:
     'Email [field], invalid. Please enter a valid email address.' -->

Várias referências de aria-describedby

aria-describedby pode referenciar vários elementos:

<input
  type="password"
  aria-label="New password"
  aria-describedby="pwd-hint pwd-strength"
>
<p id="pwd-hint">Must be 8+ characters.</p>
<meter id="pwd-strength" aria-label="Password strength" value="2" max="4">Medium</meter>
<!-- Both elements are announced as the description -->

Rótulos visíveis vs ocultos

Quando não for possível usar um rótulo visível, use a classe sr-only:

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

/* Visually hidden but in accessibility tree: */
.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

Qual é a diferença entre aria-label e aria-labelledby?

Recapitulação: rótulos de ARIA

Princípios essenciais dos nomes acessíveis:

  • aria-label — nome em texto inserido no elemento para elementos sem rótulos visíveis
  • aria-labelledby — referencia texto visível existente por id
  • aria-describedby — descrição complementar (lida depois do nome)
  • Prefira rótulos visíveis e elementos label nativos do HTML
  • aria-label em pontos de referência distingue várias regiões do mesmo tipo

Perguntas Frequentes

A aula “aria-label aria-labelledby e aria-describedby” é grátis?

Sim — o texto completo de “aria-label aria-labelledby e aria-describedby” é 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 “aria-label aria-labelledby e aria-describedby”?

Forneça nomes e descrições acessíveis para os elementos. 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 “aria-label aria-labelledby e aria-describedby”?

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. Quando usar ARIA em vez de HTML nativo
  2. role button alert dialog e landmark
  3. aria-label aria-labelledby e aria-describedby
  4. aria-hidden e aria-live
← Voltar para HTML Academy