Técnicas para as WCAG 2.0

Ir para o conteúdo (Pressione a tecla Enter)

-

H69: Fornecer elementos heading no início de cada secção de conteúdo

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

O JAWS e o WindowEyes fornecem navegação através de cabeçalhos e fornecem informações sobre o nível do cabeçalho. O browser Opera fornece um mecanismo para navegar através de cabeçalhos. Os plug-ins adicionais suportam a navegação através de cabeçalhos noutros agentes de utilizador.

Descrição

O objectivo desta técnica é utilizar cabeçalhos de secção para transmitir a estrutura do conteúdo. A marcação de cabeçalhos pode ser utilizada para:

Em algumas tecnologias, os cabeçalhos são concebidos para transmitir uma hierarquia lógica. Ignorar níveis na sequência de cabeçalhos pode criar a ideia de que a estrutura do documento não foi correctamente concebida, ou que foram escolhidos cabeçalhos específicos pela sua apresentação visual e não pelo seu significado. É recomendado aos autores que encaixem os cabeçalhos de forma hierárquica.

Uma vez que os cabeçalhos indicam o início de secções importantes do conteúdo, os utilizadores com tecnologias de apoio podem avançar directamente para o cabeçalho apropriado e começar a ler o conteúdo. Isto acelera significativamente a interacção para os utilizadores que, de outra forma, iriam aceder lentamente ao conteúdo.

Nas tecnologias que suportam o CSS (Folhas de Estilo em Cascata), o estilo pode ser utilizado para alterar o aspecto dos cabeçalhos. Até é possível conceber cabeçalhos utilizando o CSS, de modo a ficarem expostos para a tecnologia de apoio, mas ocultos à vista normal. Contudo, mostrar os cabeçalhos visualmente beneficia um conjunto mais vasto de utilizadores, incluindo os que têm algumas incapacidades cognitivas.

Exemplos

Exemplo 1

Este exemplo organiza as secções de uma página de procura, assinalando cada cabeçalho de secção utilizando os elementos h2 .

Código Exemplo:

<h1>Search Technical Periodicals</h1>
 <h2>Search</h2>
 <form action="search.php">
  <p><label for="searchInput">Enter search topic: </label>
  <input type="text" size="30" id="searchInput">
  <input type="submit" value="Go"></p>
 </form>
 <h2>Available Periodicals</h2>
 <div class="jlinks">
  <a href="pcoder.com">Professional Coder</a> |
  <a href="algo.com">Algorithms</a> |
  <a href="jse.com">Journal of Software Engineering</a>
 </div>
 <h2>Search Results</h2>
 ... search results are returned in this section ... 

Exemplo 2: Cabeçalhos que mostram toda a organização do conteúdo

Neste exemplo, a marcação de cabeçalhos é utilizada para tornar as secções de navegação e de conteúdo principal perceptíveis.

Código Exemplo:

<!-- Logo, banner graphic, search form, etc.  -->
  <h2>Navigation</h2>
    <ul>
      <li><a href="about.htm">About us</a></li>
      <li><a href="contact.htm">Contact us</a></li>
       ...
    </ul>
  <h2>All about headings</h2>
   <!-- Text, images, other material making up the main content... --> 

Exemplo 3: Cabeçalhos que mostram a organização do conteúdo no conteúdo principal

Tenha em atenção que em HTML 4.01 e em XHTML 1.x, os elementos heading só assinalam o início das secções; não as incluem como conteúdo do elemento.

Código Exemplo:

                                       <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Cooking techniques</title>  
  </head>   
  <body>     
    <h1>Cooking techniques</h1>     
    <p>       
      ... some text here ...     
    </p>           
    <h2>Cooking with oil</h2> 
    <p> 
        ... text of the section ...     
    </p>           
    <h2>Cooking with butter</h2>       
    <p>
        ... text of the section ...     
    </p>   
  </body> 
</html> 

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

Para todo o conteúdo que esteja dividido em secções separadas:

  1. Verifique se cada secção começa com um cabeçalho.

Resultados Esperados