Técnicas para as WCAG 2.0

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

-

F49: Falha do Critério de Sucesso 1.3.2 devido àutilização de uma tabela de esquema HTML que não faz sentido quando linearizada

Aplicabilidade

HTML e XHTML.

Esta falha está relacionada com:

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

Os primeiros leitores de ecrã liam, literalmente, o conteúdo da Web a partir do ecrã, o que conduzia a problemas quando eram utilizadas tabelas para esquemas, em que uma célula de tabela deveria ser lida na sua totalidade antes de passar para a célula de tabela seguinte. Actualmente, os leitores de ecrã trabalham com a marcação subjacente, o que significa que lêem uma célula de tabela na sua totalidade antes de passar para a célula seguinte, mas as tabelas de esquema podem continuar a originar problemas inadvertidamente com a leitura natural do conteúdo.

Descrição

Embora as WCAG 2 não proíbam a utilização de tabelas de esquema, são recomendados os esquemas baseados em CSS para manter o significado semântico definido dos elementos table HTML e para estar em conformidade com a regra de codificação de separar a apresentação do conteúdo. Contudo, se for utilizada uma tabela de esquema, é importante que o conteúdo faça sentido quando linearizado.

Esta falha ocorre quando uma sequência com significação do conteúdo transmitida através da apresentação é perdida porque as tabelas HTML utilizadas para controlar a colocação visual do conteúdo não "linearizaram" correctamente. As tabelas apresentam o conteúdo em duas dimensões visuais, horizontal e vertical. Contudo, os leitores de ecrã apresentam este conteúdo bidimensional na ordem linear do conteúdo na origem, começando pela primeira célula na primeira linha e terminando com a última célula na última linha. O leitor de ecrã lê a tabela do início ao fim, lendo todos os conteúdos de cada linha antes de passar para a linha seguinte. O conteúdo completo de cada célula em cada linha é lido, incluindo todo o conteúdo de qualquer tabela encaixada numa célula. Chama-se a isto linearização.

Imagine que uma página Web é disposta utilizando uma tabela com 9 colunas e 22 linhas. O leitor de ecrã lê o conteúdo da célula na Coluna 1, Linha 1 seguido pelas células nas colunas 2, 3, 4 e assim sucessivamente até à coluna 9. Contudo, se nenhuma célula incluir uma tabela encaixada, o leitor de ecrã irá ler toda a tabela encaixada antes de ler a célula seguinte da tabela original (externa). Por exemplo, se a célula na coluna 3, linha 6 incluir uma tabela com 6 colunas e 5 linhas, todas as células serão lidas antes da Coluna 4, Linha 6 da tabela original (externa). Como resultado, a sequência com significação transmitida através de apresentação visual pode não ser perceptível quando o conteúdo é lido através de um leitor de ecrã.

Exemplos

Exemplo de Falha 1: Uma tabela de esquema que não lineariza correctamente

Um anúncio utiliza de forma inteligente o posicionamento visual, mas o seu significado é alterado quando linearizado.

Código Exemplo:

<table>
<tr>
  <td ><img src="logo.gif" alt="XYZ mountaineering"></td>
  <td rowspan="2" valign="bottom">top!</td>
</tr>
<tr>
  <td>XYZ gets you to the</td>
</tr>
</table>

A ordem de leitura deste exemplo seria:

  • XYZ montanhismo topo!

  • XYZ leva-o ao

Exemplo de Falha 2: Uma tabela de esquema que separa uma sequência com significação quando linearizada

Uma página Web da exposição de um museu posiciona uma barra de navegação com uma longa lista de links no lado esquerdo da página. À direita da barra de navegação está uma imagem de um dos quadros da exposição. À direita da imagem está o texto do "letreiro" que poderia ver na parede junto ao quadro se estivesse no museu. Abaixo do texto está um cabeçalho que indica: "Descrição" e abaixo desse cabeçalho está uma descrição da imagem. A imagem, o texto do letreiro, o cabeçalho Descrição e o texto da descrição formam uma sequência com significação.

É utilizada uma tabela de esquema para posicionar os elementos da página. Os links na barra de navegação são divididos em células diferentes na coluna mais à esquerda.

Código Exemplo:

<table>
<tr>
        <td><a href="#">Link 1</a></td>
        <td rowspan="20"><img src="img.png" alt="Museum Picture"></td>
        <td rowspan="6"><img src="placard.png" alt="Placard text"></td> 
</tr> 
<tr>
        <td><a href="#">Link 2</a></td>
</tr>
<tr>
        <td><a href="#">Link 3</a></td>
</tr>
<tr>
        <td><a href="#">Link 4</a></td>
</tr>
<tr>
        <td><a href="#">Link 5</a></td>
</tr>
<tr>
        <td><a href="#">Link 6</a></td>
</tr>
<tr>
        <td><a href="#">Link 7</a></td>
        <td rowspan="2"><h2>Image Heading</h2></td> 
</tr> 
<tr>
        <td><a href="#">Link 8</a></td>
</tr>
<tr>
        <td><a href="#">Link 9</a></td>
        <td rowspan="12">Description of the image</td> 
</tr> 
<tr>
        <td><a href="#">Link 10</a></td>
</tr>
 ...
<tr>
        <td><a href="#">Link 20</a></td>
</tr>
</table>

A ordem de leitura deste exemplo seria:

  • Link 1

  • Imagem

  • Texto do Letreiro

  • Link 2

  • Link 3

  • Link 4

  • Link 5

  • Link 6

  • Link 7

  • Cabeçalho da Imagem

  • Link 8

  • Link 9

  • Link 10

  • ...

  • Link 20

Uma vez que os links da barra de navegação estão intercalados com o conteúdo que descreve a imagem, os leitores de ecrã não conseguem apresentar o conteúdo numa sequência com significação correspondente à sequência apresentada visualmente.

Recursos

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

Testes

Procedimento

  1. Linearize o conteúdo de uma das seguintes formas:

    • Apresente o conteúdo na ordem do código fonte.

    • Remova a marcação da tabela em torno do conteúdo.

  2. Verifique se a ordem de leitura linear corresponde a qualquer sequência com significação transmitida através de apresentação.

Resultados Esperados