HTML Semântico e a Árvore de Acessibilidade

Quando o navegador encontra HTML semântico, ele já entende muita coisa sem você explicar manualmente. Compare duas versões visualmente parecidas de uma ação:

<!-- Barreira: parece botão, mas continua sendo uma div -->
<div class="botao" onclick="salvar()">Salvar alterações</div>

<!-- Solução: o elemento já representa a ação -->
<button type="button" onclick="salvar()">Salvar alterações</button>

Com CSS, os dois podem ficar iguais. Para o navegador e para tecnologias assistivas, não são iguais:

div:    texto "Salvar alterações"
button: botão "Salvar alterações", focável, ativável por teclado

Semântica é significado e comportamento

Compare:

<header>
  <a href="/">Loja Horizonte</a>
</header>
<nav aria-label="Principal">
  <a href="/produtos">Produtos</a>
</nav>
<main>
  <h1>Ofertas da semana</h1>
  <article>
    <h2>Cafeteira compacta</h2>
    <button type="button">Adicionar ao carrinho</button>
  </article>
</main>
<footer>Atendimento: ajuda@loja.test</footer>

Essas tags não servem apenas para organizar CSS. Elas descrevem regiões, títulos, conteúdo independente, navegação e ações. Isso permite navegar por landmarks, listar headings ou encontrar todos os botões sem percorrer palavra por palavra.

• HTML semântico comunica o papel do conteúdo.
• Elementos nativos já incluem comportamentos esperados.
• Árvore de acessibilidade expõe nome, função, valor e estado.
• CSS pode mudar a aparência sem trocar o significado do elemento.

Inspecione o resultado

No DevTools do navegador, abra a aba Accessibility e selecione o botão. Confira se aparecem um nome como "Adicionar ao carrinho" e a função button. Depois troque o elemento por uma div e compare o que desaparece.

Dica: antes de criar um componente com div e vários atributos, pergunte: já existe um elemento HTML que faz isso?

No próximo nó, vamos organizar a página para que ela tenha um mapa claro com headings, landmarks e skip link.