Validación HTML: El atributo "summary" en el elemento "table" está obsoleto. Considera describir la estructura de la "table" en un elemento "caption" o en un elemento "figure" que contenga la "table"; o, simplifica la estructura de la "table" para que no sea necesaria ninguna descripción.

Acerca de este problema HTML

El atributo summary se utilizaba en HTML 4 para proporcionar una descripción de texto de la estructura y propósito de una tabla, principalmente para usuarios de lectores de pantalla. En HTML5, este atributo fue desaprobado porque era invisible para usuarios videntes, creando una experiencia desigual. También se utilizaba mal frecuentemente — los autores a menudo duplicaban el título de la tabla o proporcionaban descripciones inútiles, disminuyendo su valor de accesibilidad.

El HTML Living Standard ofrece varias alternativas mejores, cada una adecuada para diferentes situaciones:

Usar un elemento <caption> — Mejor para un título o descripción concisa que beneficia a todos los usuarios, no solo a usuarios de lectores de pantalla. El <caption> debe ser el primer hijo del elemento <table>.
Usar un <figure> con <figcaption> — Ideal cuando quieres proporcionar una descripción más larga o información contextual junto con la tabla. Este enfoque también agrupa semánticamente la tabla con su descripción.
Simplificar la tabla — Si tu tabla es directa con encabezados claros, puede que no necesite ninguna descripción adicional en absoluto. Los elementos <th> bien estructurados con atributos scope apropiados a menudo proporcionan suficiente contexto.

Desde el punto de vista de accesibilidad, los enfoques de <caption> y <figcaption> son superiores porque son visibles para todos los usuarios y forman parte del flujo del documento. Los lectores de pantalla anuncian el contenido de <caption> cuando un usuario navega a una tabla, proporcionando el mismo beneficio que el atributo summary ofrecía una vez — pero ahora todos pueden verlo.

Ejemplos

❌ Obsoleto: usar el atributo `summary`

Esto activa la advertencia de validación porque summary ya no es un atributo válido en <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>

✅ Solución 1: usar un elemento `<caption>`

Reemplaza el atributo summary con un <caption> como primer hijo de <table>. Esta es la solución más común y directa.

<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>

✅ Solución 2: usar `<figure>` y `<figcaption>`

Este enfoque es útil cuando quieres proporcionar una descripción más larga o cuando la tabla se referencia como una figura dentro del contenido 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>

✅ Solución 3: simplificar y confiar en encabezados claros

Para tablas simples donde los datos se explican por sí mismos, encabezados bien etiquetados con atributos scope pueden ser suficientes. No se necesita descripción 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>

También puedes combinar enfoques — usar un <caption> para un título breve y envolver la tabla en un <figure> con un <figcaption> para contexto adicional. La conclusión clave es eliminar el atributo summary y usar elementos HTML semánticos y visibles para describir tu tabla en su lugar.