Técnicas para as WCAG 2.0

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

-

G57: Ordenar o conteúdo numa sequência com significação

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que a ordem do conteúdo apresentado às tecnologias de apoio permite ao utilizador compreender o conteúdo. Algumas técnicas permitem que o conteúdo seja apresentado visualmente numa sequência com significação, mesmo se a ordem subjacente do conteúdo for confusa.

Por exemplo, ao combinar idiomas com uma diferente direcção em HTML, o algoritmo bidireccional pode colocar a pontuação no local errado. O conteúdo ordenado correctamente mantém a pontuação na sequência correcta do conteúdo e utiliza a marcação para substituir o algoritmo bidireccional, em vez de mover a pontuação da sequência do conteúdo para que a apresentação predefinida a coloque correctamente.

Quando apresentados visualmente, os caracteres de espaço em branco, tais como espaço ou tabulação, podem não parecer fazer parte do conteúdo. Contudo, quando inseridos no conteúdo para controlar a formatação visual, podem interferir com o significado do conteúdo.

Numa granulosidade maior, o controlo da colocação de blocos de conteúdo num documento em HTML utilizando tabelas de esquema pode produzir uma apresentação, na qual as informações relacionadas são posicionadas juntas visualmente, mas separadas na sequência do conteúdo. Uma vez que as tabelas de esquema são lidas linha a linha, se a legenda de uma ilustração for colocada na linha a seguir à ilustração, poderá ser impossível associar a legenda à imagem.

Exemplos

Exemplo 1

Uma página Web da exposição de um museu contém uma barra de navegação com uma longa lista de links. A página também contém uma imagem de um dos quadros da exposição, um título para o quadro e uma descrição detalhada do quadro. Os links na barra de navegação formam uma sequência com significação. O título, a imagem e o texto da descrição também formam uma sequência com significação. O CSS é utilizado para posicionar os elementos na página.

Código Exemplo:

Markup:

<h1>My Museum Page</h1>
<ul id="nav">
        <li><a href="#">Link 1</a></li>
        ...
        <li><a href="#">Link 10</a></li>
</ul>
<div id="description">
<h2>Mona Lisa</h2>
<p>
<img src="img.png" alt="Mona Lisa">
</p>
<p>...detailed description of the picture...</p>
</div>

CSS:

ul#nav
{
        float: left;
        width: 9em;
        list-style-type: none;
        margin: 0;
        padding: 0.5em;
        color: #fff;
        background-color: #063;
}

ul#nav a
{
        display: block;
        width: 100%;
        text-decoration: none;
        color: #fff;
        background-color: #063;
}

div#description
{
        margin-left: 11em;
}

Recursos

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

Testes

Procedimento

  1. Torne o conteúdo linear utilizando uma abordagem normal para a tecnologia (por ex., removendo estilos de disposição ou executando uma ferramenta de linearização)

  2. Verifique se a ordem do conteúdo produz o mesmo significado do original

Resultados Esperados