ARIA e acessibilidade: label, role e aria-*
Associe labels a controles, aplique funções ARIA quando necessário e use aria-label e aria-describedby para oferecer suporte a leitores de tela.
ARIA e acessibilidade: label, role e aria-* é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Por que usar ARIA?
ARIA (Aplicações de Internet Ricas e Acessíveis) é um conjunto de atributos HTML que comunica a finalidade, o estado e as propriedades dos componentes da interface às tecnologias assistivas, como leitores de tela — especialmente no caso de componentes personalizados que não têm um equivalente nativo em HTML.
A primeira regra de ARIA
Não use ARIA se um elemento ou atributo HTML nativo puder realizar a tarefa. <button> é sempre melhor que <div role="button">. O HTML nativo oferece acessibilidade gratuitamente.
Papéis de referência
Os papéis de referência da ARIA permitem que usuários de leitores de tela pulem diretamente para seções da página. A maioria é indicada implicitamente pelo HTML semântico: <main> → role=main, <nav> → role=navigation. Adicione papéis explícitos somente quando um elemento semântico não for usado.
<div role="main">...</div> <!-- prefer <main> -->
<div role="navigation">...</div> <!-- prefer <nav> -->
<div role="banner">...</div> <!-- prefer <header> at page level -->aria-label
aria-label fornece um nome acessível invisível para um elemento. Use-o quando não houver um rótulo de texto visível ao qual fazer referência. É comum em botões com ícones.
<button aria-label="Close dialog">×</button>
<a href="/rss.xml" aria-label="Subscribe to RSS feed">
<img src="rss-icon.svg" alt="">
</a>aria-labelledby
aria-labelledby usa o texto de outro elemento como rótulo, por meio de uma referência a um ID. É preferível a aria-label quando já existe um rótulo visível.
<h2 id="billing-title">Billing Information</h2>
<form aria-labelledby="billing-title">
...
</form>aria-describedby
aria-describedby faz referência a um texto descritivo adicional — como uma mensagem de erro ou uma orientação — que complementa o rótulo. Os leitores de tela leem primeiro o rótulo e depois a descrição.
<input id="pass" type="password" aria-describedby="pass-hint">
<p id="pass-hint">Must be at least 12 characters with a symbol.</p>aria-expanded e aria-haspopup
Componentes dinâmicos precisam de atributos de estado. aria-expanded indica se um componente de divulgação (acordeão ou menu suspenso) está aberto ou fechado. Atualize-o em JavaScript quando o estado mudar.
<button aria-expanded="false" aria-controls="menu" id="menu-btn">Menu</button>
<ul id="menu" hidden>...</ul>
<!-- On toggle: -->
btn.setAttribute('aria-expanded', 'true');
menu.removeAttribute('hidden');aria-hidden
aria-hidden="true" remove um elemento e todos os seus filhos da árvore de acessibilidade. Use-o em elementos decorativos, como ícones SVG que já estejam identificados por um texto visível.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save Draft
</button>Regiões dinâmicas: aria-live
aria-live informa aos leitores de tela que devem anunciar as alterações nessa região. polite aguarda o usuário terminar a ação atual. assertive interrompe imediatamente (use com moderação).
<div aria-live="polite" aria-atomic="true">
<!-- Status messages announced when updated -->
Form saved successfully.
</div>role="alert"
role="alert" é implicitamente aria-live=assertive. Insira mensagens de erro ou notificações importantes em um elemento com esse papel, e os leitores de tela as anunciarão imediatamente.
const errorEl = document.querySelector('[role="alert"]');
errorEl.textContent = 'Email is required.'; // announced immediatelyErros acessíveis em formulários
Quando um campo apresenta um erro: use aria-invalid="true", associe a mensagem de erro usando aria-describedby e atualize o conteúdo de role="alert". Essa abordagem em três partes garante que os leitores de tela comuniquem todas as informações necessárias.
<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" role="alert">Please enter a valid email address.</p>Verificação rápida
Qual atributo ARIA fornece o nome acessível de um elemento quando não há um rótulo de texto visível?
Recapitulação: fundamentos de ARIA
Prefira HTML nativo a ARIA. Use aria-label em botões com ícones. Use aria-labelledby para fazer referência a rótulos visíveis. Use aria-describedby para orientações e erros. Use aria-expanded em componentes de divulgação. Use aria-hidden em conteúdo decorativo. Use aria-live para atualizações dinâmicas de status. Use aria-invalid + role=alert para erros de formulário.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 41
- Aulas
- 163
Perguntas Frequentes
A aula “ARIA e acessibilidade: label, role e aria-*” é grátis?
Sim — o texto completo de “ARIA e acessibilidade: label, role e aria-*” é 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “ARIA e acessibilidade: label, role e aria-*”?
Associe labels a controles, aplique funções ARIA quando necessário e use aria-label e aria-describedby para oferecer suporte a leitores de tela. Você pratica Frontend 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 Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend 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 2 de 4.
Quanto tempo leva a aula “ARIA e acessibilidade: label, role e aria-*”?
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 Frontend Academy?
Sim. Cada aula de Frontend 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
- Controles de formulário: tipos de input, select e textarea
- ARIA e acessibilidade: label, role e aria-*
- HTML5 semântico: semântica versus sopa de divs
- Atributos de validação de formulários