Você aprendeu anteriormente sobre a estrutura adequada dos níveis de título. Agora, você vai aprender como uma boa estrutura de títulos afeta a acessibilidade. O uso adequado de títulos cria uma hierarquia visual para os usuários navegarem e entenderem sua página web. Usar uma hierarquia lógica de títulos permite que usuários de leitores de tela compreendam a estrutura do seu conteúdo e naveguem rapidamente pelo seu conteúdo. Criar um texto de cabeçalho apropriado que descreva com precisão o conteúdo que segue ajuda todos a encontrar as informações de que precisam no seu site. Como benefício adicional, títulos bem estruturados também podem melhorar o SEO do seu site. Aqui está um exemplo básico:

<h1> Music Store Page</h1>

<h2>Featured Albums</h2>
<p>Check out our featured albums below:</p>

Pense nos títulos como a base do seu site. Sem uma boa base, a acessibilidade do seu conteúdo sofrerá. Vamos ver como você pode tornar seus projetos web acessíveis para pessoas que usam tecnologias assistivas usando corretamente os títulos. Cabeçalhos, que vão de h1 a h6, criam uma estrutura de navegação para usuários de leitores de tela. Leitores de tela podem listar todos os títulos em uma página, permitindo que os usuários pulem diretamente para as seções de que precisam. Portanto, organizar corretamente os títulos é importante para ajudar esses usuários a evitar conteúdo desnecessário e encontrar rapidamente as informações que estão procurando.

<h1>I am an h1 heading</h1>
<h2>I am an h2 heading</h2>
<h3>I am an h3 heading</h3>
<h4>I am an h4 heading</h4>
<h5>I am an h5 heading</h5>
<h6>I am an h6 heading</h6>

Pessoas com visão parcial ou deficiências cognitivas precisam processar informações rápida e facilmente para reduzir a carga cognitiva. Embora o arranjo adequado dos títulos seja importante, também é necessário tornar os textos dos títulos claros e descritivos. Aqui estão algumas práticas essenciais a seguir para usar corretamente os títulos:

• Use títulos em uma hierarquia que reflita uma organização clara. Por exemplo, o título da página deve ser um h1, as seções principais devem ser introduzidas com títulos h2, subseções com h3 e assim por diante, até h6.
• Não pule de h1 para h3, ou de h2 para h4 e assim por diante.
• Use texto claro e descritivo que resuma o conteúdo que segue cada título.
• Não use um título isolado – algum conteúdo deve seguir o título.
• Use títulos apropriados onde necessário em vez de formatar o texto para parecer títulos.
• Cada página deve ter um único elemento h1 representando o tópico principal ou título.

Aqui está uma marcação básica que representa como você deve usar os títulos em uma página:

<!-- Page title -->
<h1>What is HTML</h1>

<!-- First section -->
<section>
  <h2>Introduction to HTML</h2>
  <p>
    HTML stands for HyperText Markup Language. It is the standard language for
    creating web pages.
  </p>
</section>
<!-- Second section -->
<section>
  <h2>History of HTML</h2>
  <p>HTML began to take shape in the early 90s</p>
  <h3>Origins</h3>
  <p>
    HTML was created by Tim Berners-Lee in 1991. It has evolved significantly
    over the years.
  </p>
</section>