Skip to content
Sobre Blog Aprender Explorar padrões Case studies
Nesta página
  • Use títulos para delinear a página
  • Não ignore níveis de títulos
  • Use pontos de referência para auxiliar a navegação
  • Ignore o conteúdo repetitivo com links para pular

Títulos e pontos de referência

Nov 18, 2018
Available in: English e Español
Appears in: Acessível a todos
Rob Dodson
Rob Dodson
TwitterGitHubGlitchHomepage
Nesta página
  • Use títulos para delinear a página
  • Não ignore níveis de títulos
  • Use pontos de referência para auxiliar a navegação
  • Ignore o conteúdo repetitivo com links para pular

Screen readers have commands to quickly jump between headings or to specific landmark regions. In fact, a survey of screen reader users found that they most often navigate an unfamiliar page by exploring the headings.

By using correct heading and landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technologies.

Use títulos para delinear a página #

Use os h1 - h6 para criar um esboço estrutural para sua página. O objetivo é criar um esqueleto ou estrutura da página de forma 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 principal ou logotipo em uma página, h2 s para designar as seções principais e h3 's nas subseções de apoio:

<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>

Não ignore níveis de títulos #

Os desenvolvedores costumam ignorar níveis de título para usar os estilos padrão do navegador que correspondem ao seu design. Isso é considerado um anti-padrão porque quebra o modelo de contorno.

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 manchetes:

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

O título da seção, "NAS NOTÍCIAS", pode ser h2, e as manchetes de apoio podem ser h3.

Como o font-size "NA NOTÍCIA" é menor do que o título, pode ser tentador transformar o título da primeira história em h2 e fazer "NAS NOTÍCIAS" em h3. Embora isso possa corresponder ao estilo padrão do navegador, quebraria o contorno transmitido a um usuário de leitor de tela!

Embora possa parecer contra-intuitivo, não importa se visualmenteh3 's e h4 's são maiores do que seus equivalentes h2 ou h1 O que importa é o contorno transmitido pelos elementos e a ordenação dos elementos.

Você pode usar o Lighthouse para verificar se sua página pula algum nível de título. Execute a auditoria de acessibilidade (Lighthouse > Opções > Acessibilidade) e procure os resultados da auditoria de títulos não ignore níveis.

Use pontos de referência para auxiliar a navegação #

Os elementos HTML5, como main, nav e aside agem como pontos de referência ou regiões especiais na página para as quais um leitor de tela pode ignorar.

Use tags de pontos de referência para definir as seções principais de sua página, em vez de depender de divs. Tenha cuidado para não exagerar, pois ter muitos pontos de referência pode ser opressor. Por exemplo, concentre-se em apenas um main, em vez de 3 ou 4.

A Lighthouse recomenda auditar manualmente seu site para verificar se "os elementos de referência HTML5 são usados para melhorar a navegação". Você pode usar esta lista de elementos de referência para verificar sua página.

Ignore o conteúdo repetitivo com links para pular #

Muitos sites contêm navegação repetitiva em seus cabeçalhos, o que pode ser irritante para navegar com tecnologia de assistência. Use um link para ignorar para permitir que os usuários ignorem esse conteúdo.

Um link de pular é 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. Por ser o primeiro elemento no DOM, basta uma única ação da tecnologia assistiva para focalizá-lo e contornar 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;
}

Experimente

Exemplo de pular link ao vivo.

Muitos sites populares, como GitHub, The NY Times e Wikipédia, contêm links para ignorar. Experimente visitá-los e pressionar a TAB teclado algumas vezes.

O Lighthouse pode ajudá-lo a verificar se sua página contém um link para ignorar. Execute a auditoria de acessibilidade novamente e procure os resultados da auditoria A página contém um título, link para ignorar ou região de referência.

Tecnicamente, este teste também será aprovado se o seu site contiver qualquer h1 - h6 ou qualquer um dos elementos de referência HTML5. Mas embora o teste seja vago em seus requisitos, ainda é bom passá-lo, se você puder!
Last updated: Nov 18, 2018 — Improve article
Return to all articles
Compartilhar
assinar

Contribute

  • Registrar um bug
  • Visualizar código-fonte

Conteúdo relacionado

  • developer.chrome.com
  • Atualizações do Chrome
  • Estudos de caso
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos os produtos
  • Termos e privacidade
  • Diretrizes da comunidade

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.