HTML semântico como base
Use elementos HTML nativos, como button, nav e heading, para obter acessibilidade integrada sem esforço antes de recorrer a ARIA.
HTML semântico como base é 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.
HTML semântico oferece acessibilidade gratuitamente
Usar o elemento HTML correto oferece suporte ao teclado, anúncios para leitores de tela e funções ARIA corretas gratuitamente. A maioria dos problemas de acessibilidade surge do uso de div + JavaScript em vez do elemento nativo.
button vs div com onClick
Um <button> pode receber focus, anuncia “botão” aos leitores de tela, reage ao clique com Enter/Espaço e funciona com o envio do form. Um <div onClick> não tem nenhum desses recursos.
<!-- BAD: not keyboard accessible, not announced -->
<div class="btn" onclick="submit()">Save</div>
<!-- GOOD: full accessibility for free -->
<button type="button" onclick="submit()">Save</button>Use button para botões e a para links
Se a ação navega para uma URL, use <a href>. Se a ação executa algo na página, use <button>. Não use âncoras como botões (sem href, apenas onclick), pois isso confunde as tecnologias assistivas.
Cabeçalhos formam um esquema do documento
Use h1-h6 na ordem para criar um esquema lógico. Usuários de leitores de tela navegam pelos cabeçalhos; pular níveis (h1 -> h3) cria lacunas confusas.
<h1>Article Title</h1>
<h2>Section One</h2>
<h3>Subsection</h3>
<h2>Section Two</h2>
<!-- BAD: skipping levels -->
<h1>Title</h1>
<h4>Section</h4>Elementos de referência
Os elementos de referência do HTML5 (header, nav, main, aside, footer) permitem que usuários de leitores de tela pulem entre as principais regiões. Tenha um único <main> por página.
<header>
<nav>
<a href="/">Home</a>
</nav>
</header>
<main>
<h1>Page Title</h1>
<article>...</article>
<aside>Sidebar</aside>
</main>
<footer>...</footer>Elementos de lista
Use <ul> para listas não ordenadas, <ol> para listas ordenadas e <dl> para listas de definições. Os leitores de tela anunciam “lista com N itens”, uma indicação de navegação significativa.
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
<!-- Announced: 'list with 3 items' -->Formulários: rotule cada entrada
Toda entrada precisa de um <label> associado. O par for/id faz a ligação entre eles: clicar no rótulo coloca o focus na entrada, e os leitores de tela anunciam o rótulo quando o focus chega.
<label for="email">Email</label>
<input id="email" name="email" type="email">
<!-- Or wrap (no for/id needed): -->
<label>
Email
<input name="email" type="email">
</label>fieldset e legend para grupos
Agrupe entradas relacionadas (por exemplo, botões de opção) com <fieldset> + <legend>. Os leitores de tela anunciam a legenda sempre que uma entrada do grupo recebe focus.
<fieldset>
<legend>Choose a plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>Elementos table para dados tabulares
Use <table> com <thead>, <tbody> e <th scope="col">; nunca use tabelas para estruturar o layout. Os leitores de tela navegam pelas células em duas dimensões e anunciam os cabeçalhos.
article, section e figure
<article>: conteúdo independente (publicação de blog, comentário). <section>: agrupamento temático com um cabeçalho. <figure> + <figcaption>: mídia com legenda.
ARIA somente quando necessário
A primeira regra de ARIA é: não use ARIA. O HTML nativo sempre vence. Recorra à ARIA somente quando nenhum elemento semântico for adequado ao seu componente personalizado (caixa de combinação, abas, árvore).
Verificação rápida
Por que <button onclick="..."> é preferível a <div onclick="...">?
Recapitulação: HTML semântico
Use o elemento correto: button para ações, a para navegação, h1-h6 em ordem para o esquema, elementos de referência (header, nav, main, footer), ul/ol para listas, label para cada entrada, fieldset/legend para grupos de botões de opção e table para tabelas de dados. O HTML nativo oferece acessibilidade gratuitamente. ARIA é o último recurso.
Perguntas Frequentes
A aula “HTML semântico como base” é grátis?
Sim — o texto completo de “HTML semântico como base” é 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 “HTML semântico como base”?
Use elementos HTML nativos, como button, nav e heading, para obter acessibilidade integrada sem esforço antes de recorrer a ARIA. 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 “HTML semântico como base”?
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