Guia para tornar páginas web acessíveis
Tabelas
Recomendação
- Evitar o uso de tabelas para formatação visual de uma página.
É altamente recomendável utizar as folhas de estilo (CSS)
e a correta marcação para construir a apresentação
visual sem tabelas.
- Utilizar as tabelas somente para compor dados tabulares.
- A marcação correta de tabelas beneficia usuários
que utilizam meios sonoros, como leitor de tela, para acessar páginas
web.
Html/Xhtml
- TÍTULO DA TABELA: Fornecer o título da tabela através
da tag "caption".
- RESUMO DA TABELA: Para melhor compreensão de tabelas complexas,
fornecer um resumo informando o propósito da tabela através
do atributo "summary" no elemento "table". O resumo
não fica visível na página, mas o leitor de tela descreve.
- CABEÇALHO E DADOS: Utilizar "th" para identificar os
cabeçalhos de linhas e colunas e "td" para identificar
as células com dados.
- ASSOCIAÇÃO ENTRE CABEÇALHO E DADOS: Associar os dados
"td" aos respectivos cabeçalhos "th". Em tabelas
simples, associar com o atributo "scope" na tag "th"
e em tabelas com dois ou mais níveis de cabeçalhos, associar
com os atributos "headers" e "id".
- GRUPOS: Fornecer as marcações "thead", "tfoot"
e "tbody" para agrupar linhas e "col" e "colgroup"
para agrupar colunas. Além de facilitar a organização
da tabela, auxilia na aplicação de estilos.
- Não simular tabelas utlizando espaçamentos ou outras marcações
como por exemplo com a tag "pre". Tabelas sempre devem ser marcadas
com "table", assim o leitor de tela identificará que trata-se
de uma tabela.
- Apesar de que alguns leitores de tela reconhecerem bem uma tabela complexa
com marcação apropriada, é aconselhável, se
possível, utilizar-se de tabelas mais simples.
Exemplo 1
- Tabela simples com título, cabeçalhos, dados e associação
por "scope".
NOTAS
| Alunos |
Português |
Matemática |
| Paulo |
7 |
8 |
| Marcos |
6 |
9 |
| Rosa |
10 |
7 |
<table>
<caption>NOTAS</caption>
<tr>
<th scope="col">Alunos</th>
<th scope="col">Português</th>
<th scope="col">Matemática</th>
</tr>
<tr>
<th scope="row">Paulo</th>
<td>7</td>
<td>8</td>
</tr>
<tr>
<th scope="row">Marcos</th>
<td>6</td>
<td>9</td>
</tr>
<tr>
<th scope="row">Rosa</th>
<td>10</td>
<td>7</td>
</tr>
</table>
Exemplo 2
- Tabela com dois níveis de cabeçalho requer associação
com dados através dos atributos "id" e "headers".
NOTAS
| Grupos |
Alunos |
Português |
Matemática |
| A |
Paulo |
7 |
8 |
| Marcos |
6 |
9 |
| B |
Rosa |
10 |
7 |
<table>
<caption>NOTAS</caption>
<tr>
<th id="grupo">Grupo</th>
<th id="alunos">Alunos</th>
<th id="portugues">Português</th>
<th id="matematica">Matemática</th>
</tr>
<tr>
<th id="a" rowspan="2">A</th>
<th id="paulo">Paulo</th>
<td headers="a paulo portugues">7</td>
<td headers="a paulo matematica">8</td>
</tr>
<tr>
<th id="marcos">Marcos</th>
<td headers="a marcos portugues">6</td>
<td headers="a marcos matematica">9</td>
</tr>
<tr>
<th id="b">B</th>
<th id="rosa">Rosa</th>
<td headers="b rosa portugues">10</td>
<td headers="b rosa matematica">7</td>
</tr>
</table>
Exemplo 3
- Tabela com mais níveis de cabeçalho, resumo, título
e agrupados por linhas - "thead", "tfoot" e "tbody".
Associados com "id" e "headers".
- A tag "tfoot" deve estar antes de "tbody".
- O leitor de tela falará em ordem linearizada se utilizar as teclas
de setas. Porém ao focar determinada célula e com teclas
específicas, poderá falar: grupo 1 alunos Paulo português
7 matemática 8 e assim por diante.
NOTAS
| Grupo principais |
Alunos |
Matérias |
| Português |
Matemática |
| Total por matéria |
7,6 |
8 |
| A |
Paulo |
7 |
8 |
| Marcos |
6 |
9 |
| B |
Rosa |
10 |
7 |
<table
summary="Tabela contendo notas por grupo em
relação a alunos e matérias.">
<caption>NOTAS</caption>
<thead>
<tr>
<th id="grupo" rowspan="2">
Grupos principais</th>
<th id="alunos" rowspan="2">Alunos</th>
<th id="materias" colspan="2">Matérias</th>
</tr>
<tr>
<th id="portugues">Português</th>
<th id="matematica">Matemática</th>
</tr>
</thead>
<tfoot>
<th id="total" colspan="2">Total por
matéria</th>
<td headers="total">7,6</td>
<td headers="total">8</td>
</tfoot>
<tbody>
<tr>
<th id="a" rowspan="2">A</th>
<th id="paulo">Paulo</th>
<td headers="a paulo portugues">7</td>
<td headers="a paulo matematica">8</td>
</tr>
<tr>
<th id="marcos">Marcos</th>
<td headers="a marcos portugues">6</td>
<td headers="a marcos matematica">9</td>
</tr>
</tbody>
<tbody>
<tr>
<th id="b">B</th>
<th id="rosa">Rosa</th>
<td headers="b rosa portugues">10</td>
<td headers="b rosa matematica">7</td>
</tr>
</tbody>
</table>
Referência WCAG 1.0
