Os leitores de tela têm comandos para alternar rapidamente entre cabeçalhos ou regiões de pontos de referência específicas. Na verdade, uma pesquisa com usuários de leitores de tela descobriu que eles geralmente navegam por uma página desconhecida explorando os títulos.
Ao usar elementos corretos de título e ponto de referência, você pode melhorar drasticamente a experiência de navegação dos usuários de tecnologias adaptativas no seu site.
Usar cabeçalhos para delinear a página
Use elementos de h1 a h6 para criar um contorno estrutural da sua página. O objetivo é
criar um esqueleto ou scaffolding da página para que qualquer pessoa que navegue por
cabeçalhos possa formar uma imagem mental.
Uma prática comum é usar um único h1 para o título ou logotipo principal de uma página, elementos h2 para designar seções principais e elementos h3 nas subseções de suporte:
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
Não pule os níveis dos títulos
Os desenvolvedores geralmente pulam os níveis dos cabeçalhos para usar os estilos padrão do navegador que prontamente correspondem ao design deles. Isso é considerado um antipadrão porque quebra o modelo de contorno.
Em vez de depender do tamanho de fonte padrão do navegador para cabeçalhos, use seu próprio CSS e não pule níveis.
Por exemplo, este site tem uma seção chamada "NAS NOTÍCIAS", seguida de duas manchetes:
O título da seção "NAS NOTÍCIAS" pode ser um h2, e as manchetes
de suporte podem ser elementos h3.
Como o font-size de "IN THE NEWS" é menor que a manchete, pode ser
tentador transformar a manchete da primeira matéria em um h2 e transformar
"IN THE NEWS" em um h3. Embora isso corresponda ao estilo padrão do navegador,
isso corrompe o contorno transmitido para um usuário de leitor de tela.
Você pode usar o Lighthouse para verificar se a página pula níveis de cabeçalho. Execute a auditoria de acessibilidade (Lighthouse > Options > Accessibility) e procure os resultados da auditoria Títulos não pulam níveis.
Usar pontos de referência para auxiliar na navegação
Elementos HTML5, como main, nav e aside, funcionam como pontos de referência ou
regiões especiais na página para onde um leitor de tela pode acessar.
Use tags de pontos 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
sobrecarregado. Por exemplo, mantenha apenas um elemento main em vez de 3 ou
4.
O Lighthouse recomenda auditar manualmente seu site para verificar se "elementos de ponto de referência HTML5 são usados para melhorar a navegação". Use esta lista de elementos de ponto de referência para verificar sua página.
Ignorar conteúdo repetitivo com links de salto
Muitos sites apresentam navegação repetitiva nos cabeçalhos, o que pode ser chato para navegar com tecnologia adaptativa. Use um link de pular para permitir que os usuários ignorem esse conteúdo.
Um link de salto é 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 do DOM, basta uma única ação da tecnologia adaptativa 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 Wikipédia,
contêm links para pulo. Acesse-os e pressione a tecla TAB no
teclado algumas vezes.
O Lighthouse pode ajudar você a verificar se sua página contém um link de salto. Execute a auditoria de acessibilidade novamente e procure os resultados da auditoria A página contém um cabeçalho, link de salto ou região de ponto de referência.