Data Tables Do Not Always Need Markup for Header Cells?

Data Tables Do Not Always Need Markup for Header Cells?

In a recent thread my attention was drawn to a statement in the HTML5 specs that suggests some data tables may not need any markup for header cells after all. The line reads: “Observe the lack of headers, which are not necessary in such a table” with reference to the sample sudoku puzzle markup [1]. Here is the table:

Only by reviewing the code one can see blocks of 3 rows and 3 columns within the 9×9 grid … this is created by using colgroup and tbody and demarcating them with distinguishable borders. With no markup for column / row header cells or a description (like a summary), a non sighted user cannot figure out what this table portrays. The screen reader will of course announce the cell’s coordinates as it does for any table but that’s insufficient for comprehending and navigating the data table meaningfully using today’s screen readers. The WCAG-WG thread, “Failure to provide role=presentation on a layout table” suggests this table or grid should be within a form [2]. All cells should have a title or aria-label. Pre-filled cells may be ‘readonly’ with the label indicating this while the other cells are editable. And surely the grid will benefit with a description (using ARIA, for instance) that indicates that rows and columns are organized into blocks. The table should not have role=”presentation” … thereby enabling users to navigate the grid using table navigation when they choose to. A crossword puzzle is similar. Borth are essentially interactive components and are meant to be well, for lack of a better term, “consumed” by users as such. When rendering the solution for a puzzle, all cells should be readonly.

Conclusion:

That statement in the HTML5 specs that suggests some data tables do not need any header markup is ominous. I believe this will encourage content authors / developers to take liberties while marking up any data table and simply say they believe the table does not need any row/column header markup or caption/summary etc and point to this puzzle as an example.

Reference:

1. 4.9 Tabular data- HTML5
2. WCAG-ISSUE-23 (DavidMacD): We should consider a new “Failure to provide role=presentation on a layout table”
   • by Jonathan Avila
   • by Sailesh Panchang

Classical sudoku puzzle

… It’s a grid 9 squares wide and 9 squares deep. The grid is further divided by the darker lines into nine 3 X 3 square ‘boxes … from Wikipedia