Títulos e pontos de referência

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:

Um site de notícias com uma manchete, uma imagem principal e subseções.

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.

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.