Quando usar ARIA em vez de HTML nativo
Siga a primeira regra do ARIA: prefira a semântica nativa.
Quando usar ARIA em vez de HTML nativo é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 1 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.
O que é ARIA?
ARIA (Aplicações avançadas de Internet acessíveis) é um conjunto de atributos que podem ser adicionados ao HTML para melhorar a acessibilidade para tecnologias assistivas. Ele preenche lacunas quando a semântica nativa do HTML não é suficiente.
A primeira regra de ARIA
A orientação mais importante de ARIA: não use ARIA se o HTML nativo puder fazer isso:
<!-- BAD: ARIA on a div -->
<div role="button" tabindex="0" onclick="submit()">Submit</div>
<!-- GOOD: use a real button -->
<button type="submit">Submit</button>
<!-- Native HTML elements:
- Are keyboard accessible by default
- Have correct semantics built in
- Work in more contexts
- Require less code
-->Quando o HTML nativo não é suficiente
ARIA é necessária quando:
- Os componentes personalizados da interface do usuário não têm um equivalente em HTML (abas, caixas de combinação)
- A função de um elemento nativo precisa ser substituída
- Atualizações de conteúdo dinâmico precisam ser anunciadas
- Relações complexas entre elementos precisam ser explicitadas
ARIA não adiciona comportamento
Um mal-entendido importante: ARIA adiciona metadados de acessibilidade — não adiciona funcionalidade:
<!-- Adding role="button" to a div does NOT:
- Make it keyboard-focusable (add tabindex="0")
- Make Enter/Space activate it (add event listeners)
- Make it styled like a button (add CSS)
-->
<!-- You must implement ALL behavior yourself -->
<!-- Native <button> handles all this for free -->A taxonomia de ARIA
ARIA tem três categorias de atributos:
- Funções — definem o que é um elemento:
role="button",role="dialog" - Propriedades — descrevem características estáticas:
aria-label,aria-required - Estados — descrevem condições dinâmicas:
aria-expanded,aria-checked
HTML semântico vs equivalentes de ARIA
A maioria dos elementos HTML já tem funções ARIA implícitas:
<nav> ≡ role="navigation"
<main> ≡ role="main"
<aside> ≡ role="complementary"
<header> ≡ role="banner" (page-level)
<footer> ≡ role="contentinfo" (page-level)
<button> ≡ role="button"
<a href> ≡ role="link"
<h1-h6> ≡ role="heading"
<ul> ≡ role="list"Usos válidos comuns de ARIA
Exemplos legítimos de uso de ARIA:
<!-- 1. Custom dropdown (no native equivalent): -->
<div role="combobox" aria-expanded="false">...</div>
<!-- 2. Loading state announcement: -->
<div role="status" aria-live="polite">Loading results...</div>
<!-- 3. Override landmark label: -->
<nav aria-label="Primary navigation">...</nav>
<!-- 4. Associate error with input: -->
<input aria-describedby="error-msg">
<span id="error-msg" role="alert">Invalid email</span>Uso inválido de ARIA
Erros comuns de ARIA:
<!-- BAD: ARIA role contradicts the element -->
<h2 role="button">Heading</h2> <!-- don't turn a heading into a button -->
<!-- BAD: ARIA on an unsupported element -->
<div role="listitem">Item</div> <!-- listitem must be inside list role -->
<!-- BAD: ARIA where HTML works fine -->
<p role="paragraph">Text</p> <!-- p already has paragraph semantics -->
<!-- BAD: aria-label on hidden element -->
<span aria-hidden="true" aria-label="something"> <!-- contradictory -->Funções de pontos de referência
As funções de pontos de referência de ARIA ajudam os usuários de leitores de tela a navegar pelas regiões da página:
<div role="banner"> <!-- header for the whole page -->
<div role="navigation"> <!-- major navigation -->
<div role="main"> <!-- main content -->
<div role="complementary"> <!-- aside content -->
<div role="contentinfo"> <!-- page footer -->
<div role="search"> <!-- search form -->
<div role="form"> <!-- form with label -->
<!-- These are ONLY needed if using divs instead of semantic elements -->
<!-- Prefer the native HTML elements instead -->Testando a implementação de ARIA
Como verificar se sua implementação de ARIA está correta:
- Use o painel de acessibilidade no DevTools do Chrome/Firefox
- Ouça com VoiceOver (Mac) ou NVDA (Windows)
- Execute a extensão axe DevTools
- Verifique a árvore de acessibilidade — ela reflete o que você espera?
Armadilha de aria-hidden
Erro comum com aria-hidden:
<!-- BAD: aria-hidden on element that still receives focus -->
<button aria-hidden="true">Close</button>
<!-- The button is still focusable but invisible to screen readers
Screen reader users reach it via Tab but hear nothing -->
<!-- GOOD: for focus + hide, use hidden attribute or display:none: -->
<button hidden>Close</button> <!-- removes from both tab order and AT -->
<!-- Or: if you must keep visible: -->
<button style="display:none" aria-hidden="true">Close</button>Verificação rápida
O que adicionar role="button" a um elemento div fornece automaticamente?
Recapitulação: ARIA vs HTML nativo
Princípios essenciais de ARIA:
- Primeira regra: use HTML nativo quando possível
- ARIA adiciona apenas semântica — você precisa implementar o comportamento
- Três categorias: funções, propriedades e estados
- As funções de pontos de referência ajudam na navegação com leitores de tela
- Teste com o painel de acessibilidade do DevTools e um leitor de tela
Perguntas Frequentes
A aula “Quando usar ARIA em vez de HTML nativo” é grátis?
Sim — o texto completo de “Quando usar ARIA em vez de HTML nativo” é 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 “Quando usar ARIA em vez de HTML nativo”?
Siga a primeira regra do ARIA: prefira a semântica nativa. 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 1 de 4.
Quanto tempo leva a aula “Quando usar ARIA em vez de HTML nativo”?
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
- Quando usar ARIA em vez de HTML nativo
- role button alert dialog e landmark
- aria-label aria-labelledby e aria-describedby
- aria-hidden e aria-live