HTML e XHTML.
Esta técnica está relacionada com:
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.
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:
indicar o início do conteúdo principal,
marcar cabeçalhos de secção na área do conteúdo principal,
demarcar secções de navegação diferentes, tais como a navegação superior ou principal, a navegação à esquerda ou secundária e a navegação no rodapé,
marcar imagens (com texto) que tenham o aspecto visual de cabeçalhos.
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.
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 ...
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... -->
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>
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
Para todo o conteúdo que esteja dividido em secções separadas:
Verifique se cada secção começa com um cabeçalho.
O passo 1 é verdadeiro.