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