Elementos HTML5, como main, nav e aside, funcionam como pontos de referência,
ou regiões especiais na página para as quais
leitores de tela e outras tecnologias assistivas podem pular.
Ao usar elementos de ponto de referência,
você pode melhorar drasticamente a experiência de navegação no seu site
para usuários de tecnologia assistiva.
Saiba mais na publicação da Universidade Deque
HTML 5 e marcos ARIA.
Como verificar pontos de referência manualmente
Use a lista de elementos de referência do W3C. para verificar se cada seção principal da sua página está contida por um elemento de ponto de referência. 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 o Extensão Insights de acessibilidade para visualizar a estrutura da sua página e capturar seções que não estão contidas em pontos de referência:
Como usar pontos de referência de forma eficaz
- Use elementos de ponto de referência para definir as principais seções da sua 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, então deve haver apenas um por página. Consulte o resumo do MDN sobre elementos de seção de conteúdo para aprender a usar cada ponto de referência. - Use pontos de referência com cuidado. Ter muitos pontos de referência pode realmente tornam a navegação mais difícil para usuários de tecnologias assistivas porque isso impede que eles pulem facilmente para um conteúdo desejado.
Consulte a postagem Títulos e pontos de referência para mais informações.