Técnicas para as WCAG 2.0

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

-

H63: Utilizar o atributo scope para associar células de cabeçalho a células de dados em tabelas de dados

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

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

Os valores row e col do atributo scope são, actualmente, suportados em grande medida pela maioria das versões actuais do JAWS. Contudo, ainda existem alguns problemas e o suporte do WindowEyes para o scope é inconsistente. O mesmo se passa para as versões japonesas destes leitores de ecrã. As versões do JAWS anteriores à versão 5 e as versões mais antigas do WindowsEyes têm um suporte inconsistente para o scope.

Actualmente, quem pretender garantir um suporte consistente das Tecnologias de Apoio para as tabelas em que os cabeçalhos não estão na primeira linha/coluna pode pretender utilizar a técnica para tabelas complexas H43: Utilizar os atributos id e headers para associar células de dados a células de cabeçalho em tabelas de dados. Para as tabelas simples que têm cabeçalhos na primeira coluna ou linha, recomendamos a utilização dos elementos th e td .

Descrição

O objectivo desta técnica é associar células de cabeçalho a células de dados utilizando o atributo scope . O atributo scope pode ser utilizado para clarificar o âmbito de qualquer célula utilizada como um cabeçalho. O âmbito identifica se a célula é um cabeçalho para uma linha, coluna ou grupo de linhas ou colunas. Os valores row, col, rowgroup e colgroup identificam estes possíveis âmbitos respectivamente.

Para as tabelas de dados simples, em que o cabeçalho não esteja na primeira linha ou coluna, tal como o apresentado no Exemplo 1, esta técnica pode ser utilizada. Com base no suporte actual de leitores de ecrã, sugerimos a sua utilização em duas situações, ambas relacionadas com tabelas simples:

Nota: Para as tabelas simples que têm os cabeçalhos na primeira linha ou coluna é suficiente utilizar simplesmente os elementos TH sem o âmbito.

Nota: Para as tabelas complexas, utilize ids e headers, conforme indicado em H43: Utilizar os atributos id e headers para associar células de dados a células de cabeçalho em tabelas de dados.

Exemplos

Exemplo 1: Uma agenda simples

No exemplo seguinte, a coluna 1 contém números de série para linhas da tabela e a segunda coluna contém o valor-chave para a linha. As células na segunda coluna podem assim utilizar o scope="row". As células da primeira linha também estão marcadas com o td e utilizam o scope="col".

Código Exemplo:

                                       <table border="1">
  <caption>Contact Information</caption>
  <tr>
    <td></td>
    <td scope="col">Name</td>
    <td scope="col">Phone#</td>
    <td scope="col">Fax#</td>
    <td scope="col">City</td>
  </tr><tr>
    <td>1.</td>
    <td scope="row">Joel Garner</td>
    <td>412-212-5421</td>
    <td>412-212-5400</td>
    <td>Pittsburgh</td>
  </tr><tr>
    <td>2.</td>
    <td scope="row">Clive Lloyd</td>
    <td>410-306-1420</td>
    <td>410-306-5400</td>
    <td>Baltimore</td>
  </tr><tr>
    <td>3.</td>
    <td scope="row">Gordon Greenidge</td>
    <td>281-564-6720</td>
    <td>281-511-6600</td>
    <td>Houston</td>
  </tr>
</table> 

Recursos

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

Testes

Procedimento

Para cada tabela de dados:

  1. Verifique se todos os elementos th têm um atributo scope .

  2. Verifique se todos os elementos td que funcionam como cabeçalhos para outros elementos têm um atributo scope .

  3. Verifique se todos os atributos scope têm o valor row, col, rowgroup ou colgroup.

Resultados Esperados