Técnicas para as WCAG 2.0

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

-

H43: Utilizar os atributos id e headers para associar células de dados a células de cabeçalho em tabelas de dados

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é associar cada célula de dados (numa tabela de dados) aos cabeçalhos apropriados. Esta técnica adiciona um atributo headers a cada célula de dados (elementotd ) e também adiciona um atributo id a qualquer célula utilizada como um cabeçalho noutras células. O atributo headers de uma célula contém uma lista dos atributos id das células de cabeçalho associadas. Se existir mais de um id, estão separados por espaços.

Esta técnica é utilizada quando as células de dados estão associadas a mais de uma linha e/ou um cabeçalho de coluna. Isto permite aos leitores de ecrã lerem os cabeçalhos associados a cada célula de dados quando as relações forem demasiado complexas para serem identificadas utilizando apenas o elemento th ou o elemento th com o atributo scope . A utilização desta técnica também permite tornar estas relações complexas perceptíveis quando o formato de apresentação é alterado.

Esta técnica não é recomendada para tabelas de esquema, uma vez que a sua utilização implica uma relação entre células que não seja significativa quando as tabelas são utilizadas para o esquema.

Exemplos

Exemplo 1: Uma tabela com várias linhas de cabeçalhos

Código Exemplo:

<table>
   <tr>
     <th rowspan="2" id="h">Homework</th>
     <th colspan="3" id="e">Exams</th>
     <th colspan="3" id="p">Projects</th>
   </tr>
   <tr>
     <th id="e1" headers="e">1</th>
     <th id="e2" headers="e">2</th>
     <th id="ef" headers="e">Final</th>
     <th id="p1" headers="p">1</th>
     <th id="p2" headers="p">2</th>
     <th id="pf" headers="p">Final</th>
   </tr>
   <tr>
    <td headers="h">15%</td>
    <td headers="e e1">15%</td>
    <td headers="e e2">15%</td>
    <td headers="e ef">20%</td>
    <td headers="p p1">10%</td>
    <td headers="p p2">10%</td>
    <td headers="p pf">15%</td>
   </tr>
  </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. Se “não", a tabela é uma tabela de esquema. Se "sim", a tabela é uma tabela de dados.

  2. Para tabelas de dados, verifique se alguma célula que esteja associada a mais de uma linha e/ou um cabeçalho de coluna contém um atributo headers que indique o id para todos os cabeçalhos associados a essa célula.

  3. Para tabelas de dados em que exista uma célula que contenha um atributo id ou headers,

    1. Verifique se cada id indicado no atributo headers da célula de dados corresponde ao atributo id de uma célula que seja utilizada como um elemento header.

    2. Verifique se o atributo headers de uma célula de dados contém o atributo id de todos os cabeçalhos associados à célula de dados.

    3. Verifique se todos os ids são exclusivos (ou seja, não existam dois elementos na página com o mesmo id).

Resultados Esperados