Estrutura da Página: Headings, Landmarks e Skip Link

Uma página bem estruturada permite que a pessoa encontre uma seção sem percorrer tudo desde o começo. Pense nela como um documento com sumário e atalhos.

<a class="skip-link" href="#conteudo">Pular para o conteúdo</a>

<header>
  <a href="/">Loja Horizonte</a>
</header>
<nav aria-label="Principal">
  <a href="/produtos">Produtos</a>
  <a href="/pedidos">Meus pedidos</a>
</nav>
<main id="conteudo">
  <h1>Minha conta</h1>
  <section aria-labelledby="pedidos-titulo">
    <h2 id="pedidos-titulo">Pedidos recentes</h2>
    <article>
      <h3>Pedido 1042</h3>
      <a href="/pedidos/1042">Acompanhar entrega</a>
    </article>
  </section>
</main>
<footer>Central de ajuda</footer>

Headings formam o mapa do conteúdo

Use títulos para representar a hierarquia real da página. Não escolha h3 porque ele "parece menor"; aparência é trabalho do CSS. Ao listar apenas os headings, a estrutura ainda deve contar uma história coerente.

Landmarks formam o mapa da interface

header, nav, main, aside e footer ajudam a identificar regiões importantes. Quando há mais de uma navegação, dê nomes diferentes:

<nav aria-label="Principal">...</nav>
<nav aria-label="Categorias de produtos">...</nav>

Skip link economiza navegação

Quem usa teclado pode pular menus repetidos e ir direto ao conteúdo principal. O link pode ficar visualmente escondido até receber foco:

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

• Headings organizam a hierarquia do conteúdo.
• Landmarks identificam regiões da interface.
• Skip link evita percorrer blocos repetidos a cada página.

Teste o mapa da página

1. Pressione Tab logo após carregar a página: o skip link deve aparecer.
2. Ative-o e confirme que o foco chega ao conteúdo principal.
3. Use o painel de acessibilidade ou uma extensão de headings para listar títulos.
4. Verifique se existe um único main e se as navegações têm nomes claros.

No próximo nó, vamos lidar com um dos casos mais conhecidos de acessibilidade: imagens e texto alternativo.