Info Tabla sin caption o sin scope en los encabezados
Por qué las tablas de datos necesitan un <caption> y atributos scope en las celdas <th>, y qué hacen los lectores de pantalla sin ellos.
Esto cubre dos problemas de accesibilidad de tablas relacionados: una <table> sin ningún <caption> hijo (table-missing-caption), y una tabla que contiene celdas <th> donde ninguna lleva un atributo scope (table-th-missing-scope).
Ejemplo
<table>
<caption>Usuarios activos mensuales por región</caption>
<thead>
<tr>
<th scope="col">Región</th>
<th scope="col">Usuarios</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">UE</th>
<td>12.400</td>
</tr>
</tbody>
</table>Por qué importa
Un <caption> le da a una tabla un nombre accesible que un lector de pantalla anuncia antes de leer su contenido, de la misma forma en que un encabezado introduce una sección — sin uno, una tabla es solo una cuadrícula de celdas sin etiquetar, sin contexto sobre qué representa. scope="col" o scope="row" en un <th> le indica a la tecnología de asistencia qué celdas describe ese encabezado; los navegadores muchas veces pueden inferir esto correctamente en tablas simples, pero cualquier cosa con celdas combinadas, varias filas de encabezado o una estructura irregular necesita que se declare explícitamente, o la asociación de encabezados tiene que adivinarse.
Frequently asked questions
¿Necesito scope en cada <th>?
Solo lo suficiente para que un lector de pantalla pueda resolver cada celda de datos con su encabezado — en una tabla simple con una fila y/o columna de encabezado, scope en esas celdas de encabezado alcanza; esta revisión simplemente marca las tablas donde ninguna celda <th> lo tiene en absoluto.
¿<caption> es lo mismo que un encabezado arriba de la tabla?
No — un encabezado antes de una <table> no está asociado programáticamente con ella, así que un usuario de lector de pantalla que navega celda por celda no tiene forma de escucharlo. <caption> está dentro de la tabla misma y queda explícitamente vinculado a ella por la especificación HTML.