Tableless

Busca Menu

Entendendo o Outline do HTML

Seja o primeiro a comentar por

O Outline do documento HTML é a estrutura do documento que é gerada pelos títulos, títulos de formulários, títulos das tabelas e qualquer outro elemento que marque alguma seção de conteúdo no documento. Essas marcações de Outline podem ser usadas para várias iniciativas, por exemplo, um browser ou alguma outra interface possa criar uma Tabela de Conteúdo. Outras tecnologias assistivas podem usar também estas seções para formar a navegação, como em um leitor de tela, mas ou menos como acontece no WAI-ARIA, mas de maneira mais natural.

Os elementos de cabeçalho h1-h6, contribuem para o outline do documento HTML 5, criando uma estrutura hierárquica e definindo as seções da página. Os cabeçalhos são importantes para otimização de buscas e também para navegação em leitores de telas, já que usuários desses aparelhos navegam pelos títulos na página.

Nas versões HTML4 e XHTML tudo o que tinhamos para estruturar o outline eram as tags h1-h6. Tínhamos então o seguinte código:

<body>

  <h1>Midias reprodutiveis</h1>
  <h2>Disco</h2>
  <h2>Arquivo</h2>
  <h3>Video: Avi, Divx, Mp4, Xvid</h3>
  <h2>Disco USB de armazenamento</h2>

</body>

E sua saída era:

1. Midias reprodutiveis
  1. Disco
  2. Arquivo
    1. Video: AVI, DIVx, MP4, Xvid
  3. Disco USB de armazenamento

Browsers comuns não mostram o outline do documento portanto para visualiza-los é necessário usar uma ferramenta chamada HTML5 outliner(https://gsnedders.html5.org/outliner/). Mesmo que o nível dos cabeçalhos dos exemplos sejam diferentes, a saída como vimos é a mesma.

Pois bem, agora com o HTML5 temos novas formas de estruturar o documento. Temos os elementos de sectioning content — article, aside, nav e sections — que demarcam diferentes seções num documento e define o escopo para os elementos de cabeçalho (assim como o header e o footer).

Isso mudou o paradigma e agora podemos ter diversos elementos seccionados com sua própria hierarquia de h1-h6. Isso tem efeito no outline. Num documento onde temos:

<body>

   <h1>Midias reprodutiveis</h1>

   <section>
      <h1>Disco</h1>
   </section>

   <section>
      <h1>Arquivo</h1>
      <section><!-- essa é uma section de outra -->
      <h1>Video: Avi, Divx, Mp4, Xvid</h1>
      </section>
   </section>

   <section>
      <h1>Disco USB de armazenamento</h1>
   </section>
</body>

Temos esse outline:

1. Midias reprodutiveis
  1. Disco
  2. Arquivo
    1. Video: AVI, DIVx, MP4, Xvid
  3. Disco USB de armazenamento

Como pode ser observado cada section tem o seu h1, mas o outline não sofre alteração.

Mas e se o segundo exemplo não tivesse as sections? Então teriamos um resultado distinto:

 1. Midias reprodutiveis
 2. Disco
 3. Arquivo
 4. Video: AVI, DIVx, MP4, Xvid
 5. Disco USB de armazenamento

Dentre o primeiro e o segundo exemplo, claro que o segundo é mais válido por sua importância semântica.

Mas todas as sections tem as tags h1. Isso pode ser perigoso. Os leitores de tela não são atualizados no mesmo passo um do outro (assim como os browsers comuns). Sendo assim esse tipo de marcação pode impactar severamente, comprometendo a acessibilidade. Poderíamos usar o segundo exemplo e em alguns leitores de tela o resultado da saída ser o da ultima abordagem:

 1. Midias reprodutiveis
 2. Disco
 3. Arquivo
 4. Video: AVI, DIVx, MP4, Xvid
 5. Disco USB de armazenamento

Isso ocorre por quê esses leitores não distinguem a marcação dentro das tags section. Sendo assim o ideal seria usar as tags sections proporcionando uma melhor marcação, mas uma hierarquia de cabeçalhos semelhante a do HTML4.

Então fazemos assim:

<body>

   <h1>Midias reprodutiveis</h1>

   <section>  
     <h2>Disco</h2> 
   </section> 

   <section> 
     <h2>Arquivo</h2> 
     <section><!-- essa é uma section de outra --> 
       <h3>Video: Avi, Divx, Mp4, Xvid</h3> 
     </section> 
   </section> 

   <section> 
     <h2>Disco USB de armazenamento </h2> 
   </section> 

<body>

e a saída nos leitores de tela; atualizados ou não; será a mesma:

1. Midias reprodutiveis
  1. Disco
  2. Arquivo
    1. Video: AVI, DIVx, MP4, Xvid
  3. Disco USB de armazenamento

Assim preservamos a acessibilidade em leitores de tela atualizados ou não, privilegiando todos os usuários.

Bruce Lawson – Headings in HTML 5 and accessibility

Publicado no dia