Títulos e pontos de referência

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 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 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 cabeçalhos 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:

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

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 criar o título da primeira história como h2 e "IN THE NEWS" como h3. Embora isso possa corresponder ao estilo padrão do navegador, ele quebraria o contorno 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 marco do HTML5 são usados para melhorar a navegação". Use esta lista de elementos de referência para conferir sua página.

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.