key tkeaways

• O elemento HTML5 NAV, que representa um grupo de links de navegação, é uma ferramenta importante para aprimorar a acessibilidade do site, pois permite que os leitores da tela pulem a navegação do site, melhorando a experiência do usuário para pessoas com deficiências visuais.
• O elemento NAV pode ser usado várias vezes em uma única página, para barras de navegação primária e links secundários e, embora não seja obrigatório para todos os links de navegação, ele é recomendado para os principais blocos de navegação para melhorar a acessibilidade do site e SEO.
• Embora os leitores atuais da tela possam não reconhecer o elemento NAV, seu uso é incentivado à medida que a tecnologia assistiva continua a evoluir, garantindo que os sites permaneçam acessíveis no futuro.
É seguro assumir que esse elemento aparecerá em praticamente todos os projetos. O NAV representa exatamente o que implica: um grupo de links de navegação. Embora o uso mais comum para o NAV seja para envolver uma lista não ordenada de links, existem outras opções. Você também pode envolver o elemento NAV em torno de um parágrafo de texto que continha os principais links de navegação para uma página ou seção de uma página. Em ambos os casos, o elemento NAV deve ser reservado para navegação que seja de importância primordial. Portanto, é recomendável que você evite usar o NAV para uma breve lista de links em um rodapé, por exemplo.

Nav e Acessibilidade

Um padrão de design que você pode ter visto implementado em muitos sites é o link "Skip Navigation". A idéia é permitir que os usuários dos leitores de tela passem rapidamente a navegação principal do seu site, se eles já o ouviram - depois de tudo, não faz sentido ouvir o menu de navegação inteiro de um grande site toda vez que você clicar em uma nova página! O elemento NAV tem o potencial de eliminar essa necessidade; Se um leitor de tela vê um NAV Elemento, pode permitir que seus usuários pularem a navegação sem exigir um link adicional. A especificação declara: Agentes de usuários (como leitores de tela) direcionados a usuários que podem se beneficiar com as informações de navegação omitidas na renderização inicial ou que podem se beneficiar com as informações de navegação disponíveis imediatamente, podem usar esse elemento como uma maneira de determinar qual conteúdo na página para pular e/ou fornecer inicialmente mediante solicitação. Os leitores atuais de tela não conseguem reconhecer o NAV, mas isso não significa que você não deve usá -lo. A tecnologia assistiva continuará evoluindo, e é provável que sua página esteja na web no futuro. Ao construir para os padrões agora, você garante que, à medida que os leitores da tela melhorem, sua página se tornará mais acessível ao longo do tempo.

O que é um agente do usuário?

Você encontrará muito o termo agente do usuário ao navegar através de especificações. Realmente, é apenas um termo sofisticado para um navegador - um "agente" de software que um usuário emprega para acessar o conteúdo de uma página. O motivo pelo qual as especificações não dizem simplesmente "navegador" é que os agentes de usuários podem incluir leitores de tela ou quaisquer outros meios tecnológicos para ler uma página da web. Você pode usar o NAV mais de uma vez em uma determinada página. Se você tiver uma barra de navegação primária para o site, isso exigiria um elemento NAV. Além disso, se você tivesse um conjunto secundário de links apontando para diferentes partes da página atual (usando âncoras na página), isso também poderá ser embrulhado em um elemento NAV. Como na seção, houve algum debate sobre o que constitui o uso aceitável do NAV e por que não é recomendado em algumas circunstâncias (como dentro de um rodapé). Alguns desenvolvedores acreditam que esse elemento é apropriado para links de paginação ou pavimentação ou para um formulário de pesquisa que constitui um meio primário de navegar em um site (como é o caso no Google). Esta decisão será com você, o desenvolvedor. Ian Hickson, o editor principal da especificação HTML5 da Whatwg, respondeu diretamente à pergunta: "Use [ela] sempre que você tivesse usado o Class = NAV". [Veja o comentário]

Este é um trecho de html5 & css3 para o mundo real, por Alexis Goldstein, Louis Lazaris e Estelle Weyl. procurando mais tutoriais?

Se você deseja saber mais sobre o elemento HTML5 NAV, o SitePoint possui uma grande variedade de tutoriais on -line nos menus HTML5 NAV. Construindo uma barra de navegação interativa de Laura Athanasiou “Uma estrutura de navegação direta pode aumentar a usabilidade do seu site e facilitar a localização de informações. Ao usar HTML e CSS básicos, você pode construir uma barra de navegação horizontal que forneça interação quando um usuário passar por um link de navegação.” Criando um menu de navegação suspensa animado no HTML5/CSS3 e WebKit de Jean-Pierre Gassin “Este é um tutorial para iniciantes e intermediários HTML5 e CSS3 desenvolvedores que desejam criar um menu suspenso. Crie um site responsivo e amigável para dispositivos móveis a partir do zero: HTML semântico de Annarita Tranfici "em primeiro lugar, vamos criar um menu clássico. Nesse caso, o elemento mais adequado para o nosso propósito é o elemento NAV, que é um elemento semântico usado para declarar uma seção de navegação de um site". A navegação deve ser definida em listas? Por Craig Buckler "A pergunta: os elementos da lista são necessários?" Como construir um menu deslizante CSS3 de Craig Buckler "Neste artigo, criaremos um menu deslizante usando CSS sozinho. Se você estiver usando um navegador moderno, ele também mostrará um lindo efeito de página 3D".

perguntas frequentes sobre o elemento HTML5 NAV

Qual é o objetivo do elemento HTML5 NAV?

O elemento HTML5 NAV é usado para definir uma seção de uma página que contém links de navegação. Esses links podem ser internos, levando a diferentes seções da mesma página ou externo, levando a diferentes páginas. O elemento NAV ajuda a melhorar a acessibilidade do seu site, facilitando a navegação pelos usuários pelo seu conteúdo. Por exemplo:

Seção 1

seção 2

Este código criará uma barra de navegação com links para a seção 1 e seção 2 de sua página. Page?