Regra de acessibilidade: As tabelas não devem ter o mesmo summary e caption

Sobre esta regra de acessibilidade

Os leitores de ecrã anunciam tanto o <caption> como o summary quando um utilizador encontra uma tabela de dados. O elemento <caption> serve como o título visível da tabela no ecrã — indica a todos os utilizadores sobre o que trata a tabela. O atributo summary (disponível em HTML4 e XHTML, embora deprecado em HTML5) é lido apenas pelos leitores de ecrã e destina-se a descrever a estrutura da tabela, como por exemplo a forma como as linhas e colunas estão organizadas. Quando estes dois contêm o mesmo texto, o leitor de ecrã simplesmente lê o mesmo conteúdo duas vezes, o que não fornece valor adicional e cria uma experiência confusa e redundante.

Esta questão afeta principalmente utilizadores cegos e surdocegos que dependem de leitores de ecrã para navegar e interpretar dados tabulares. Os leitores de ecrã têm funcionalidades especializadas de navegação em tabelas, mas dependem de marcação precisa e significativa para funcionarem corretamente. Quando o caption e o summary são duplicados, os utilizadores perdem a oportunidade de obter tanto um título conciso como uma descrição estrutural útil da tabela.

Esta regra é identificada como uma melhor prática do Deque e é também referenciada no RGAA (norma de acessibilidade do governo francês). Embora não corresponda diretamente a um critério de sucesso específico do WCAG, apoia os princípios por trás do WCAG 1.3.1 Informações e Relacionamentos (Nível A), que exige que as informações e estruturas transmitidas visualmente estejam também disponíveis programaticamente.

Como corrigir

A correção é simples: certifique-se de que o <caption> e o atributo summary contêm texto diferente que serve cada um o seu propósito pretendido.

Use o elemento <caption> para dar à tabela um título conciso e visível que descreva que dados a tabela contém.
Use o atributo summary para descrever a estrutura da tabela — por exemplo, quantos grupos de colunas existem, o que os cabeçalhos de linha e coluna representam, ou como os dados estão organizados.

Se descobrir que não consegue pensar em conteúdo distinto para ambos, considere se realmente precisa do atributo summary. Para tabelas simples, um <caption> sozinho é frequentemente suficiente. Note que summary está deprecado em HTML5, por isso para documentos modernos pode querer fornecer descrições estruturais usando outras técnicas, como um parágrafo ligado com aria-describedby.

Exemplos

Incorreto: Caption e summary idênticos

O summary e o <caption> contêm o mesmo texto, fazendo com que os leitores de ecrã repitam a informação.

<table summary="Quarterly sales figures">
  <caption>Quarterly sales figures</caption>
  <tr>
    <th>Quarter</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>$50,000</td>
  </tr>
  <tr>
    <td>Q2</td>
    <td>$62,000</td>
  </tr>
</table>

Correto: Caption e summary fornecem informações diferentes

O <caption> nomeia a tabela, enquanto o summary descreve a sua estrutura.

<table summary="Column 1 lists each quarter, column 2 shows total revenue for that quarter.">
  <caption>Quarterly sales figures</caption>
  <tr>
    <th>Quarter</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>$50,000</td>
  </tr>
  <tr>
    <td>Q2</td>
    <td>$62,000</td>
  </tr>
</table>

Correto: Usar apenas um caption (abordagem HTML5)

Para tabelas simples em HTML5, pode omitir completamente o atributo summary deprecado e confiar apenas num <caption>.

<table>
  <caption>Quarterly sales figures</caption>
  <tr>
    <th>Quarter</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>$50,000</td>
  </tr>
  <tr>
    <td>Q2</td>
    <td>$62,000</td>
  </tr>
</table>

Correto: Alternativa HTML5 usando `aria-describedby`

Se precisar de fornecer uma descrição estrutural em HTML5, use aria-describedby para ligar a um parágrafo próximo em vez de usar summary.

<p id="table-desc">Column 1 lists each quarter, column 2 shows total revenue for that quarter.</p>
<table aria-describedby="table-desc">
  <caption>Quarterly sales figures</caption>
  <tr>
    <th>Quarter</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>$50,000</td>
  </tr>
  <tr>
    <td>Q2</td>
    <td>$62,000</td>
  </tr>
</table>

Learn more: