Navegação

Como você aprendeu em links, o elemento <a> com o atributo href cria links que os usuários podem seguir clicando ou tocando. Em listas, você aprendeu a criar listas de conteúdo. Neste módulo, você vai descobrir como agrupar listas de links para criar navegação.

Há vários tipos de navegação e várias maneiras de mostrá-los. As âncoras nomeadas em um texto que direcionam para outras páginas do mesmo site são consideradas navegação local. A navegação local, que consiste em uma série de links, mostrando a hierarquia da página atual em relação à estrutura do site ou as páginas que o usuário seguiu para chegar à página atual, é chamada de navegação estrutural.

Um sumário de uma página é outro tipo de navegação local. Uma página que contém links hierárquicos para todas as páginas de um site é chamada de mapa do site. A navegação que leva às páginas de nível superior do site, que provavelmente está em todas as páginas, é chamada de navegação global. A navegação global pode ser mostrada de várias maneiras diferentes, incluindo barras de navegação, menus suspensos e menus flutuantes. O mesmo site pode mostrar a navegação global de maneira diferente, dependendo do tamanho da janela de visualização.

Sempre verifique se os usuários podem navegar para qualquer página do seu site com o menor número de cliques possível, garantindo que a navegação seja intuitiva e não confusa. No entanto, não há requisitos específicos para elementos de navegação. O MachineLearningWorkshop.com, um site de página única, tem uma barra de navegação local no canto superior direito, que é onde os sites de várias páginas costumam colocar a navegação global.

Link "Pular para o conteúdo"

Alguns sites têm um link "pular para o conteúdo", geralmente como o primeiro elemento na ordem de foco. Ela pode ter esta aparência:

<a href="#main" class="skip-link button">Skip to main</a>

Quando clicado ou quando tem foco e o usuário pressiona Enter, ele rola a página e dá foco ao elemento com um ID main, presumivelmente o conteúdo principal.

<main id="main">

Para melhorar a usabilidade e a acessibilidade, é importante permitir que os usuários ignorem os blocos de conteúdo que são repetidos em todas as páginas, como um cabeçalho compartilhado e itens de navegação principais. Com um link de salto, quando um usuário de teclado pressiona tab, ele pode acessar rapidamente o novo conteúdo da página. Assim, eles não precisam navegar por um menu extenso.

A maioria dos designers não gosta da aparência de ter um link assim na parte de cima da página. Não há problema em ocultar esse link. No entanto, lembre-se de que, quando o link recebe o foco, o que acontece quando um usuário do teclado navega pelo link na página, ele precisa estar visível para o usuário.

Oculte o conteúdo apenas em um estado não focado e não ativo usando um seletor semelhante a .visually-hidden:not(:focus):not(:active).

Assim como todo texto de link, o nome precisa indicar claramente para onde o link leva o usuário. O destino do link precisa ser o início do conteúdo principal da página.

Índice

O primeiro elemento do conteúdo principal é o cabeçalho <h1> com o título desta página: <h1>Navigation</h1>. O título principal é seguido por uma breve descrição do conteúdo deste tutorial.

Em telas menores, o sumário aparece depois do cabeçalho. Em telas maiores, ele aparece em uma barra lateral alinhada à direita.

O melhor elemento para usar em seções de navegação é <nav>. Ele informa automaticamente ao leitor de tela e ao mecanismo de pesquisa que uma seção tem uma função de navigation, uma função de ponto de referência.

Inclua o atributo aria-label para uma breve descrição da finalidade da navegação. Nesse caso, como o valor desse atributo seria redundante para o texto "Nesta página". Para fazer referência a texto visível, use aria-labelledby.

Usando um id, isso pode ficar assim:

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
...
</nav>

Além de reduzir a redundância, o texto visível é traduzido por serviços de tradução, mas os valores de atributos podem não ser. Quando possível, se houver um texto que forneça um rótulo adequado, consulte esse texto em vez de usar o texto do atributo.

A navegação "Nesta página" é o sumário. Se quiser usar aria-label, forneça esse contexto em vez de repetir o texto visível:

<nav aria-label="Table of Contents">
  <p>On this page</p>
...
</nav>

Para fornecer um nome acessível em um elemento, não inclua o nome do elemento. Os leitores de tela fornecem o nome do elemento ao usuário. Por exemplo, ao usar o elemento <nav>, não inclua a palavra "navegação", porque essa informação já está incluída com elementos semânticos.

Embora os itens de navegação não precisem estar aninhados em uma lista, o uso de uma lista permite que os usuários de leitores de tela saibam quantos itens e, portanto, links, estão na navegação.

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
  <ul role="list">
    <li>
      <a href="#skip">Skip to content link</a>
    </li>
    <li>
      <a href="#toc">Table of contents</a>
    </li>
    <li>
      <a href="#bc">Page breadcrumbs</a>
    </li>
    <li>
      <a href="#ln">Local navigation</a>
    </li>
    <li>
      <a href="#global">Global navigation</a>
    </li>
  </ul>
</nav>

Evitar mudar a ordem das guias

O sumário pode aparecer depois do cabeçalho, em telas menores ou em uma barra lateral alinhada à direita. Incluir dois conjuntos idênticos de navegação apenas para mostrar um seria um antipadrão.

Usamos CSS para mostrar a navegação como uma barra lateral em páginas com mais de 1.254 pixels de largura.

Os usuários estão acostumados a que o conteúdo seja responsivo e mude de local quando eles trocam de dispositivo ou aumentam o tamanho da fonte, mas não esperam que a ordem das guias mude quando fazem isso. Os layouts de página precisam ser acessíveis, previsíveis e consistentes em todo o site. Aqui, a localização do índice não é previsível.

Navegação estrutural da página

A navegação estrutural oferece uma navegação secundária para ajudar os usuários a entender onde estão em um site. A navegação estrutural geralmente indica a hierarquia de URL do documento atual e a localização da página atual na estrutura do site.

A estrutura do site do ponto de vista do usuário pode ser diferente da estrutura de arquivos no servidor, e isso não é um problema. O usuário não precisa saber como você organiza seus arquivos, mas precisa conseguir navegar pelo conteúdo.

Os breadcrumbs oferecem aos usuários insights sobre a organização do seu site. Isso ajuda os usuários a navegar até qualquer seção ancestral, sem precisar voltar por todas as páginas visitadas anteriormente, usando a função back.

Se o site tiver uma estrutura de diretório hierárquica, como é o caso do web.dev, a navegação por breadcrumb geralmente inclui um link para a página inicial ou nome de host e um link para o arquivo de índice de cada diretório no caminho do URL. Incluir a página atual é opcional e requer um pouco mais de atenção.

const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"

As seções da navegação mostram o caminho da página atual até a página inicial, mostrando cada nível intermediário.

Todas as páginas do módulo Aprenda HTML têm a mesma navegação de rastreamento, mostrando a hierarquia das lições HTML na seção Learn de web.dev.

O código será semelhante a este:

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">web.dev</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">HTML</a>
    </li>
  </ol>
</nav>

O elemento <nav>, uma função de marco, informa à tecnologia assistiva para apresentar a navegação estrutural como um elemento de navegação na página. O nome acessível de "caminho de navegação", fornecido com o aria-label, diferencia essa navegação dos outros marcos de navegação no mesmo documento.

Entre cada link há um separador de conteúdo. Esses separadores podem ser gerados com CSS para aparecer antes de cada item da lista, começando pelo segundo.

[aria-label^="breadcrumbs" i] li + li::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  rotate: 45deg;
  opacity: .8
}

Os leitores de tela não "veem" esses ícones, o que é uma prática recomendada. Os separadores entre os links de navegação devem ficar ocultos para leitores de tela. Eles também precisam ter contraste suficiente com o plano de fundo, assim como qualquer outro texto e elemento visual na página.

Nosso exemplo de código usa uma lista ordenada, que é preferível a uma lista não ordenada, já que os itens são enumerados. role="list" foi adicionado porque alguns valores de propriedade de exibição CSS removem a semântica de alguns elementos.

Geralmente, o link para a página inicial em uma navegação estrutural deve ser "início" em vez do nome ou do logotipo do site. Como o breadcrumb está na parte de cima do documento, faz sentido o uso desse antipadrão.

A página atual, Navegação, não está incluída no rastreamento.

Página atual

Quando a página atual é incluída em um breadcrumb, o texto não deve ser um link, e aria-current="page" precisa estar incluído no item da lista da página atual. Se não estiver incluído, é útil indicar que o cabeçalho a seguir é a página atual com um ícone ou outro símbolo.

Confira uma versão alternativa do breadcrumb com esta prática:

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
    <li aria-current="page">
      Navigation
    </li>
  </ol>
</nav>

Os rastros podem não ser os mesmos que as etapas lineares seguidas por um usuário para chegar à página atual. A lista de etapas seguidas até este ponto pode ser aninhada em um <nav>, mas não deve ser rotulada como um breadcrumb.

Navegação local

O próximo componente de navegação aparece na maioria dos dispositivos médios e grandes em uma barra lateral esquerda, com uma barra de filtro e links para cada uma das seções do Learn HTML. Esses links e a barra de filtros são a navegação por local.

Se você acessar esse site em um dispositivo móvel ou tiver uma tela menor, a barra lateral vai ficar oculta ao carregar a página. Você pode acessar com menu na navegação superior.

A principal diferença entre a navegação local permanente em telas grandes e a navegação local em telas menores é a seta que leva de volta à navegação principal na parte de cima e fecha a navegação.

O link para este documento tem a mesma aparência de outros links na navegação local. No entanto, ele pode ter uma aparência um pouco diferente dos outros links para indicar aos usuários com visão que essa é a página atual. Essa diferença visual deve ser criada com CSS.

A página atual também pode ser identificada com o atributo aria-current="page". Isso informa às tecnologias adaptativas que os links são para a página atual.

O ideal é que o HTML desse item de lista na navegação local seja semelhante a este:

<li>
  <a aria-current="page" aria-selected="true" href="/learn/html/navigation">
    Navigation
  </a>
</li>

Navegação global

A navegação global leva às páginas de nível superior do site e é a mesma em todas as páginas. A navegação global de um site também pode ser composta de guias que abrem listas aninhadas de links para todas as subseções de um site ou outros menus. Ela pode incluir seções com títulos, botões e widgets de pesquisa. Esses recursos extras não são obrigatórios. O que é necessário é que a navegação apareça em todas as páginas e seja a mesma em todas elas, com aria-current="page" em todos os links para a página atual, é claro.

A navegação global oferece uma maneira consistente de viajar para qualquer lugar no aplicativo ou site. O site do Google não tem navegação global na parte de cima das páginas. O Yahoo! faz isso. Embora todas as principais propriedades do Yahoo! tenham estilos diferentes, o conteúdo da maioria das seções é o mesmo.

O conteúdo dos cabeçalhos de navegação global de notícias e esportes é o mesmo. No entanto, o ícone que mostra que o usuário está na página de esportes não tem contraste suficiente para ser acessível, mesmo para visitantes com visão perfeita. Ambas as seções têm uma navegação global com uma navegação local específica da seção abaixo dela.

Assim como a navegação global, os rodapés precisam ser idênticos em todas as páginas. Mas essa é a única semelhança. A navegação global permite acessar todas as partes do site, do ponto de vista de um produto. Os elementos de navegação em um rodapé não têm requisitos específicos.

Geralmente, o rodapé inclui links corporativos, como declarações legais sobre a empresa, uma página de carreiras e links para fontes externas relevantes, como redes sociais.

O rodapé desta página contém dois conjuntos de elementos de navegação: um conjunto de três colunas de navegação relacionada ao web.dev e uma navegação separada de termos e privacidade do Google. A navegação no rodapé inclui como contribuir com o web.dev, conteúdo relacionado fornecido pela equipe do web.dev e links externos de mídias sociais.

Em seguida, vamos aprender a marcar tabelas de dados.

Teste seu conhecimento

Teste seus conhecimentos sobre navegação.