Fallo común WCAG 2.2

F91Tablas de datos cuyas cabeceras no están marcadas como tales

Nombre oficial en el W3C: Fallo del criterio de conformidad 1.3.1 debido a no marcar correctamente los encabezados de tabla

En pocas palabras

Este error se da cuando una tabla de datos pone sus cabeceras en celdas normales (td), quizá en negrita o con otro color. Se ven como cabeceras, pero el código no lo dice. El lector de pantalla no puede leer la cabecera de cada dato. Las cabeceras deben marcarse con th u otro método reconocido.

Por qué es importante

Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) permite moverse celda a celda. Al cambiar de columna o de fila, lee la cabecera para dar contexto: «Martes, 10:00, Libre».

Si las cabeceras son celdas td con estilo, el lector solo dice «Libre». La persona tiene que memorizar la tabla entera para saber a qué día y hora corresponde cada dato. En un horario de cita previa o una tabla de tarifas, eso la hace casi inútil.

Cómo evitarlo

Marque cada celda de cabecera con <th>, no con <td> en negrita.
Añada scope="col" a las cabeceras de columna y scope="row" a las de fila, sobre todo si la tabla tiene ambas.
En tablas con varios niveles de cabecera, relacione celdas y cabeceras con headers e id.
Si la tabla está hecha con div y ARIA, use los roles columnheader y rowheader.
Dé el aspecto visual con CSS, no cambiando el tipo de celda.

Cómo comprobarlo

Localice las tablas de datos de la página.
Abra las herramientas del navegador (F12) e inspeccione las celdas que parecen cabeceras. Deben ser th o tener el role columnheader o rowheader.
Con NVDA, sitúese en la tabla y muévase con Ctrl+Alt+flechas. Al cambiar de columna o fila, debe oír la cabecera.
Herramientas como WAVE avisan de las tablas de datos sin cabeceras.

Ejemplo

La primera fila parece una cabecera, pero solo la segunda versión lo indica en el código.

<!-- Incorrecto: celdas normales en negrita -->
<tr>
  <td><b>Día</b></td>
  <td><b>Horario</b></td>
</tr>

<!-- Correcto -->
<tr>
  <th scope="col">Día</th>
  <th scope="col">Horario</th>
</tr>

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 F91 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

Este fallo se produce cuando las tablas de datos no usan elementos de encabezado (th) u otro marcado de tabla adecuado (el atributo scope, headers e id, o las funciones ARIA columnheader y rowheader) para que los encabezados sean determinables por software desde el contenido de la tabla. Hacer que los encabezados sean determinables por software es especialmente importante cuando las celdas de datos solo resultan inteligibles junto con la información del encabezado. Cuando los usuarios de lectores de pantalla navegan por el contenido de la tabla en horizontal o en vertical, los encabezados que cambian pueden leerse en voz alta para proporcionar el contexto necesario a la información de las celdas de datos.

Ejemplos

Encabezados no marcados adecuadamente

Esta tabla no usa th (ni otro marcado de encabezado adecuado) para los encabezados. En su lugar, usa elementos td para todas las celdas. Al navegar celda por celda, los lectores de pantalla a menudo no leerán las celdas de encabezado asociadas al contenido.

Código de ejemplo:

<table>
  <tr>
    <td>Name</td>
    <td>Age</td>
    <td>Height (cm)</td>
    <td>Weight (kg)</td>
  </tr>
  <tr>
    <td>Linda</td>
    <td>33</td>
    <td>169</td>
    <td>59</td>
  </tr>   
  <tr>
    <td>Jack</td>
    <td>37</td>
    <td>184</td>
    <td>74</td>
  </tr>    
  <tr>
    <td>Kira</td>
    <td>8</td>
    <td>120</td>
    <td>21</td>
  </tr>
  <tr>
    <td>Daniel</td>
    <td>3</td>
    <td>79</td>
    <td>14</td>
  </tr>  
</table>

Ver el ejemplo 1 (se abre en la misma ventana del navegador)

Pruebas

Procedimiento

Para todas las tablas de datos, comprobar si los encabezados de la tabla pueden determinarse correctamente por software mediante uno de los siguientes mecanismos:

encabezados marcados con elementos de encabezado de tabla (th);
atributos scope en los th en tablas con más de una fila o columna de encabezados;
encabezados y celdas de datos asociados mediante los atributos headers e id;
encabezados marcados con los atributos de función ARIA rowheader o columnheader.

Resultados esperados

Si todas las comprobaciones son falsas, se da esta condición de fallo y el contenido falla el criterio de conformidad.

Cómo lo comprobamos en ADDAW

Este error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.

Solicitar una auditoría

Basado en la técnica F91 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.