Elementos de ponto de referência HTML5 são usados para melhorar a navegação.

Elementos HTML5, como main, nav e aside, funcionam como pontos de referência ou regiões especiais na página para onde os leitores de tela e outras tecnologias adaptativas podem acessar. Ao usar elementos de ponto de referência, você pode melhorar significativamente a experiência de navegação dos usuários de tecnologia adaptativa no seu site. Saiba mais nos Pontos de referência ARIA e HTML 5 da Universidade Deque.

Como verificar pontos de referência manualmente

Use a lista de elementos de ponto de referência do W3C (link em inglês) para verificar se cada seção principal da página está contida por um elemento. Exemplo:

<header>
  <p>Put product name and logo here</p>
</header>
<nav>
  <ul>
    <li>Put navigation here</li>
  </ul>
</nav>
<main>
  <p>Put main content here</p>
</main>
<footer>
  <p>Put copyright info, supplemental links, etc. here</p>
</footer>

Você também pode usar ferramentas como a extensão Accessibility Insights da Microsoft para visualizar a estrutura da página e capturar seções que não estão contidas em pontos de referência:

Captura de tela do web.dev com pontos de referência destacados pela extensão Accessibility Insights

Como usar pontos de referência de forma eficaz

  • Use elementos de ponto de referência para definir as principais seções da página em vez de depender de elementos genéricos, como <div> ou <span>.
  • Use pontos de referência para transmitir a estrutura da sua página. Por exemplo, o elemento <main> precisa incluir todo o conteúdo diretamente relacionado à ideia principal da página. Portanto, deve haver apenas um por página. Consulte o resumo do MDN sobre elementos de seção de conteúdo para saber como usar cada ponto de referência.
  • Use pontos de referência com cautela. Ter muitos pontos de referência pode tornar a navegação mais difícil para os usuários de tecnologia adaptativa, porque impede que eles pulem para um conteúdo desejado com facilidade.

Consulte a postagem Títulos e pontos de referência para mais informações.

Recursos