Os leitores de tela têm comandos para pular rapidamente entre títulos ou para regiões de referência específicas. Na verdade, uma pesquisa com usuários de leitores de tela descobriu que eles costumam navegar em uma página desconhecida explorando os cabeçalhos.
Ao usar elementos de cabeçalho e marcos corretos, você pode melhorar muito a experiência de navegação no seu site para usuários de tecnologias adaptativas.
Use cabeçalhos para criar um esboço da página
Use elementos h1-h6 para criar um esboço estrutural da sua página. O objetivo é criar um esqueleto ou um modelo da página para que qualquer pessoa que navegue pelos títulos possa formar uma imagem mental.
É comum usar um único h1 para o título principal ou o logotipo em uma página, elementos h2 para designar seções principais e elementos h3 em subseções de suporte:
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
Não pular níveis de título
Os desenvolvedores costumam pular níveis de cabeçalho para usar os estilos padrão do navegador que correspondem ao design. Isso é considerado um antipadrão porque viola o modelo de contorno.
Em vez de depender do dimensionamento de fonte padrão do navegador para títulos, use seu próprio CSS e não pule níveis.
Por exemplo, este site tem uma seção chamada "NAS NOTÍCIAS", seguida por duas manchetes:
O cabeçalho da seção, "NAS NOTÍCIAS", pode ser um h2, e os títulos
de apoio podem ser elementos h3.
Como o font-size de "NAS NOTÍCIAS" é menor que o título, pode ser tentador fazer com que o título da primeira matéria seja um h2 e "NAS NOTÍCIAS" seja um h3. Embora isso possa corresponder ao estilo padrão do navegador,
ele quebraria o contorno transmitido a um usuário de leitor de tela.
Embora possa parecer contraditório, não importa se visualmente os elementos h3 e h4 são maiores do que os equivalentes h2 ou h1.
O que importa é o contorno transmitido pelos elementos e a ordem deles.
Use o Lighthouse para verificar se a página pula algum nível de cabeçalho. Execute a auditoria de acessibilidade (Lighthouse > Opções > Acessibilidade) e procure os resultados da auditoria Os cabeçalhos não pulam níveis.
Usar pontos de referência para ajudar na navegação
Elementos HTML5, como main, nav e aside, funcionam como pontos de referência ou
regiões especiais na página para as quais um leitor de tela pode pular.
Use tags de ponto de referência para definir as principais seções da página, em vez de depender de
divs. Tenha cuidado para não exagerar, porque ter muitos pontos de referência pode ser
cansativo. Por exemplo, use apenas um elemento main em vez de três ou quatro.
O Lighthouse recomenda auditar manualmente seu site para verificar se "elementos de referência HTML5 são usados para melhorar a navegação". Use esta lista de elementos de referência para verificar sua página.
Evitar conteúdo repetitivo com links para pular
Muitos sites têm navegação repetitiva nos cabeçalhos, o que pode ser irritante para navegar com tecnologia adaptativa. Use um link de salto para permitir que os usuários ignorem esse conteúdo.
Um link de navegação rápida é uma âncora fora da tela que é sempre o primeiro item focalizável no DOM. Normalmente, ele contém um link in-page para o conteúdo principal da página. Como é o primeiro elemento no DOM, basta uma única ação da tecnologia assistiva para focar e ignorar a navegação repetitiva.
<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
[Main content]
</main>
/* style.css */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000000;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
Muitos sites conhecidos, como GitHub, The NY
Times e Wikipedia, contêm links de
pular. Acesse os sites e pressione a tecla TAB no teclado algumas vezes.
O Lighthouse pode ajudar você a verificar se a página tem um link de pular. Execute a auditoria de acessibilidade novamente e procure os resultados da auditoria A página contém um cabeçalho, um link de salto ou uma região de ponto de referência.