Regra de acessibilidade: O atributo scope deve ser usado corretamente

Sobre esta regra de acessibilidade

O atributo scope estabelece a relação entre células de cabeçalho e células de dados numa tabela de dados. Quando um leitor de ecrã encontra uma tabela, usa essas relações para anunciar o cabeçalho relevante à medida que um utilizador se move entre células. Por exemplo, se um cabeçalho de coluna tem scope="col", o leitor de ecrã sabe que todas as células abaixo dele nessa coluna estão associadas a esse cabeçalho. Da mesma forma, scope="row" informa o leitor de ecrã que todas as células à direita desse cabeçalho na mesma linha pertencem a ele.

Quando scope é usado incorretamente — colocado num elemento <td> em HTML5, aplicado a um elemento que não é de tabela, ou dado um valor inválido — os leitores de ecrã podem interpretar mal a estrutura da tabela. Isto afeta principalmente utilizadores cegos e surdocegos que dependem de leitores de ecrã para navegação de tabelas, bem como utilizadores com deficiências motoras que podem usar tecnologias assistivas para navegar conteúdo estruturado. Em vez de ouvir anúncios de cabeçalho significativos à medida que se movem pelas células, estes utilizadores podem não ouvir nada, ou pior, ouvir associações incorretas de cabeçalho que tornam os dados incompreensíveis.

Esta regra é classificada como uma melhor prática da Deque. O uso correto do atributo scope alinha-se com o objetivo mais amplo de tornar as tabelas de dados programaticamente determináveis, o que suporta WCAG 1.3.1 (Informação e Relações) — o requisito de que informação e relações transmitidas através de apresentação possam ser programaticamente determinadas.

Como corrigir

Siga estes passos para garantir que scope é usado corretamente:

Use scope apenas em elementos <th>. Em HTML5, o atributo scope só é válido em elementos <th>. Se estiver a usar HTML4, também é permitido em <td>, mas isto é pouco comum e geralmente desnecessário.
Use apenas valores válidos. O atributo scope deve ser definido como col (para cabeçalhos de coluna) ou row (para cabeçalhos de linha). Os valores colgroup e rowgroup também são válidos quando os cabeçalhos abrangem grupos, mas row e col cobrem a grande maioria dos casos de uso. Não use valores arbitrários ou mal escritos.
Adicione scope a todos os elementos <th>. Cada <th> na sua tabela deve ter um atributo scope para que os leitores de ecrã possam associar inequivocamente os cabeçalhos às suas células de dados.
Use <th> para cabeçalhos e <td> para dados. Certifique-se de que não está a usar <td> para células que funcionam como cabeçalhos — use <th> em vez disso, e adicione o scope apropriado.

Exemplos

Incorreto: `scope` num elemento `<td>` (inválido em HTML5)

<table>
  <tr>
    <td scope="col">Nome</td>
    <td scope="col">Pontuação</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
</table>

Aqui, scope está colocado em elementos <td> em vez de <th>. Os leitores de ecrã não reconhecerão essas células como cabeçalhos.

Incorreto: valor de `scope` inválido

<table>
  <tr>
    <th scope="column">Nome</th>
    <th scope="column">Pontuação</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
</table>

O valor column não é válido — o valor correto é col.

Incorreto: elementos `<th>` sem `scope`

<table>
  <tr>
    <th>Nome</th>
    <th>Pontuação</th>
  </tr>
  <tr>
    <th>Alice</th>
    <td>95</td>
  </tr>
</table>

Embora elementos <th> sejam usados, nenhum tem um atributo scope. Os leitores de ecrã têm de adivinhar se cada cabeçalho se aplica a uma coluna ou a uma linha.

Correto: uso adequado de `scope` em elementos `<th>`

<table>
  <caption>Pontuações de Teste dos Estudantes</caption>
  <tr>
    <th scope="col">Nome</th>
    <th scope="col">Pontuação</th>
  </tr>
  <tr>
    <th scope="row">Alice</th>
    <td>95</td>
  </tr>
  <tr>
    <th scope="row">Bob</th>
    <td>88</td>
  </tr>
</table>

Os cabeçalhos de coluna usam scope="col" e os cabeçalhos de linha usam scope="row", todos em elementos <th>. Um leitor de ecrã que navegar para a célula que contém “95” pode anunciar “Nome: Alice, Pontuação: 95” — dando ao utilizador contexto completo sem precisar de examinar visualmente a tabela. O elemento <caption> fornece um nome acessível para a tabela, melhorando ainda mais a experiência.

Learn more: