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 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 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 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.

Use o Lighthouse para verificar se a página pula algum nível de título. Execute a auditoria de acessibilidade (Lighthouse > Opções > Acessibilidade) e procure os resultados da auditoria Os níveis de título não são ignorados.

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 marco para verificar 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. Por ser o primeiro elemento do DOM, é necessária apenas uma ação da tecnologia adaptativa para focá-lo 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. Tente acessá-los e pressionar 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 cabeçalho, link de salto ou região de pontos de referência.