Encabezados de tabla

Silktide comprueba que las tablas que presentan datos definan celdas de encabezado. Los encabezados indican a las personas que usan qué significa cada fila y cada columna, algo que las personas videntes infieren por el diseño de la tabla.

Considera una tabla de apellidos y ciudades. Sin una fila de encabezado, un valor como "Washington" podría ser cualquiera de las dos cosas: el significado solo queda claro cuando las columnas están etiquetadas.

<!-- Problema: los encabezados son celdas normales, así que no aportan significado -->
<table>
  <tr>
    <td>Apellido</td>
    <td>Ciudad</td>
  </tr>
  <tr>
    <td>Washington</td>
    <td>Londres</td>
  </tr>
</table>

Por qué es importante

Un se desplaza por una tabla celda a celda. Cuando los encabezados están definidos, puede anunciar el encabezado pertinente junto a cada valor, de modo que "Londres" se lee como "Ciudad: Londres". Sin encabezados, la persona oyente escucha una secuencia desnuda de valores y tiene que memorizar la distribución de la tabla para entenderla; y en tablas grandes eso es prácticamente imposible.

Hacer que la fila superior esté en negrita o de un color diferente no es suficiente. El estilo visual no aporta significado para las tecnologías de apoyo; solo lo hace el subyacente.

Cómo solucionarlo

Cambia cada celda de encabezado de <td> a <th> y añade un atributo scope que indique si encabeza una columna o una fila:

<!-- Solución: los encabezados son verdaderas celdas de cabecera -->
<table>
  <tr>
    <th scope="col">Apellido</th>
    <th scope="col">Ciudad</th>
  </tr>
  <tr>
    <td>Washington</td>
    <td>Londres</td>
  </tr>
</table>

Si la tabla no presenta datos y solo se usa para organizar visualmente la página, añade role="presentation" al elemento <table> para que las tecnologías de apoyo ignoren su estructura. Aún mejor, sustituye las tablas de maquetación por CSS: están firmemente desaconsejadas en el diseño web moderno.

Cómo lo comprueba Silktide

Encontrar todas las tablas de cada página.
Omitir las tablas marcadas como de presentación con role="presentation".
Omitir las tablas con solo una fila o solo una columna, que probablemente no sean tablas de datos.
Informar de cada tabla restante que no contenga ninguna celda de encabezado <th>.

Solución de problemas

Mi tabla tiene encabezados, pero son celdas `<td>` con estilo

Las celdas que solo parecen encabezados no cuentan. Las tecnologías de apoyo no perciben tipografías ni colores; convierte las celdas a <th>.

Mi tabla de maquetación aparece marcada

Silktide solo omite las tablas de maquetación que declaran role="presentation". Si una tabla es realmente de presentación, añade ese atributo, o sustituye la tabla por una maquetación con CSS.