empty-table-header

Las celdas de encabezado de tabla no deben estar vacías

Comprueba que las celdas de encabezado de tabla (<th>, o cualquier elemento con role="columnheader"/"rowheader") tengan contenido de texto visible. Un encabezado nombrado únicamente mediante aria-label/aria-labelledby también se marca, ya que el soporte real de lectores de pantalla/navegadores para eso es inconsistente.

Ámbito de aplicación. Se aplica a los elementos <th> que no tienen un rol explícito en conflicto, además de cualquier elemento (sea o no un <th> nativo) con role="columnheader" o role="rowheader" (`th:not([role]), [role="columnheader"], [role="rowheader"]`): un <th> que reafirma explícitamente role="columnheader"/"rowheader" sigue cubierto por la segunda cláusula, pero un <th role="presentation"> (que ya no es un encabezado) queda correctamente excluido, y un encabezado que solo existe por su rol ARIA (por ejemplo, un <div role="columnheader"> dentro de un widget role="grid"/role="table") también queda cubierto.

Resultado esperado. La celda de encabezado tiene contenido de texto visible. Un <th> nombrado únicamente mediante aria-label/aria-labelledby (sin texto visible) TAMBIÉN se marca, no se trata como equivalente: el soporte de aria-label en <th> es inconsistente en la práctica. NVDA+Firefox e iOS VoiceOver+Safari lo ignoran por completo (solo se anuncia el texto visible), JAWS+Chrome/IE11 también anuncian únicamente el texto visible de la propia celda de encabezado. El texto visible es el único mecanismo confirmado que funciona en todas las combinaciones probadas. Véase https://html5accessibility.com/stuff/2024/05/22/not-so-short-note-on-aria-label-usage-big-table-edition/.

Ejemplos

<table><tr><th></th></tr></table>

<table><tr><th>Name</th></tr></table>

Ver código fuente