Técnicas para as WCAG 2.0

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

-

F43: Falha do Critério de Sucesso 1.3.1 devido àutilização de marcação estrutural de uma forma que não representa as relações no conteúdo

Aplicabilidade

HTML e XHTML.

Esta falha está relacionada com:

Descrição

O objectivo desta técnica é descrever uma falha que ocorre quando a marcação estrutural é utilizada para se obter um efeito de apresentação, mas indica relações que não existem no conteúdo. Isto é confuso para os utilizadores que dependem dessas relações para navegar no conteúdo ou compreender a relação entre uma parte do conteúdo e outra. Note que a utilização de tabelas HTML para esquemas não é um exemplo desta falha, desde que a tabela de esquema não inclua marcação estrutural inadequada como, por exemplo, elementos <th> ou <caption> .

Exemplos

Exemplo de Falha 1: Um cabeçalho utilizado apenas para efeito visual

Neste exemplo, um elemento heading é utilizado para apresentar um endereço num tipo de letra ampliado, a negrito. Contudo, o endereço não identifica uma nova secção do documento, por isso não deve ser marcado como um cabeçalho.

Código Exemplo:

<p>Interested in learning more? Write to us at</p> 
<h4>3333 Third Avenue, Suite 300 · New York City</h4>

<p>And we'll send you the complete informational packet absolutely Free!</p>

Exemplo de Falha 2: Utilizar elementos heading para efeito de apresentação

Neste exemplo, a marcação do cabeçalho é utilizada de duas formas diferentes: para transmitir a estrutura do documento e criar efeitos visuais. Os elementos h1 e h2 são utilizados correctamente para marcar o início do documento como um todo e o início da sinopse. Contudo, os elementos h3 e h4 entre o título e a sinopse são utilizados apenas para efeito visual – para controlar os tipos de letra utilizados para apresentar os nomes dos autores e a data.

Código Exemplo:

<h1>Study on the Use of Heading  Elements in Web Pages</h1>
<h3>Joe Jones and Mary Smith<h3>
<h4>March 14, 2006</h4>
<h2>Abstract</h2>
<p>A study was conducted in early 2006 ...
</p>

Exemplo de Falha 3: Utilizar elementos blockquote para fornecer um avanço adicional

O exemplo seguinte utiliza blockquote para texto que não é uma citação, para o destacar através de avanço, quando é apresentado nos browsers gráficos.

Código Exemplo:

<p>After extensive study of the company Web site, the task force 
identified the following common problem.</p>

<blockquote>
<p>The use of markup for presentational effects made Web 
pages confusing to screen reader users.</p>
</blockquote>

<p>The committee lists particular examples of the problems 
introduced by this practice below.</p>

Exemplo de Falha 4: Utilizar os elementos fieldset e legend para acrescentar uma margem ao texto

Código Exemplo:

<fieldset>
<legend>Bargain Corner</legend>
<p>Buy today, and save 20%</p>
</fieldset>

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

  1. Verifique se o significado semântico de cada elemento é apropriado para o conteúdo do elemento.

Resultados Esperados