Os leitores de tela têm comandos para pular rapidamente entre cabeçalhos ou acessar regiões de referência. Na verdade, uma pesquisa com usuários de leitores de tela descobriu que navega com mais frequência por uma página desconhecida explorando as e subtítulos.
Usando elementos de título e ponto de referência corretos, você pode drasticamente melhorar a experiência de navegação no seu site para usuários de tecnologias assistivas.
Usar títulos para delinear a página
Use elementos de h1-h6 para criar um contorno estrutural para sua página. O objetivo é
para criar um esqueleto ou estrutura para a página, de modo que qualquer pessoa que navegue
podem formar uma imagem mental.
Uma prática comum é usar um único h1 para o título ou logotipo principal 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 dos títulos
Os desenvolvedores geralmente pulam os níveis dos cabeçalhos para usar os estilos padrão do navegador que se assemelham muito ao design. Isso é considerado um antipadrão porque quebra o modelo Outline.
Em vez de depender do tamanho de fonte padrão do navegador para os títulos, use seu próprio CSS e não pule níveis.
Por exemplo, este site tem uma seção chamada "NOVIDADES", seguida por duas títulos:
O título da seção, "IN THE NEWS", pode ser h2, e os
os títulos podem ser elementos h3.
Porque o font-size para "IN THE NEWS" for menor que o título, pode
seja tentador transformar a manchete da primeira história em h2 e deixar
NAS NOTÍCIAS um h3. Embora isso corresponda ao estilo padrão do navegador,
isso corromperia o contorno transmitido a um usuário de leitor de tela!
Use o Lighthouse para verificar se a página pula algum nível de título. Execute o Auditoria de acessibilidade (Lighthouse > Opções > Acessibilidade) e aparência para os resultados da auditoria Os títulos 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.
regiões especiais na página para as quais um leitor de tela pode acessar.
Use tags de ponto de referência para definir as principais seções da página, em vez de depender
divs. Tenha cuidado para não exagerar, porque ter muitos pontos de referência pode ser
esmagadora. Por exemplo, mantenha apenas um elemento main em vez de três ou
4)
O Lighthouse recomenda auditar manualmente seu site para verificar se "Ponto de referência HTML5" são usados para melhorar a navegação." Você pode usar esta lista de pontos de referência elementos para verificar sua página.
Ignorar conteúdo repetitivo com links de salto
Muitos sites contêm navegação repetitiva nos cabeçalhos, o que pode ser irritante de navegar com tecnologia assistiva. Use um link 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 na ao DOM. Normalmente, ele contém um link in-page para o conteúdo principal. Porque ela é o primeiro elemento do DOM, basta uma única ação da tecnologia assistiva para se concentrar 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 populares, como GitHub, The NY
Times e Wikipédia
conter links de salto. Acesse-os e pressione a tecla TAB no seu
o teclado algumas vezes.
O Lighthouse pode ajudar você a verificar se a página tem um link de salto. Execute o faça a auditoria de acessibilidade novamente e procure os resultados do erro A página contém um cabeçalho, link de salto ou região de ponto de referência.