Técnica HTML WCAG 2.2

H51Marcar las tablas de datos con table, th y td

Nombre oficial en el W3C: Usar marcado de tabla para presentar información tabular

En pocas palabras

Cuando la información se organiza en filas y columnas, hay que marcarla como una tabla de HTML. Se usa table para la tabla, tr para cada fila, th para los encabezados y td para los datos. Así el lector de pantalla puede decir a qué fila y a qué columna pertenece cada dato.

Por qué es importante

Quien ve la tabla relaciona cada dato con su fila y su columna de un vistazo. Quien usa un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) necesita que esa relación esté en el código.

Si las columnas se imitan con espacios, tabuladores, <pre> o cajas div colocadas con CSS, el lector lee los datos seguidos y sin orden. Pasa lo mismo al ampliar mucho el texto o al ver la página en el móvil: el aspecto de tabla se rompe y los datos pierden su sentido.

Cómo se hace

Use <table> cuando los datos tengan sentido en dos direcciones: horarios, tarifas, resultados de una convocatoria.
Marque cada fila con <tr>.
Ponga los encabezados en <th>: los de columna en la primera fila y, si los hay, los de fila en la primera columna.
Ponga los datos en <td>.
Dé un título a la tabla con <caption>, por ejemplo «Horario de atención por oficina».
No use tablas solo para colocar elementos en la página. Para eso está CSS.

Cómo comprobarlo

Localice en la página la información que se presenta en filas y columnas.
Con las herramientas del navegador (F12), compruebe que está dentro de un <table>. No debe estar hecha con div, espacios o <pre>.
Compruebe que los encabezados son <th> y los datos son <td>.
Con un lector de pantalla, recorra la tabla celda a celda (en NVDA, Ctrl+Alt+flechas). Debe anunciar el encabezado de cada dato.

Ejemplo

Las tarifas de una piscina municipal marcadas como tabla, con encabezados de columna y de fila.

<table>
  <caption>Precio de la entrada a la piscina municipal</caption>
  <tr><th>Entrada</th><th>Laborables</th><th>Fines de semana</th></tr>
  <tr><th>Adulto</th><td>3 €</td><td>4 €</td></tr>
  <tr><th>Infantil</th><td>1,50 €</td><td>2 €</td></tr>
</table>

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica H51 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

HTML

Descripción

El objetivo de esta técnica es presentar la información tabular de un modo que conserve las relaciones existentes dentro de la información, incluso cuando los usuarios no pueden ver la tabla o se cambia el formato de presentación. La información se considera tabular cuando existen relaciones lógicas entre texto, números, imágenes u otros datos en dos dimensiones (vertical y horizontal). Estas relaciones se representan mediante columnas y filas, y las columnas y las filas deben ser reconocibles para que las relaciones lógicas puedan percibirse.

El uso del elemento table con los elementos hijos tr, th y td hace que estas relaciones sean perceptibles. Técnicas como insertar tabulaciones para crear columnas o usar el elemento pre son puramente visuales, y las relaciones lógicas que solo se sugieren visualmente se pierden si el usuario no puede ver la tabla o si se cambia la presentación visual.

Las tablas simples suelen tener un solo nivel de encabezados para las columnas y/o un solo nivel de encabezados en las filas.

Normalmente, en las tablas simples, la celda de la fila 1, columna 1 está vacía o describe el contenido de toda la columna 1. Las celdas de la fila 1 no están vacías (es decir, contienen «encabezados de columna»), describen el contenido de toda la columna y permiten al lector distinguir la diferencia de significado entre esa columna y las demás.

Las celdas de la columna 1 normalmente no están vacías; suelen contener «encabezados de fila» que describen el contenido de toda la fila y permiten al lector distinguir la diferencia de significado entre esa fila y las demás. En caso contrario, la columna 1 contendría simplemente datos.

Ejemplos

Un horario marcado como tabla de datos simple con encabezados de columna y de fila

Este ejemplo usa marcado para una tabla de datos simple. La primera fila muestra los días de la semana. Los intervalos de tiempo se muestran en la primera columna. Estas celdas están marcadas con el elemento th. Esto identifica los días de la semana como encabezados de columna y los intervalos de tiempo como encabezados de fila.

Los lectores de pantalla leen la información de encabezado que va cambiando a medida que el usuario se desplaza por la tabla. Así, cuando los usuarios de lector de pantalla se mueven a izquierda o derecha a lo largo de una fila, oirán el día de la semana (el encabezado de columna) seguido de la cita (si la hay). Oirán el intervalo de tiempo cuando se muevan hacia arriba o hacia abajo dentro de la misma columna.

<table>
  <tr>
    <th>Time</th>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
  </tr>
  <tr>
    <th scope="row">8:00-9:00</th>
    <td>Meet with Sam</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th scope="row">9:00-10:00</th>
    <td></td>
    <td></td>
    <td>Doctor Williams</td>
    <td>Sam again</td>
    <td>Leave for San Antonio</td>
  </tr>
</table>

Pruebas

Procedimiento

Comprobar si existe información tabular.
Para cada aparición de información tabular:
1. Comprobar que se usa marcado de tabla con, al menos, los elementos table, tr, th y td.

Resultados esperados

Todas las comprobaciones anteriores son verdaderas.

Recursos

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica H51 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.