HTML Academy · Lección

Accesibilidad de tablas: scope, summary y caption

Añada leyendas y atributos scope para facilitar la navegación con lectores de pantalla.

Accesibilidad de tablas: scope, summary y caption es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

Por qué es importante la accesibilidad de las tablas

Los usuarios de lectores de pantalla navegan por las tablas de datos celda a celda; necesitan el contexto del encabezado para cada celda de datos que leen.

Sin un marcado adecuado, los lectores de pantalla solo leen valores sin contexto de columna o fila
Las tablas accesibles hacen que los datos sean comprensibles para todos

El elemento caption

<caption> proporciona un título visible para la tabla:

<table>
  <caption>Q4 2024 Product Sales by Region</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>
<!-- caption is the first child of table -->
<!-- Screen readers announce it when entering the table -->
<!-- Helps all users understand the table's purpose at a glance -->

Aplicar estilos a caption

Aplique estilos y coloque caption con CSS:

caption {
  caption-side: bottom;  /* or top (default) */
  font-style: italic;
  font-size: 0.875rem;
  color: #666;
  text-align: left;
  padding: 0.5rem 0;
}

El atributo scope en th

El atributo scope indica a los lectores de pantalla a qué celdas se aplica un encabezado:

<thead>
  <tr>
    <th scope="col">Name</th>      <!-- header for a column -->
    <th scope="col">Score</th>
    <th scope="col">Grade</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Alice</th>    <!-- header for a row -->
    <td>95</td>
    <td>A</td>
  </tr>
</tbody>

Valores de scope

Valores del atributo scope:

col — el encabezado se aplica a las celdas de la misma columna
row — el encabezado se aplica a las celdas de la misma fila
colgroup — el encabezado se aplica a las celdas de un grupo de columnas
rowgroup — el encabezado se aplica a las celdas de un grupo de filas (tbody/thead)

scope para encabezados complejos

Los encabezados combinados utilizan el valor scope colgroup o rowgroup:

<thead>
  <tr>
    <th rowspan="2" scope="col">Name</th>
    <th colspan="2" scope="colgroup">2024</th>   <!-- colgroup -->
  </tr>
  <tr>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
  </tr>
</thead>

El atributo headers en td

Para tablas muy complejas, utilice headers para vincular explícitamente las celdas con sus encabezados:

<thead>
  <tr>
    <th id="hname">Name</th>
    <th id="hq1">Q1</th>
    <th id="hq2">Q2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th id="ralice" headers="hname">Alice</th>
    <td headers="hq1 ralice">95</td>
    <td headers="hq2 ralice">88</td>
  </tr>
</tbody>

Cuándo utilizar scope o headers

Directrices:

Tablas sencillas con encabezados en una sola fila → utilice scope="col" y scope="row"
Encabezados combinados complejos → utilice el atributo headers con referencias a ID
WCAG 1.3.1 exige que los encabezados de las tablas estén asociados mediante programación con sus celdas de datos

aria-label en table

Cuando no sea conveniente mostrar caption, utilice aria-label:

<!-- caption with visually-hidden class -->
<table aria-label="Q4 2024 Product Sales by Region">
  ...
</table>
<!-- Or use aria-labelledby to reference a heading -->
<h2 id="table-title">Sales Data</h2>
<table aria-labelledby="table-title">...</table>

Pruebas de accesibilidad de tablas

Cómo verificar que su tabla es accesible:

Utilice el panel Tables del lector de pantalla (VoiceOver, NVDA)
Instale la extensión del navegador axe DevTools
Ejecute la CLI de pa11y con la URL de su página
El validador de marcado del W3C detecta la ausencia de caption

Atributo summary (obsoleto)

El atributo summary se utilizaba para los lectores de pantalla en tablas complejas; ahora está obsoleto en HTML5:

<!-- Old HTML 4.01 — do not use: -->
<table summary="This table shows quarterly sales...">

<!-- Modern HTML5 replacement: -->
<table>
  <caption>This table shows quarterly sales...</caption>
</table>
<!-- Or: aria-describedby to a paragraph -->

Lista de comprobación para tablas accesibles

Lista de comprobación de accesibilidad para tablas de datos:

Utilice <caption> para etiquetar la tabla
Utilice <th> para todas las celdas de encabezado
Añada scope a todos los elementos <th>
Utilice <thead>, <tbody> y <tfoot> para estructurar la tabla
Para tablas complejas, utilice id + headers

Comprobación rápida

¿Qué valor de scope debe utilizar para un th que es el encabezado de toda una columna?

Repaso: accesibilidad de tablas

Aspectos esenciales de las tablas accesibles:

<caption> — título visible de la tabla que los lectores de pantalla anuncian
scope="col" — encabezado de columna
scope="row" — encabezado de fila
scope="colgroup/rowgroup" — encabezados combinados
id + headers — para encabezados complejos de varios niveles
Realice pruebas con axe, pa11y o VoiceOver

Preguntas frecuentes

¿La lección «Accesibilidad de tablas: scope, summary y caption» es gratis?

Sí — el texto completo de «Accesibilidad de tablas: scope, summary y caption» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Accesibilidad de tablas: scope, summary y caption»?

Añada leyendas y atributos scope para facilitar la navegación con lectores de pantalla. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Accesibilidad de tablas: scope, summary y caption»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

table, tr, td y th
Estructura thead, tbody y tfoot
colspan y rowspan para abarcar celdas
Accesibilidad de tablas: scope, summary y caption

← Volver a HTML Academy