¿Cómo hago tablas de datos accesibles?

Las etiquetas <table> deben usarse para presentar datos tabulares (información organizada en filas y columnas lógicas), y no para maquetar el diseño de una página (una práctica obsoleta).

Elementos y atributos clave para tablas accesibles

1. <caption> (Título de la tabla):
   El elemento <caption> proporciona un título o descripción para la tabla. Debe ser el primer elemento hijo de la etiqueta <table>. Un buen <caption> ayuda a los usuarios a entender el contexto y el propósito de la tabla antes de examinar sus datos. HTML<table> <caption>Ventas mensuales por región - Q1 2025</caption> </table>
2. Estructura de la tabla: <thead>, <tbody> y <tfoot>:
   Estos elementos agrupan semánticamente las diferentes partes de una tabla:
   • <thead>: Contiene las filas de encabezado de la tabla (generalmente una o más filas <tr> con celdas <th>).
   • <tbody>: Contiene las filas con los datos principales del cuerpo de la tabla (filas <tr> con celdas <td> y a veces <th> para encabezados de fila).
   • <tfoot>: (Opcional) Contiene las filas de pie de tabla, que podrían usarse para sumarios o totales. Usar estos elementos no solo mejora la semántica, sino que también permite a los navegadores, por ejemplo, repetir los encabezados (<thead>) si la tabla se imprime en varias páginas o mantenerlos visibles mientras se desplaza por un <tbody> largo.
3. Celdas de Encabezado (<th>) y el Atributo scope:
   • Utiliza la etiqueta <th> (table header) para todas las celdas que actúan como encabezados, ya sea para una columna o para una fila. Los navegadores suelen mostrar el texto de <th> en negrita y centrado por defecto.El atributo scope en un elemento <th> es crucial para la accesibilidad. Define explícitamente a qué celdas se aplica ese encabezado:
     • scope="col": El encabezado se aplica a todas las celdas de esa columna.scope="row": El encabezado se aplica a todas las celdas de esa fila.scope="colgroup": El encabezado se aplica a un grupo de columnas (definido con <colgroup>).scope="rowgroup": El encabezado se aplica a un grupo de filas (implícito con <thead>, <tbody>, <tfoot>).
   <table> <caption>Horario de Clases</caption>
<thead>
<tr>
<th scope="col">Hora</th> <th scope="col">Lunes</th>
<th scope="col">Martes</th> <th scope="col">Miércoles</th>
</tr>
</thead>
<tbody>
<tr> <th scope="row">09:00 - 10:00</th>
<td>Matemáticas</td>
<td>Historia</td>
<td>Matemáticas</td>
</tr>
<tr>
<th scope="row">10:00 - 11:00</th>
<td>Lengua</td>
<td>Física</td>
<td>Lengua</td>
</tr>
</tbody>
</table>
   El atributo scope permite a los lectores de pantalla asociar correctamente las celdas de datos (<td>) con sus encabezados (<th>), de modo que cuando un usuario navega a una celda de datos, el lector de pantalla puede anunciar los encabezados correspondientes, proporcionando el contexto necesario.
4. Para tablas complejas (atributos id y headers):
   Si una tabla tiene una estructura más compleja (por ejemplo, celdas de encabezado que abarcan múltiples filas o columnas, o varios niveles de encabezados), el atributo scope puede no ser suficiente para definir todas las relaciones. En estos casos más avanzados:
   • Asigna un atributo id único a cada celda <th> relevante.En cada celda de datos <td>, utiliza el atributo headers, cuyo valor es una lista de los id de las celdas <th> que se aplican a esa celda <td>, separados por espacios.
   HTML<th id="h_nombre">Nombre</th> <td headers="h_nombre">Ana</td> Este método requiere más trabajo pero es esencial para la accesibilidad de tablas realmente complejas.
5. Simplicidad en el diseño:
   Intenta que tus tablas de datos sean lo más simples posible. Evita el uso innecesario de celdas combinadas (colspan y rowspan) si complican la comprensión de la estructura, especialmente para los usuarios de tecnologías de asistencia. Si las usas, asegúrate de que las asociaciones de encabezado (con scope o id/headers) sigan siendo claras y precisas.

Al seguir estas pautas, te aseguras de que la información presentada en tus tablas sea accesible y comprensible para una audiencia más amplia, incluyendo aquellos que dependen de tecnologías de asistencia para navegar por la web.