Técnicas para as WCAG 2.0

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

-

G115: Utilizar elementos semantic para marcar a estrutura

Aplicabilidade

Linguagens de marcação, incluindo HTML 4.01, XHTML 1.x

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é marcar a estrutura do conteúdo da Web utilizando os elementos semantic apropriados. Por outras palavras, os elementos são utilizados de acordo com o seu significado, não pelo seu aspecto visual.

A utilização dos elementos semantic apropriados irá garantir que a estrutura esteja disponível para o agente de utilizador. Isto implica indicar explicitamente o papel que diferentes unidades têm na compreensão do significado do conteúdo. A natureza de um bloco de conteúdo, tal como um parágrafo, um cabeçalho, texto realçado, uma tabela, etc. pode ser indicada desta forma. Em alguns casos, as relações entre unidades de conteúdo também devem ser indicadas, tal como entre cabeçalhos e subcabeçalhos, ou entre as células de uma tabela. O agente de utilizador pode assim tornar a estrutura perceptível ao utilizador, por exemplo, utilizando uma apresentação visual diferente para diferentes tipos de estruturas ou utilizando uma voz ou grau de inclinação diferentes numa apresentação em auditório.

Em HTML, por exemplo, os elementos ao nível da frase, tais como em, abbre cite adicionam informações de semântica nas orações, assinalando texto para realce e identificando abreviaturas e citações, respectivamente. MathML, uma linguagem de marcação concebida para manter distinções importantes entre a estrutura e a apresentação na matemática, inclui uma marcação de “apresentação” especial para as numerações complexas utilizadas para representar ideias matemáticas, bem como uma marcação de “conteúdo” (semântica) para as próprias ideias matemáticas.

Exemplos

Exemplo 1

Um parágrafo contém uma hiperligação para outra página. A hiperligação é marcada utilizando o elemento a .

Código Exemplo:

<p>Do you want to try our new tool yourself? A free 
demonstration version is available in our 
<a href="download.html">download section</a></p>

Exemplo 2

Uma página sobre a história do casamento utiliza uma citação do romance "Orgulho e Preconceito" de Jane Austen como exemplo. A referência ao livro é marcada utilizando o elemento cite e a própria citação é marcada utilizando o elemento blockquote .

Código Exemplo:

<p>Marriage was considered a logical step for a bachelor, 
as can be seen in the first chapter of the novel 
<cite>Pride and Prejudice</cite>:</p>
<blockquote>
     <p>It is a truth universally acknowledged, that a single man in
     possession of a good fortune, must be in want of a wife.</p>

     <p>However little known the feelings or views of such a man may
     be on his first entering a neighbourhood, this truth is so well
     fixed in the minds of the surrounding families, that he is considered
     the rightful property of some one or other of their daughters.</p>
</blockquote>

Exemplo 3

Um manual do automóvel explica como ligar o motor. As instruções incluem um aviso para se certificar de que o automóvel está em ponto morto. O autor acha que o aviso é tão importante que deve ser realçado e, como tal, o aviso é marcado utilizando o elemento strong .

Código Exemplo:

<h1>How to start the engine</h1>
<p>Before starting the engine, <strong>make sure the gear 
is in neutral</strong>. Next, turn the key in the ignition. 
The engine should start.</p>

Exemplo 4

Este exemplo mostra como utilizar os elementos em e strong para realçar texto.

Código Exemplo:

<p>What she <em>really</em> meant to say was, 
"This is not ok, it is <strong>excellent</strong>!"</p>

Exemplo 5: Utilizar cor de fundo e de realce para identificar informações importantes semântica e visualmente.

Código Exemplo:

<style type="text/css">
 .vocab {
background-color:cyan;
font-style:normal;
}
</style>
 .......
<p>New vocabulary words are emphasized and highlighted 
with a cyan background</p>
<p>The <em class="vocab">scathing </em> review of the play 
seemed a bit too harsh. .... </p>

Recursos

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

Testes

Procedimento

  1. Verifique se existem partes do conteúdo que tenham uma função semântica.

  2. Para cada parte que tenha uma função semântica, se existir uma marcação correspondente na tecnologia, verifique se o conteúdo foi marcado utilizando essa marcação semântica.

Resultados Esperados