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ê vai aprender a agrupar listas de
links para criar a navegação.
Há vários tipos de navegação e várias maneiras de exibi-los. As âncoras nomeadas no texto com links para outras páginas no mesmo site são consideradas navegação local. A navegação local, que consiste em uma série de links que mostram 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. 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 de sitemap. 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.
Assegure-se de que os usuários possam navegar para qualquer página do seu site com o menor número de cliques e de que a navegação seja intuitiva e não exagerada. Dito isso, não há requisitos específicos para elementos de navegação. O MachineLearningWorkshop.com, sendo um site de uma única página, tem uma barra de navegação local no canto superior direito. É nesse local que os sites com várias páginas geralmente colocam a navegação global.
Se você estiver vendo esta página no web.dev, poderá identificar alguns recursos de navegação. Há uma localização atual acima do título, um índice "Nesta página" após o título e um índice "Aprender HTML" que, dependendo da largura da tela, é sempre exibido ou tornado visível com um clique de um botão de menu. O primeiro elemento na página é um link oculto para #main, que permite ignorar os links da barra lateral e da localização atual.
Link "Pular para o conteúdo"
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 tem foco e o usuário clica em Enter, rola a página e foca no conteúdo principal:
um ponto de referência <main> com um 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. Ela só é exibida 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 para pular é incluído. Assim, quando um usuário do teclado pressionar tab no carregamento, ele poderá pular rapidamente para o conteúdo principal do site, evitando a necessidade de percorrer longas vinculações. Nessa página, o link de pular ignora a navegação da barra lateral e a navegação estrutural em toda a seção, levando 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 da visualização, mas lembre-se de que, quando o link recebe foco, o que acontece quando um usuário do teclado toca pelo link na página, o link precisa estar visível para todos.
Ocultar conteúdo apenas no estado sem foco e inativo usando um seletor semelhante a .visually-hidden:not(:focus):not(:active).
O texto do link diz “ir para a página principal”. Este é o nome acessível do link. Este é um site técnico, e os usuários provavelmente sabem o que significa "principal".
Como qualquer texto de link, o nome acessível deve indicar claramente para onde o link levará o usuário. O destino do link precisa ser o início do
conteúdo principal da página. Para testar isso, quando a página for carregada, use a tecla Tab para acessar o link "Pular para a página principal". Em seguida, pressione Enter para garantir que ele vá para o conteúdo principal.
Índice
O link "Pular para o conteúdo" rola o conteúdo principal até que ele fique visível. O primeiro elemento é o cabeçalho <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 deste tutorial. A largura do seu navegador determina se a navegação do sumário vem antes ou depois do título na base do código.
Se o navegador tiver mais de 80 em, o sumário vem antes do título na marcação e será semelhante ao 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 a ser usado para seções de navegação. 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.
Incluir o atributo aria-label
fornece uma breve descrição do propósito da navegação. Nesse caso, como o valor do atributo é redundante em relação ao
texto mostrado na página, é preferível usar aria-labelledby
para referenciar o texto visível.
Podemos mudar a <div> não semântica para um parágrafo <p> e, em seguida, 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, ao contrário dos valores de atributos. Quando possível, se houver texto que forneça uma etiqueta adequada, dê preferência a esse atributo em vez do texto dos atributos.
Essa navegação é o índice. Se você quiser usar a aria-label, forneça essa informação em vez de repetir o 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 dele. Os leitores de tela fornecem essas informações ao usuário.
Por exemplo, ao usar o elemento <nav>, não inclua "navigation". Essa informação é incluída ao usar elementos semânticos.
Os próprios links estão em uma lista não ordenada. Embora 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 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 de largura, o widget "Nesta página" ficará abaixo do título e do slogan. Isso é feito incluindo
dois componentes de navegação de índice e ocultando um ou o 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. É recomendável ocultar o conteúdo HTML de
todos os usuários usando CSS display: none. O problema é que, em telas grandes, o índice vem antes de #main.
Em telas mais estreitas, o índice é aninhado em #main. Usar o teclado para pular para o conteúdo pula sobre o índice
em uma tela widescreen. Embora os usuários estejam acostumados com o conteúdo responsivo e a mudança de local quando mudam de dispositivo ou
aumentam o tamanho da fonte, eles não esperam que a ordem da guia seja alterada ao fazer isso. Os layouts de página precisam ser acessíveis, previsíveis
e consistentes em todo o site. Aqui, o local do sumário não é previsível.
Navegação estrutural das páginas
A navegação estrutural oferece uma navegação secundária para ajudar os usuários a entender em que parte de um site eles estão. Elas 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, da perspectiva do usuário, pode ser diferente da estrutura de arquivos no servidor. Tudo bem. O usuário não precisa saber como você organiza os arquivos, mas precisa conseguir navegar pelo conteúdo.
A navegação estrutural ajuda os usuários a navegar e entender a organização do site. Assim, eles podem navegar rapidamente para qualquer seção ancestral sem precisar percorrer cada página visitada anteriormente para chegar à página atual usando a funcionalidade back.
Se o site tiver uma estrutura hierárquica de diretórios simples, como é o caso do web.dev, a navegação estrutural geralmente 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 da 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 entre a página atual e a página inicial, mostrando cada nível intermediário.
Todas as páginas do módulo "Learn HTML" têm a mesma navegação estrutural, exibindo a hierarquia das lições HTML na
seção learn do web.dev. O código é semelhante ao mostrado abaixo, com classes e detalhes de 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>, uma função de ponto de referência, para que a tecnologia assistiva apresente a navegação estrutural como um elemento de navegação na página.
O nome acessível da "navegação estrutural", 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 por CSS. Os separadores vêm antes de cada item da lista, começando na 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 os "verão", o que é uma prática recomendada: os separadores entre os links de navegação estrutural devem ficar ocultos nos leitores de tela. Eles também precisam ter contraste suficiente com o plano de fundo, assim como acontece com textos comuns.
Esta versão usa uma lista não ordenada e itens de lista. É preferível usar uma lista ordenada do que os itens ordenados.
Também é 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 na localização atual precisa ser "página inicial" em vez de ser o logotipo do site com o nome do site como o rótulo. No entanto, como a navegação estrutural está na parte superior do documento e é a única ocorrência do logotipo na página, faz sentido por que esse antipadrão foi usado.
O último elemento é um elemento <share-action> personalizado. Os elementos personalizados são discutidos na seção 15. Embora esse elemento personalizado
não faça parte da localização atual, não há problema em incluir um elemento não relacionado em um <nav>, 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 na navegação estrutural, preferencialmente o texto não pode ser um link, e aria-current="page" precisa ser incluído no item da lista da página atual. Quando ele não estiver incluído, é útil indicar que o título a seguir é a página atual com um ícone ou outro símbolo.
Se o design mudar, uma versão alternativa da navegação estrutural poderá 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 localização atual não é para etapas lineares. Por exemplo, uma lista do caminho que o usuário seguiu para chegar à página atual ou a
lista de etapas seguidas até este ponto em uma receita pode ser aninhada em um <nav>, mas não pode ser rotulada como uma navegação estrutural.
Navegação local
Há outro componente de navegação nesta página. Se você estiver em uma tela grande, há uma barra lateral à esquerda com o logotipo "Aprenda HTML", uma barra de pesquisa e links para cada uma das 20 seções do curso "Aprender 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ê já tiver saído da página e retornado. Os links para todas as seções em "Aprender HTML", junto com a pesquisa e o cabeçalho local, são a navegação do local.
Se você estiver acessando este site em um tablet ou dispositivo móvel, ou tiver uma tela mais estreita, ao carregar esta página, a barra lateral vai ficar oculta. É possível torná-lo visível pelo 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 grandes 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. Esse ícone fica oculto em telas grandes 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 a usuários com visão de que esta é a página atual. Essa diferença visual é criada com o CSS. A página atual também é identificada pelo atributo aria-current="page". Isso informa às tecnologias adaptativas que é um link para a página atual. O HTML desse item de lista nessa 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ê acessa esta página, a marca de verificação não estará visível. Se você já visitou esta página anteriormente, o
atributo personalizado data-complete será definido como true, e a marca de seleção será exibida. A marca de seleção é incluída
em cada link, mas o CSS oculta a caixa de seleção dos usuários que nunca acessaram essa página antes com display: none com base na 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 o aria-label atua como o atributo alt em um <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 de guias que abrem listas aninhadas de links com links para todas as subseções de um site ou outros menus.
Ela pode incluir seções de títulos, botões e widgets de pesquisa. Os recursos a mais 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 as páginas, com aria-current="page" em todos os links para a página atual.
A navegação global oferece um meio consistente de se deslocar para qualquer lugar no aplicativo ou site. o Google não tem a navegação global na parte de cima da página. O Yahoo! faz. 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 globais de notícias e esportes é o mesmo, mas o ícone que mostra que o usuário está praticando esportes no momento não tem contraste suficiente para ser acessível, mesmo para visitantes que não têm baixa visão. As duas seções têm uma navegação global com uma navegação local específica da seção abaixo delas.
Assim como as navegações globais, os rodapés precisam ser idênticos em todas as páginas. Mas essa é a única semelhança. A navegação global permite navegar para todas as partes do site a partir de uma perspectiva do produto. Os elementos de navegação no 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 fontes externas, como ícones de redes sociais.
O rodapé desta página contém três outros elementos <nav>: a navegação de rodapé, os desenvolvedores do Google e os termos e políticas, sendo que cada um é um link. A navegação de rodapé inclui como contribuir para o web.dev no GitHub, outros conteúdos educacionais fornecidos pelo
Google fora do web.dev e links externos de "como se conectar".
Essas três navegações no <footer> são elementos <nav> com um aria-label que fornece um nome acessível para essas funções de ponto de referência.
Todas as navegações que vimos foram links aninhados em listas em uma navegação. Cobrimos tudo o que você precisa saber para criar suas próprias navegações.
A seguir, veremos a marcação das tabelas de dados.
Teste seu conhecimento
Teste seus conhecimentos sobre navegação.
Qual elemento é usado para marcar a navegação principal de um site?
<navigation><breadcrumb><nav>Pode haver vários elementos de navegação em uma página?