th, scope y el elemento caption

Una verdadera tabla de datos muestra las relaciones entre filas y columnas. Si está bien marcada, los lectores de pantalla pueden anunciar a qué encabezado pertenece cada valor.

Si todas las celdas son simplemente td, un lector de pantalla leerá los números sin contexto. El usuario oirá los valores, pero nunca sabrá qué significan.

Cambie las celdas de encabezado de td a th. Ahora el navegador sabe que esas celdas etiquetan los datos, en lugar de contenerlos, y las expone como encabezados.

Un elemento th se anuncia como encabezado y puede vincularse con las celdas que describe. Ese vínculo es lo que da significado a los números aislados.

Añada scope a cada th para indicar qué celdas abarca. El valor es col para un encabezado de columna o row para un encabezado de fila.

Use scope=col en el encabezado situado en la parte superior de una columna. Cada celda que esté debajo heredará esa etiqueta a medida que el usuario avance.

Use scope=row en la primera celda de una fila cuando esta nombre dicha fila, como una persona o una fecha en el borde izquierdo.

El elemento caption proporciona un título a toda la tabla. Los usuarios de lectores de pantalla lo escuchan primero y saben qué están a punto de explorar.

Coloque caption como el primer hijo dentro de la tabla, justo después de la etiqueta de apertura. Cualquier otra posición no es válida y puede ignorarse.

Un h2 cercano no es suficiente. caption está vinculado a la tabla mediante programación, por lo que los usuarios descubren el título incluso al saltar de una tabla a otra.

caption, una fila de encabezados th con scope y, después, las filas de datos. Esta base hace que la mayoría de las tablas sencillas sean totalmente accesibles sin ARIA.

Ha aprendido los tres elementos de las tablas accesibles: th para los encabezados, scope para orientarlos y caption para dar nombre a la tabla. Con eso ya está hecha la mayor parte del trabajo.