Fallo común WCAG 2.2

F90Tablas complejas con headers e id mal relacionados

Nombre oficial en el W3C: Fallo del criterio de conformidad 1.3.1 debido a asociar incorrectamente los encabezados de tabla y el contenido mediante los atributos headers e id

En pocas palabras

En las tablas complejas, cada celda de datos puede indicar sus encabezados con el atributo headers, que apunta a los id de esas cabeceras. El error aparece cuando esas referencias están mal: apuntan a otra cabecera, a un id que no existe o están cruzadas. El lector de pantalla lee entonces encabezados equivocados.

Por qué es importante

En una tabla con varios niveles de cabecera, el lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) lee los encabezados de cada celda. Así la persona sabe qué significa cada dato.

Si los atributos headers e id están mal, el lector da información falsa. Por ejemplo, puede decir que una nota es de «Exámenes» cuando en realidad es de «Prácticas». La persona que ve la tabla no nota nada raro, pero quien la escucha entiende otra cosa.

Suele pasar al copiar y pegar filas o columnas sin actualizar los valores.

Cómo evitarlo

Dé a cada celda de cabecera (th) un id único y que se entienda, como id="examenes".
En cada celda de datos, ponga en headers todos los id de sus cabeceras, separados por espacios: la de la fila y las de cada nivel de columna.
Después de copiar filas o columnas, revise que los valores de headers siguen siendo correctos.
Si la tabla es sencilla (una fila y una columna de cabeceras), no use headers: basta con th y scope.
Si puede, divida una tabla muy compleja en varias más simples.

Cómo comprobarlo

Busque en el código las tablas que usan el atributo headers.
Para varias celdas de cada columna, compruebe que cada valor de headers coincide con el id de la cabecera que se ve encima y a su lado.
Compruebe que no hay id repetidos ni referencias a id que no existen. Un validador HTML ayuda con esto.
Recorra la tabla con NVDA (Ctrl+Alt+flechas) y escuche si los encabezados anunciados son los correctos.

Ejemplo

La celda de la nota de prácticas debe apuntar a «Prácticas», no a «Exámenes».

<th id="examenes" colspan="2">Exámenes</th>
<th id="practicas" colspan="2">Prácticas</th>
...
<th id="ana">Ana</th>
<!-- Incorrecto: apunta a Exámenes -->
<td headers="ana examenes p1">8</td>
<!-- Correcto -->
<td headers="ana practicas p1">8</td>

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

Una de las formas que tienen los autores de asociar explícitamente las celdas de encabezado con las celdas de datos es usar los atributos id y headers. Estos permiten al autor asociar varias celdas de encabezado a una celda de datos concreta, lo que puede ser necesario cuando se usan tablas de datos complejas con más de un nivel de encabezado.

El fallo se produce cuando la relación entre las celdas de datos y sus celdas de encabezado correspondientes no puede determinarse correctamente por software porque la asociación de los atributos id y headers es defectuosa. Esto puede ocurrir, por ejemplo, al copiar código dentro de las tablas y olvidarse de actualizarlo.

Ejemplos

Nota: el ejemplo siguiente se basa en la tabla de datos compleja presentada como ejemplo 1 de la técnica H43: Usar los atributos id y headers para asociar las celdas de datos con las celdas de encabezado en tablas de datos.

Contenido de la tabla no asociado correctamente a encabezados anidados

En este ejemplo se usan encabezados anidados, pero las celdas de contenido están asociadas incorrectamente mediante los atributos id y headers. Todas las celdas hacen referencia al encabezado de nivel superior «Exams» (exámenes, id="e"), lo que no es correcto para las tres últimas columnas, que deberían hacer referencia al encabezado «Projects» (proyectos). Además, las referencias a los encabezados de columna de segundo nivel se han intercambiado por descuido, aunque en este ejemplo eso no supone ninguna diferencia porque los contenidos (1, 2, Final) se repiten.

Código de ejemplo:

<table>
  <tr>
    <th rowspan="2" id="h">Homework</th>
    <th colspan="3" id="e">Exams</th>
    <th colspan="3" id="p">Projects</th>
  </tr>
  <tr>
    <th id="e1" headers="e">1</th>
    <th id="e2" headers="e">2</th>
    <th id="ef" headers="e">Final</th>
    <th id="p1" headers="p">1</th>
    <th id="p2" headers="p">2</th>
    <th id="pf" headers="p">Final</th>
  </tr>
  <tr>
    <td headers="h">15%</td>       
    <td headers="e p1">15%</td>  <!-- should be "e e1" -->
    <td headers="e p2">15%</td>  <!-- should be "e e2" -->
    <td headers="e pf">20%</td>  <!-- should be "e ef" -->
    <td headers="e e1">10%</td>  <!-- should be "p p1" -->
    <td headers="e e2">10%</td>  <!-- should be "p p2" -->
    <td headers="e ef">15%</td>  <!-- should be "p pf" -->
  </tr>
</table>

Ejemplo de fallo de una tabla que asocia incorrectamente los atributos headers del contenido de la tabla (td) con los encabezados de la tabla (th).

Pruebas

Procedimiento

En las tablas que asocian las celdas de datos con las celdas de encabezado mediante los atributos id y headers, comprobar que la asociación por software es correcta.

Resultados esperados

Si la comprobación n.º 1 es falsa, 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 F90 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.