Navegação

Navegação é o conjunto de links que orienta a pessoa pelo site do Belavista. HTML semântico + ordem de foco fazem o menu utilizável no teclado e em leitores de tela.

O exemplo deste capítulo é 10-navegacao, no pacote que acompanha o volume. Leia → mude uma coisa → preveja → recarregue → confira.

O que você vai aprender

• Envolver menus em nav com nome acessível.
• Estruturar links em lista.
• Marcar a página atual com aria-current="page".
• Incluir skip-link para pular ao main.
• Distinguir navegação principal, local e de rodapé.

nav não é só um menu bonito

nav sinaliza região de navegação. Pode haver mais de uma: principal, do rodapé, índices. Nomeie com aria-label quando houver várias:

<nav aria-label="Principal">…</nav>
<nav aria-label="Rodapé">…</nav>

Lista de links

O padrão didático deste volume:

<nav aria-label="Principal">
  <ul>
    <li><a href="index.html" aria-current="page">Início</a></li>
    <li><a href="cartazes.html">Cartazes</a></li>
    <li><a href="oficinas.html">Oficinas</a></li>
  </ul>
</nav>

aria-current="page" indica onde a pessoa está. Só um link do menu deve carregar isso por vez.

Skip-link

Antes do menu longo, um link “Ir para o conteúdo” aponta para #conteudo no main. Ele pode ficar visualmente oculto até receber foco — o CSS da faixa seguinte cuida do estilo; aqui o importante é existir no HTML.

Ordem do DOM = ordem do Tab

A ordem das teclas Tab segue a ordem do código (salvo truques ruins com tabindex). Coloque o skip-link primeiro, depois o header/nav, depois o main. Não reordene só “no visual” com CSS absoluto sem pensar no foco.

Erro comum: menu feito só com div clicáveis e sem href. Ou dezenas de links sem nav, misturados ao texto. Outro erro: aria-current em todos os itens.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Navegação — Belavista</title>
  </head>
  <body>
    <a class="skip-link" href="#conteudo">Ir para o conteúdo</a>
    <header>
      <p>Laboratório Belavista</p>
      <nav aria-label="Principal">
        <ul>
          <li><a href="index.html" aria-current="page">Início</a></li>
          <li><a href="cartazes.html">Cartazes</a></li>
          <li><a href="oficinas.html">Oficinas</a></li>
          <li><a href="contato.html">Contato</a></li>
        </ul>
      </nav>
    </header>
    <main id="conteudo">
      <h1>Bem-vinda ao ateliê</h1>
      <p>Use Tab para percorrer o skip-link e o menu. Confira o foco visível no navegador.</p>
    </main>
    <footer>
      <nav aria-label="Rodapé">
        <ul>
          <li><a href="acessibilidade.html">Acessibilidade</a></li>
          <li><a href="creditos.html">Créditos</a></li>
        </ul>
      </nav>
    </footer>
  </body>
</html>

Mova o skip-link para depois do main e preveja: quem usa teclado perde o atalho cedo.

Navegação local

Dentro de um artigo longo, um índice com âncoras (#materiais, #agenda) também pode ficar em nav aria-label="Nesta página".

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Por que usar aria-label em cada nav quando há mais de uma?
2. O que aria-current="page" comunica?
3. Qual o objetivo do skip-link?

Respostas comentadas

1. Para tecnologias assistivas anunciarem “Principal”, “Rodapé” etc., em vez de várias regiões genéricas “navegação”.
2. Que aquele link corresponde à página (ou etapa) atual.
3. Permitir pular blocos repetidos (menu) e ir direto ao conteúdo principal com teclado.