Papéis e atributos ARIA
Aplique papéis de regiões de referência, regiões dinâmicas e atributos aria-* para aprimorar componentes quando o HTML nativo não for suficiente.
Papéis e atributos ARIA é uma aula grátis de Frontend 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que é ARIA?
ARIA (Accessible Rich Internet Applications) é um conjunto de atributos HTML que descreve a função, o estado e as propriedades dos elementos para as tecnologias assistivas. É a ponte para componentes personalizados que não podem ser expressos com HTML nativo.
Primeira regra da ARIA: não use ARIA
Se um elemento nativo faz o que você precisa, use-o. <button> é melhor que <div role="button">. ARIA usada incorretamente é pior do que não usar ARIA: ela faz algo parecer acessível, mas deixa os usuários sem saída.
Categorias de atributos ARIA
Há três categorias: funções (o que algo é), propriedades (relativamente estáticas — aria-label, aria-describedby) e estados (dinâmicos — aria-expanded, aria-pressed, aria-checked).
Funções de referência
Identificam as principais regiões da página. A maioria tem equivalentes no HTML5, que devem ser preferidos.
<!-- HTML5 (preferred): -->
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<!-- ARIA equivalents (use only when HTML5 won't work): -->
<div role="navigation">...</div>
<div role="main">...</div>
<div role="complementary">...</div>aria-label e aria-labelledby
aria-label: fornece um nome acessível com uma string. aria-labelledby: usa como nome o texto de referência de outro elemento. Use-os quando não houver texto visível ou quando ele for insuficiente.
<!-- Icon-only button needs a label: -->
<button aria-label="Close dialog">
<svg>...</svg>
</button>
<!-- Section labelled by its heading: -->
<section aria-labelledby="settings-title">
<h2 id="settings-title">Settings</h2>
...
</section>aria-describedby para instruções
aria-describedby vincula um elemento a uma descrição mais longa. É útil para instruções de formulários, mensagens de erro e dicas de ferramentas.
<label for="password">Password</label>
<input id="password" type="password" aria-describedby="pw-hint">
<p id="pw-hint">Must be at least 12 characters with a number and symbol.</p>aria-expanded para indicar expansão
Botões que alternam um painel devem expor aria-expanded = true/false.
<button aria-expanded="false" aria-controls="faq-1" onclick="toggle()">
How do I cancel?
</button>
<div id="faq-1" hidden>
Visit Settings > Billing to cancel.
</div>aria-pressed para botões de alternância
Botões com estado ligado/desligado (silenciar, negrito) usam aria-pressed.
<button aria-pressed="true" onclick="toggleBold()">
Bold
</button>Regiões dinâmicas: aria-live
Conteúdo atualizado dinamicamente (notificações breves, resultados de pesquisa, resumos de erros) deve estar em uma região dinâmica para que os leitores de tela anunciem as mudanças. polite espera uma pausa; assertive interrompe.
<!-- Toast container -->
<div aria-live="polite" aria-atomic="true" id="toast-region"></div>
<!-- Critical alert -->
<div role="alert">Session expired. Please log in again.</div>Forma abreviada de role="alert"
role="alert" é uma forma abreviada de uma região dinâmica assertiva com aria-atomic. Use com moderação: cada alerta interrompe o usuário.
aria-hidden para conteúdo decorativo
aria-hidden="true" remove um elemento da árvore de acessibilidade. Use-o em ícones decorativos ao lado de rótulos de texto; caso contrário, os leitores de tela os anunciarão de forma redundante.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save
</button>Teste com um leitor de tela
A única forma de saber se a ARIA funciona é testá-la. VoiceOver (macOS/iOS, gratuito), NVDA (Windows, gratuito), TalkBack (Android, gratuito). Dez minutos com o VoiceOver revelam mais do que qualquer ferramenta de auditoria.
Verificação rápida
Qual atributo ARIA você deve definir em um botão que contém apenas um ícone e não tem um rótulo de texto visível?
Recapitulação: ARIA
ARIA descreve a função, as propriedades e o estado para as tecnologias assistivas. Prefira HTML nativo antes de recorrer à ARIA. aria-label/aria-labelledby fornecem nomes acessíveis. aria-describedby é usado para instruções. aria-expanded/aria-pressed são usados para alternâncias. aria-live é usado para anúncios dinâmicos. aria-hidden é usado para conteúdo decorativo. Sempre teste com um leitor de tela real.
Perguntas Frequentes
A aula “Papéis e atributos ARIA” é grátis?
Sim — o texto completo de “Papéis e atributos 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 “Papéis e atributos ARIA”?
Aplique papéis de regiões de referência, regiões dinâmicas e atributos aria-* para aprimorar componentes quando o HTML nativo não for suficiente. 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 3 de 4.
Quanto tempo leva a aula “Papéis e atributos 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
- Níveis WCAG A AA AAA
- HTML semântico como base
- Papéis e atributos ARIA
- Navegação pelo teclado e gerenciamento de foco