Navegação

Esta é o capítulo 29 de 52 do volume Aprenda a Web. O projeto-fio é a Oficina Costeira, um coletivo fictício de design em João Pessoa. O exemplo está em exemplos/29-navegacao/. Em cada capítulo: leia, copie, mude uma coisa, preveja, recarregue e confira.

O que você vai aprender

• Marcar o menu com nav, lista e links reais.
• Ligar várias páginas com caminhos relativos.
• Destacar a página atual com aria-current.
• Colocar um skip-link no topo e testá-lo no teclado.
• Escolher padrão: lista em linha, âncora no rodapé ou grade.
• Evitar menu que some sem alternativa acessível.

Lista dentro de nav

Quase todo menu da Web é uma lista de destinos. nav nomeia a região. ul e li guardam os itens. O clique vai no a, não no li.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Início — Oficina Costeira</title>
    <link rel="stylesheet" href="assets/stylesheets/main.css">
  </head>
  <body>
    <a class="skip" href="#conteudo">Pular para o conteúdo</a>
    <header>
      <a class="brand" href="index.html">Oficina Costeira</a>
      <nav aria-label="Principal">
        <ul class="menu">
          <li><a href="index.html" aria-current="page">Início</a></li>
          <li><a href="projetos.html">Projetos</a></li>
          <li><a href="equipe.html">Equipe</a></li>
          <li><a href="agenda.html">Agenda</a></li>
          <li><a href="contato.html">Contato</a></li>
        </ul>
      </nav>
    </header>
    <main id="conteudo">
      <h1>Oficina Costeira</h1>
      <p>Coletivo fictício em João Pessoa.</p>
    </main>
  </body>
</html>

aria-label="Principal" distingue este nav de outro no rodapé. Copie o bloco. Mude o rótulo para Menu do site. Preveja o que o leitor de tela anuncia. Recarregue.

Erro comum: montar o menu com div empilhados. A lista some para quem navega por regiões. Use ul.

Caminhos entre páginas

Cada href aponta para um arquivo. Na raiz do exemplo, projetos.html é irmão de index.html. Pasta index.html é a página padrão daquela pasta.

Se a equipe vivesse em equipe/index.html, o início seria ../index.html. O ../ sobe um nível.

O mesmo menu precisa existir em todas as páginas, com os caminhos certos para aquele arquivo. Um link href="#" não leva a lugar nenhum.

Leia equipe.html no exemplo. Confira se o link “Início” volta para index.html. Mude um href de propósito. Preveja a página 404 do navegador. Recarregue e desfaça.

A página atual

Quem chega no meio do site precisa ver onde está. aria-current="page" marca o link da página aberta. Coloque só nesse a. Nas outras páginas, mova o atributo.

.menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.menu a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

Não use só cor. Sublinhado ou fundo forte também vale. O atributo informa tecnologias assistivas; a classe visual sozinha, não.

Erro comum: deixar aria-current="page" no Início em todas as páginas. O leitor anuncia a página errada. Revise cada HTML.

Skip-link

O primeiro Tab deve revelar “Pular para o conteúdo”. O href aponta para o id do main. Sem isso, quem usa teclado percorre logo e menu em toda página.

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: #fff;
  padding: 0.5rem 1rem;
}

.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
  z-index: 10;
}

a:focus-visible {
  outline: 3px solid #c45c26;
  outline-offset: 3px;
}

Abra index.html. Aperte Tab uma vez. Preveja o link visível no canto. Recarregue se o CSS não estiver ligado. Confira o contorno de cerca de 3 px.

O id="conteudo" precisa existir. Se o href e o id não batem, o salto falha.

Padrões visuais

Poucos itens na horizontal: Flexbox com flex-wrap. A lista quebra linha no telefone em vez de esconder destinos.

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Muitos itens no topo estreito: âncora no cabeçalho para #nav no rodapé. O menu permanece no HTML, só muda o ponto de partida.

<header>
  <a href="#nav">Ir ao menu</a>
</header>
<nav id="nav">
  <!-- os mesmos links -->
</nav>

Grade de dois por linha:

.menu {
  display: flex;
  flex-wrap: wrap;
}

.menu li {
  width: 50%;
}

Menu que abre com checkbox invisível existe, mas some destinos e costuma falhar no teclado. Neste volume o menu permanece visível. Se precisar recolher, use details e summary com os links ainda no HTML.

Conferir no teclado

Percorra a ordem: skip-link, marca, itens do menu, conteúdo, rodapé. Enter no skip-link deve pular o menu. Enter em “Projetos” abre projetos.html com aria-current nesse item.

Estreite a janela. Os itens quebram linha. O texto não pode ficar cortado. Zoom 200%: o menu continua clicável.

Mude a cor de fundo do header para um tom claro. Preveja o contraste dos links brancos. Recarregue. Se falhar, volte à cor #0b4f6c do exemplo.

Erro comum: display: none no menu “para ficar limpo”. O destino some do teclado e do leitor. Esconda só visualmente se houver outro caminho equivalente e visível.

Atividades

1. Qual atributo marca o link da página aberta para tecnologias assistivas?
2. O skip-link aponta para #conteudo. O que precisa existir no main?
3. Por que href="#" é um problema no menu da Oficina Costeira?
4. Cite um padrão de menu que mantém todos os destinos visíveis no telefone.
5. Onde o skip-link deve aparecer na ordem de Tab?

Respostas comentadas

1. aria-current="page" no a correspondente. Não copie o atributo para os outros itens.
2. id="conteudo" no main (ou no primeiro bloco de conteúdo). Sem o id, o salto não ocorre.
3. O link não leva a um arquivo. A pessoa clica e permanece na mesma página.
4. Lista em linha com flex-wrap, grade 50%, ou âncora para o menu no rodapé.
5. Primeiro. É o primeiro elemento focável do body.

Referências

• nav
• aria-current
• :focus-visible

O arquivo completo

Referência do exemplo 29-navegacao, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}