Sobre este problema HTML
O atributo scope informa aos navegadores e tecnologias assistivas como uma célula de cabeçalho se relaciona com as células de dados à sua volta. Os seus valores válidos são col, row, colgroup e rowgroup. Em versões anteriores do HTML, scope era permitido em elementos <td>, mas o atual HTML Living Standard restringe-o apenas aos elementos <th>. Quando o validador W3C encontra scope num <td>, marca-o como obsoleto.
Isto é importante por várias razões. Primeiro, se uma célula funciona como cabeçalho para outras células, deve ser marcada como <th>, não como <td>. Usar <td scope="row"> envia sinais contraditórios — o elemento diz “sou uma célula de dados” enquanto o atributo diz “sou um cabeçalho para esta linha.” Segundo, os leitores de ecrã dependem de elementos <th> adequados com scope para anunciar relações de tabela. Um <td> com scope pode não ser interpretado corretamente, tornando a tabela mais difícil de navegar para utilizadores de tecnologia assistiva. Terceiro, usar atributos obsoletos significa que a sua marcação não está em conformidade com os padrões atuais, o que pode levar a comportamentos imprevisíveis em navegadores futuros.
A correção é direta: se uma célula tem um atributo scope, está a funcionar como cabeçalho e deve ser um elemento <th>. Altere o <td> para <th> e mantenha o atributo scope. Se a célula é genuinamente uma célula de dados e não um cabeçalho, remova completamente o atributo scope e deixe-a como <td>.
Exemplos
Incorreto: scope num elemento <td>
<table>
<tr>
<td scope="col">Name</td>
<td scope="col">Role</td>
</tr>
<tr>
<td scope="row">Alice</td>
<td>Engineer</td>
</tr>
</table>
Isto desencadeia o erro de validação porque scope é usado em elementos <td>. A primeira linha contém cabeçalhos de coluna e a primeira coluna contém cabeçalhos de linha, mas estão todos marcados como células de dados.
Correto: scope em elementos <th>
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Role</th>
</tr>
<tr>
<th scope="row">Alice</th>
<td>Engineer</td>
</tr>
</table>
Agora as células de cabeçalho estão corretamente marcadas com <th>, e o atributo scope é válido em cada uma. Os leitores de ecrã podem associar adequadamente “Alice” com “Engineer” e anunciar o cabeçalho de coluna “Role” ao navegar para essa célula.
Um exemplo de tabela mais completo
<table>
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Morning</th>
<th scope="col">Afternoon</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Monday</th>
<td>Meeting</td>
<td>Code review</td>
</tr>
<tr>
<th scope="row">Tuesday</th>
<td>Workshop</td>
<td>Planning</td>
</tr>
</tbody>
</table>
Aqui, scope="col" nos cabeçalhos de coluna em <thead> informa à tecnologia assistiva que “Day,” “Morning,” e “Afternoon” se aplicam cada um às células abaixo deles. scope="row" em “Monday” e “Tuesday” indica que se aplicam às células nas suas respetivas linhas. Cada atributo scope está num <th>, pelo que a marcação é válida e acessível.
Quando remover scope em vez disso
Se a célula contém verdadeiramente dados e não é um cabeçalho, simplesmente remova o atributo scope:
<!-- Antes (inválido) -->
<td scope="row">Some data</td>
<!-- Depois (válido) -->
<td>Some data</td>
Apenas adicione scope quando uma célula serve genuinamente como cabeçalho. Se serve, torne-a um <th>. Se não serve, deixe-a como um <td> simples sem scope.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.