Técnicas para as WCAG 2.0

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

-

H73: Utilizar o atributo summary do elemento table para fornecer uma descrição geral das tabelas de dados

Aplicabilidade

HTML 4.01, XHTML 1.x.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer uma breve descrição geral de como os dados foram organizados numa tabela, ou uma breve explicação de como navegar na tabela. O atributo summary do elemento table disponibiliza estas informações às pessoas que utilizam leitores de ecrã; as informações não são apresentadas visualmente.

O summary é útil quando a tabela tem uma estrutura complexa (por exemplo, quando existem vários conjuntos de cabeçalhos de linha ou coluna, ou quando existem vários grupos de colunas ou linhas.) O summary também pode ser útil para tabelas de dados simples que incluem várias colunas ou linhas de dados.

O atributo summary pode ser utilizado independentemente de a tabela incluir ou não um elemento caption . Se ambos forem utilizados, o summary não deve duplicar o caption.

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, o atributo summary não é utilizado ou é nulo. A finalidade de uma tabela de esquema é, simplesmente, controlar a colocação do conteúdo; a própria tabela é “transparente" para o utilizador. Um summary poderia "acabar" com essa transparência chamando a atenção para a tabela. É aceitável um summary nulo (summary="") nas tabelas de esquema.

Exemplos

Exemplo 1: Uma tabela de dados com um resumo, mas sem legenda

Este exemplo mostra um horário de autocarro. O número da carreira e o destino estão incluídos no summary juntamente com as informações sobre como utilizar o horário.

Código Exemplo:

<table summary="Schedule for Route 7 going downtown. Service begins 
at 4:00 AM and ends at midnight. Intersections are listed in the top row. 
Find the intersection closest to your starting point or destination, then read 
down that column to find out what time the bus leaves that intersection.">
  <tr>
    <th scope="col">State & First</th>
    <th scope="col">State & Sixth</th>
    <th scope="col">State & Fifteenth</th>
    <th scope="col">Fifteenth & Morrison</th>
  </tr>
    <td>4:00</td>
    <td>4:05</td>
    <td>4:11</td>
    <td>4:19</td>
  </tr>
  …
</table> 

Exemplo 2: Uma tabela de dados com um resumo e uma legenda

Neste exemplo, são utilizados um atributo summary e um elemento caption . O caption identifica o percurso do autocarro. O summary ajuda os utilizadores que são cegos a compreender como utilizar o horário. Os leitores de ecrã lêem o caption, seguido do summary.

Código Exemplo:

<table summary="Intersections are listed in row 1. 
Find the intersection closest to your starting point 
or destination, then read down that column to find 
out what time the bus leaves that intersection.  
Service begins at 4:00 AM and ends at midnight.">
  <caption>Route 7 Downtown (Weekdays)</caption>
…
</table>

Recursos

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

Testes

Procedimento

  1. Procure tabelas de esquema: verifique se o conteúdo tem uma relação com outro conteúdo, tanto na coluna como na fila.

    1. Se “não", a tabela é uma tabela de esquema.

    2. Se "sim", a tabela é uma tabela de dados.

  2. Se a tabela for uma tabela de esquema, verifique se o atributo summary não está presente ou se o atributo summary é nulo.

  3. Se a tabela for uma tabela de dados e existir um summary, verifique se o atributo summary descreve a organização da tabela ou explica como utilizá-la.

  4. Se existir um atributo summary e um elemento caption nesta tabela de dados, verifique se o summary não duplica o caption.

Resultados Esperados