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 mostrou que eles geralmente navegam por uma página desconhecida explorando os cabeçalhos.
Ao usar os elementos de título e de ponto de referência corretos, você pode melhorar significativamente a experiência de navegação no seu site para usuários de tecnologias adaptativas.
Use títulos para descrever a página
Use elementos h1-h6 para criar um esboço estrutural para sua página. O objetivo é
criar um esqueleto ou estrutura da página para que qualquer pessoa que navegue pelos
títulos possa 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 de título
Os desenvolvedores costumam pular níveis de título para usar os estilos padrão do navegador que combinam com o design. Isso é considerado um antipadrão porque quebra o modelo de esboço.
Em vez de depender do tamanho 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 notícias:
O título da seção, "IN THE NEWS", pode ser um h2, e os títulos
de apoio podem ser elementos h3.
Como o font-size de "IN THE NEWS" é menor do que o título, pode ser
temporário fazer com que o título da primeira história seja um h2 e que
"IN THE NEWS" seja um h3. Embora isso possa corresponder ao estilo padrão do navegador,
ele quebraria o esboço transmitido a um usuário de leitor de tela.
Você pode usar o Lighthouse para verificar se a página está pulando níveis de título. Execute a auditoria de acessibilidade (Lighthouse > Opções > Acessibilidade) e procure 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 marcos, ou
regiões especiais na página para as quais um leitor de tela pode pular.
Use tags de marco 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
exagerado. Por exemplo, use apenas um elemento main em vez de três ou
quatro.
O Lighthouse recomenda a auditoria manual do seu site para verificar se os "elementos de referência HTML5 são usados para melhorar a navegação". Use esta lista de elementos de referência para conferir sua página.
Ignorar conteúdo repetitivo com links de pulo
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 pulo é uma âncora fora da tela que é sempre o primeiro item focalizável no DOM. Normalmente, ele contém um link na página para o conteúdo principal dela. Como é o primeiro elemento no DOM, ele precisa apenas de 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 o GitHub, o The NY
Times e a Wikipedia,
contêm links de pular. Acesse-as e pressione a tecla TAB no
teclado algumas vezes.
O Lighthouse pode ajudar você a verificar se a página contém um link de omissão. Execute a auditoria de acessibilidade novamente e procure os resultados da auditoria A página contém um título, um link de salto ou uma região de ponto de referência.