table-th-has-data-cells
Los elementos <th> deben describir al menos una celda de datos
Comprueba que una tabla que contiene elementos <th> también contiene al menos una celda de datos <td> que esos encabezados puedan describir.
Ámbito de aplicación. Se aplica a los elementos <table> que conservan su semántica de tabla y están incluidos en el árbol de accesibilidad, y que contienen al menos un <th> que sea visible, esté incluido en el árbol de accesibilidad, y no esté sustituido por un atributo role explícito distinto de rowheader/columnheader. También se aplica al equivalente implementado únicamente mediante ARIA: un elemento cuyo rol se resuelve en grid/treegrid (sin ningún <table> nativo implicado) que contiene al menos un elemento con rol columnheader/rowheader dentro de alcance. Los roles se resuelven como lo hacen los agentes de usuario: el primer token del atributo role que nombra un rol conocido, sin distinguir mayúsculas de minúsculas; un atributo role sin ningún token conocido mantiene el rol implícito. En la forma solo ARIA, un elemento personalizado cuyos ElementInternals le dan el rol grid, treegrid, header o cell (this.attachInternals().role), sin un atributo role que nombre otro, cuenta como uno que tiene ese atributo role.
Resultado esperado. La tabla también contiene al menos un <td> en algún lugar de ella y, en una tabla sin colspan ni rowspan (o un grid sin aria-colspan, aria-rowspan ni aria-colindex), cada celda de cabecera tiene una celda de datos asignada según el modelo de tablas de HTML: una posterior en su columna o fila, según lo permita su scope, sin atributo headers, o una cuyo atributo headers la nombra.
Qué informa un hallazgo.
row,column: dónde está una cabecera sin asignar, contando desde 0: las filas desde arriba, las celdas desde la izquierda dentro de la fila.
Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.
Ejemplos
<table><tr><th>Name</th></tr><tr><td>Apple</td></tr></table>
La tabla tiene al menos un <td> que el <th> pueda encabezar.
<table><tr><th>Name</th></tr></table>
La tabla tiene un <th> pero ningún <td> en ningún lugar.
Cómo comprobarlo
Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.
TABLE_TH_NO_ASSIGNED_CELL
- Localizar la celda de encabezado que indica el informe (se dan su fila y su columna, contando desde 0).
- Observar las celdas que hay debajo en su columna, o a continuación en su fila, según indique su scope.
- Decidir si el encabezado está pensado para etiquetar datos: si faltan las celdas que debería encabezar, o están marcadas como encabezados, no etiqueta nada.
- Si dispone de un lector de pantalla, recorrer las celdas de datos de la tabla y anotar si este encabezado se anuncia alguna vez.
Se cumple. El encabezado no está pensado para etiquetar datos (puede ser una celda normal), o los datos que encabeza están marcados de modo que se le asigna el encabezado.
No se cumple. Un encabezado que debería etiquetar datos no tiene celdas de datos asignadas, así que su relación no se transmite, lo que incumple WCAG 1.3.1.