Verificação HTML: O atributo "summary" no elemento "table" está obsoleto. Considere descrever a estrutura da "table" num elemento "caption" ou num elemento "figure" que contenha a "table"; ou, simplifique a estrutura da "table" para que não seja necessária nenhuma descrição.

Sobre este problema HTML

O atributo summary era usado em HTML 4 para fornecer uma descrição textual da estrutura e propósito de uma tabela, principalmente para utilizadores de leitores de ecrã. Em HTML5, este atributo foi depreciado porque era invisível para utilizadores com visão, criando uma experiência desigual. Também era frequentemente mal utilizado — os autores muitas vezes duplicavam a legenda da tabela ou forneciam descrições inúteis, diminuindo o seu valor de acessibilidade.

O HTML Living Standard oferece várias alternativas melhores, cada uma adequada a diferentes situações:

Use um elemento <caption> — Melhor opção para um título ou descrição concisa que beneficie todos os utilizadores, não apenas utilizadores de leitores de ecrã. O <caption> deve ser o primeiro filho do elemento <table>.
Use um <figure> com <figcaption> — Ideal quando você quer fornecer uma descrição mais longa ou informação contextual junto com a tabela. Esta abordagem também agrupa semanticamente a tabela com a sua descrição.
Simplifique a tabela — Se a sua tabela é simples com cabeçalhos claros, pode não precisar de nenhuma descrição adicional. Elementos <th> bem estruturados com atributos scope apropriados frequentemente fornecem contexto suficiente.

Do ponto de vista da acessibilidade, as abordagens <caption> e <figcaption> são superiores porque são visíveis para todos os utilizadores e fazem parte do fluxo do documento. Os leitores de ecrã anunciam o conteúdo do <caption> quando um utilizador navega para uma tabela, fornecendo o mesmo benefício que o atributo summary oferecia antes — mas agora todos podem vê-lo.

Exemplos

❌ Obsoleto: Usando o atributo `summary`

Isto aciona o aviso de validação porque summary já não é um atributo válido em <table>.

<table summary="This table shows monthly sales figures for 2024.">
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$1,000</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$1,200</td>
  </tr>
</table>

✅ Solução 1: Usando um elemento `<caption>`

Substitua o atributo summary por um <caption> como primeiro filho da <table>. Esta é a solução mais comum e direta.

<table>
  <caption>Monthly sales figures for 2024</caption>
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$1,000</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$1,200</td>
  </tr>
</table>

✅ Solução 2: Usando `<figure>` e `<figcaption>`

Esta abordagem é útil quando você quer fornecer uma descrição mais longa ou quando a tabela é referenciada como uma figura dentro do conteúdo circundante.

<figure>
  <figcaption>
    Monthly sales figures for 2024, showing a steady increase in revenue
    during the first quarter.
  </figcaption>
  <table>
    <tr>
      <th>Month</th>
      <th>Sales</th>
    </tr>
    <tr>
      <td>January</td>
      <td>$1,000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$1,200</td>
    </tr>
  </table>
</figure>

✅ Solução 3: Simplifique e confie em cabeçalhos claros

Para tabelas simples onde os dados são autoexplicativos, cabeçalhos bem rotulados com atributos scope podem ser suficientes. Não é necessária nenhuma descrição extra.

<table>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$1,000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$1,200</td>
    </tr>
  </tbody>
</table>

Você também pode combinar abordagens — use um <caption> para um título breve e envolva a tabela num <figure> com um <figcaption> para contexto adicional. O ponto principal é remover o atributo summary e usar elementos HTML semânticos visíveis para descrever a sua tabela.