Navegação

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

Existem vários tipos de navegação e várias maneiras de exibi-los. Âncoras nomeadas no texto com links para outras páginas no do mesmo site são consideradas navegação local. Navegação local que consiste em uma série de links que exibem a hierarquia de a 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. O sumário de uma página é outro tipo de navegação local. Uma página que contém links hierárquicos para cada página de um site é chamada um mapa do site. A seção de navegação que leva às páginas de nível superior do site, encontrada em todas as páginas, é chamada de navegação global. A navegação global pode ser exibida de várias maneiras diferentes, incluindo barras de navegação, menus suspensos e menus suspensos. O mesmo site pode exibir a navegação global de maneira diferente, dependendo do tamanho da janela de visualização.

Sempre garanta que os usuários possam navegar para qualquer página do seu site com o menor número de cliques. Ao mesmo tempo, garanta que a navegação é intuitiva e não cansativa. Dito isso, não há requisitos específicos para elementos de navegação. MachineLearningWorkshop.com, ser um site de página única, tem uma barra de navegação local no canto superior direito; é aí que os sites de várias páginas geralmente colocam sua navegação global.

Se você estiver vendo esta página em web.dev, poderá encontrar alguns recursos de navegação. Há uma navegação estrutural acima do título, na opção "nesta página" sumário após o título e um guia "Aprenda HTML" índice que, dependendo da largura da tela, é sempre exibido ou tornado visível com um clique de botão de menu. O primeiro elemento na página é um link oculto para #main, que permite pular a barra lateral e os links de navegação estrutural.

"Pular para o conteúdo" link

O primeiro elemento da página é um link interno:

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

que, quando clicado ou quando está em foco e o usuário pressiona Enter, rola a página e foca o conteúdo principal: um ponto de referência <main> com id de main:

<main id="main">

Talvez você nunca tenha visto o link neste site, mesmo que já tenha lido todas as seções anteriores. Ele só é exibido quando está em foco:

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. O link de salto está incluído para que, quando um usuário do teclado pressione tab no carregamento, ele pode pular rapidamente para o conteúdo principal do site, evitando a necessidade de percorrer links extensos. Nessa página, o link "skip" ignora a navegação da barra lateral de toda a seção e a navegação estrutural, que leva o usuário diretamente ao título da página.

A maioria dos designers não gosta da aparência de ter um link na parte superior da página. Não há problema em ocultar o link ao lembrar que, quando o link receber o foco, o que acontecerá quando um usuário de teclado navegar pelo link na página, o link deverá estar visível para todos os usuários. Oculte apenas o conteúdo no estado não focado e inativo usando um seletor semelhante a .visually-hidden:not(:focus):not(:active).

O texto do link diz "ir para o principal". Esse é o nome acessível do link. Este é um site técnico, e os usuários provavelmente sabem o que é "principal" significa. Como todo texto de link, o nome acessível deve indicar claramente para onde o link leva o usuário. O destino do link deve ser o início conteúdo principal da sua página. Para testar isso, quando a página for carregada, pressione Tab até chegar à seção "Ir para o principal" . Em seguida, pressione Enter para garantir que ele "pule" ao conteúdo principal.

Índice

O link "Pular para o conteúdo" rola o conteúdo principal para visualização. O primeiro elemento é o título <h1> com o título desta seção. Nesse caso, <h1>Marking up navigation</h1>. O título principal é seguido pelo slogan, uma breve descrição do conteúdo do . A navegação do sumário depende da largura do seu navegador.

.

Caso seu navegador tenha mais de 80em, o sumário vem antes do título na marcação e se parece com o seguinte: (os nomes das classes foram removidos para simplificar a marcação):

<nav aria-label="On this page">
  <div>On this page</div>
  <div>
    <ul>
      <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>
  </div>
</nav>

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

Incluir o atributo aria-label fornece uma breve descrição da finalidade da navegação. Nesse caso, como o valor do atributo é redundante texto visível na página, é preferível usar aria-labelledby para fazer referência ao texto visível.

Podemos mudar o <div> não semântico para um parágrafo <p> e adicionar um id para que ele possa ser referenciado. Em seguida, usamos aria-labelledby:

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

Além de reduzir a redundância, o texto visível é traduzido pelos serviços de tradução, enquanto os valores de atributo podem não ser. Quando possível, se houver um texto que forneça um rótulo adequado, dê preferência a ele em vez do texto do atributo.

Essa navegação é o sumário. Se você quiser usar a aria-label, forneça essa informação em vez de repetir texto visível:

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

Ao fornecer um nome acessível em um elemento, não inclua o nome do elemento. Os leitores de tela fornecem essas informações ao usuário. Por exemplo, ao usar o elemento <nav>, não inclua "navigation". essas informações são incluídas ao usar elementos semânticos.

Os links estão em uma lista não ordenada. Embora não precisem ser aninhados em uma lista, o uso de uma lista permite que usuários de leitores de tela saibam quantos itens de lista e, portanto, links são uma lista individual em uma 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>

Se o navegador tiver menos de 80 em largura, a seção "Nesta página" está abaixo do título e do slogan. Para isso, é preciso incluir dois componentes de navegação de sumário e ocultar um ou outro com CSS display: none; com base em uma consulta de mídia.

Incluir dois widgets idênticos para mostrar apenas um é um antipadrão. Os bytes extras são insignificantes. Ocultar conteúdo HTML de todos os usuários usando CSS display: none é apropriado. O problema é que, em telas amplas, o índice vem antes de #main. Em telas mais estreitas, o índice é aninhado em #main. O uso do teclado para pular para o conteúdo pula a tabela de em uma tela widescreen. Embora os usuários estejam acostumados com o conteúdo ser responsivo e a mudança de local quando trocam de dispositivo ou aumentam o tamanho da fonte, mas não esperam que a ordem da tabulação seja alterada quando isso acontece. Os layouts de página devem ser acessíveis, previsíveis e consistentes em um site. Aqui, a localização do índice não é previsível.

Navegação estrutural da página

A localização atual fornece navegação secundária para ajudar os usuários a entender em que parte de um site eles estão. Eles geralmente mostram a hierarquia do 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. Tudo bem. O usuário não precisa saber como você organiza seus arquivos, mas precisa ser capaz de navegar pelo seu conteúdo.

A localização atual ajuda os usuários a navegar e entender a organização do site, permitindo que eles naveguem rapidamente em qualquer lugar até qualquer ancestral. seções sem precisar percorrer cada página anterior visitada para chegar à página atual usando a funcionalidade back.

Se o site tiver uma estrutura de diretórios hierárquica simples, como é o caso do web.dev, a navegação da estrutura atual muitas vezes será composta de um link para a página inicial, ou nome do host, com um link para o arquivo de índice de cada diretório no nome do caminho do URL. A inclusão do elemento 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 localização atual mostram o caminho da página atual de volta à página inicial, mostrando cada nível intermediário.

Cada página do módulo de aprendizado HTML tem a mesma navegação estrutural, mostrando a hierarquia das lições HTML dentro do Seção learn de web.dev. O código é semelhante ao seguinte, com as classes e os detalhes do SVG removidos para maior clareza:

<nav aria-label="breadcrumbs">
  <ul role="list">
    <li>
      <a href="/">
        <svg aria-label="web.dev" role="img">
          <use href="#webDevLogo" />
        </svg>
      </a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
  </ul>
  <share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
    <svg aria-label="share" role="img">
      <use href="#shareIcon" />
    </svg>
    <span>Share</span>
  </share-action>
</nav>

Essa navegação estrutural segue as práticas recomendadas. Ele usa o elemento <nav>, um papel de ponto de referência, para que a tecnologia adaptativa apresente a navegação estrutural como um elemento de navegação na página. O nome acessível da “localização atual”, fornecido com o aria-label, o diferencia dos outros pontos de referência de navegação no documento atual.

Entre os links há separadores de conteúdo gerado pelo CSS. Os separadores vêm antes de cada item da lista que começa com a segunda <li>.

[aria-label^="breadcrumb" 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 "vão" o que é uma prática recomendada: os separadores entre os links de navegação estrutural devem ficar ocultos dos leitores de tela. Eles também precisam ter contraste suficiente com o plano de fundo, da mesma forma que o texto normal.

Esta versão usa uma lista não ordenada e itens de lista. Uma lista ordenada é preferível porque os itens da lista ordenada são enumerados. Além disso, é uma lista: role="list" foi adicionado novamente 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 conter "página inicial" em vez de ser o logotipo do site com o nome do site como o rótulo. Mas, como a localização atual fica na parte superior do documento e é a única ocorrência do logotipo na página, faz sentido de por que esse antipadrão foi usado.

O último elemento é um <share-action> personalizado. Os elementos personalizados são discutidos na seção 15. Embora esse elemento personalizado não fizer parte da navegação estrutural, incluir um elemento não relacionado em um <nav> não tem problema, desde que a inclusão seja consistente em todas as páginas.

Página atual

Nesta página, a página atual, "Navegação", não está incluída na localização atual. Quando a página atual é incluída em um navegação estrutural, o texto não deve ser um link, e aria-current="page" deve ser incluído item da lista. Quando não estiver incluído, é útil indicar que o título que se segue é a página atual com uma ícone ou outro símbolo.

Se o design mudar, uma versão alternativa da localização atual pode ser usada:

<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>

A navegação estrutural não se destina a etapas lineares. Por exemplo, uma lista do caminho que o usuário seguiu para chegar à página atual ou ao a lista de etapas seguidas até este ponto em um roteiro pode ser aninhada em um <nav>, mas não precisa ser marcada como uma navegação estrutural.

Navegação local

Há outro componente de navegação nesta página. Se você estiver usando uma tela widescreen, haverá uma barra lateral à esquerda com o ícone "Aprender HTML" logotipo, uma barra de pesquisa e links para cada uma das 20 seções em Aprenda HTML. Cada link contém o número do capítulo, o título da seção e uma marca de seleção à direita nas seções que você já visitou, possivelmente esta se você saiu da página e voltou. Os links para todas as seções do Aprenda HTML, junto com o cabeçalho de pesquisa e local, são a navegação para o local.

Se você estiver acessando o site em um tablet ou dispositivo móvel ou tiver uma tela mais estreita, ao carregar a página, a barra lateral ficará oculta. Você pode torná-lo visível usando o menu de navegação na barra de navegação superior. Sim, o cabeçalho é um elemento <web-header> personalizado com role="navigation" definido.

A principal diferença entre a navegação local permanente em telas amplas e a navegação local em telas mais estreitas que podem aparecer e desaparecer é a exibição do botão "Fechar" na versão, que pode ser ocultada. Este ícone está oculto em widescreen com display: none;.

O link para este documento, seção 010, tem uma aparência um pouco diferente dos outros links na navegação local para indicar aos usuários que enxergam que esta é a página atual. Essa diferença visual é criada com CSS. A página atual também é identificada com o atributo aria-current="page". Isso informa às tecnologias assistivas que é um link para a página atual. O HTML desse item de lista na navegação local é semelhante a:

<li>
  <a aria-current="page" href="/learn/html/navigation" data-complete="true">
    <span>010</span>
    <span>Navigation</span>
    <svg aria-label="Check" role="img">
      <use href="#checkmark" />
    </svg>
  </a>
</li>

Se esta não for a primeira vez que você visita esta página, a marca de seleção não estará visível. Se você já visitou esta página antes, o O atributo personalizado data-complete está definido como true, e a marca de seleção será exibida. A marca de seleção foi incluída em cada link, mas o CSS oculta a caixa de seleção dos usuários que nunca acessaram essa página com display: none devido à ausência do Atributo e valor data-complete="true":

.course .stack-nav a:not([data-complete="true"]) svg {
  display: none;
}

Quando display é definido como algo diferente de none, o role informa à tecnologia adaptativa que o SVG inline é uma imagem. e aria-label atua como o atributo alt em uma <img>.

Navegação global

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

A navegação global fornece um meio consistente de viajar para qualquer lugar no aplicativo ou site. O Google não tem disponibilidade no topo da página. Anúncio do Yahoo! faz. Embora todos os principais recursos do Yahoo! têm estilos diferentes, o conteúdo a maioria das seções são iguais.

O conteúdo dos cabeçalhos de navegação globais de notícias e esportes é o mesmo, mas o ícone que mostra que o usuário está no momento sobre esportes não tem contraste suficiente para ser acessível; mesmo para visitantes sem baixa visão. As duas seções têm um com uma navegação local específica da seção abaixo dela.

Assim como as navegações globais, os rodapés precisam ser idênticos em todas as páginas. Mas essa é a única semelhança. Navegação global permite a navegação por todas as partes do site a partir da perspectiva 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 e carreiras, e pode levar a links fontes, como ícones de redes sociais.

O rodapé desta página contém três elementos <nav> adicionais: a navegação de rodapé, desenvolvedores do Google e termos e políticas. e cada uma é um link. A navegação no rodapé inclui como contribuir com o web.dev no GitHub, outros conteúdos educacionais fornecidos pelo Google fora do web.dev e "como se conectar" externo links.

Essas três navegações no <footer> são elementos <nav>, com um aria-label que fornece um nome acessível para esses papéis de ponto de referência. Todas as navegações apresentadas foram links aninhados em lists em uma navegação. Abordamos tudo o que você precisa saber para criar suas próprias navegações. A seguir, analisaremos a marcação de tabelas de dados.

Teste seu conhecimento

Teste seus conhecimentos sobre navegação.