Does a Simple Data Table Need to Expose Row and Column Headers?

Background

A question gets asked sometimes, "Do both row and column headers in a simple data table need to be identified as header cells?" This is not a rhetorical question. So
here is my answer: Yes, a simple data table must have both row and column headers marked
up. There are perhaps very specific instances when this is not the case. For example,

  • A calendar grid typically has a row containing days of week (column headers) and no
    row header column.
  • In a two-column data table with name->value pairs, the first column contains row
    headers. These cells need to be exposed as such. The table may be devoid of a column
    header row.

The smallness of a table with data itself being distinctly different in each column is
advanced as a reason for doing away with row headers even in a three-column table. In my
view this is not tenable.

Data table presents data relationships and offers functionality

WCAG 2.0 technique H51 aptly describes the essence of data table structure:

Information is considered tabular when logical relationships among text,
numbers, images, or other data exist in two dimensions (vertical and horizontal). These
relationships are represented in columns and rows, and the columns and rows must be
recognizable in order for the logical relationships to be perceived.

By its very nature, the two-dimensional representation permits functionality that is
not possible in content marked up as a list i.e. single dimension. In a table, visually
one can run down a column and also be imbibing referential data from an adjacent cell so
the content makes complete sense. A screen reader user can only perceive such key
referential data only if row header cells are exposed as headers.

In this context, SC 1.3.1 applies. Three normative definitions in WCAG 2.0 are also very
relevant:

relationships:
meaningful associations between distinct pieces of content
presentation:
rendering of the content in a form to be perceived by users
functionality:
processes and outcomes achievable through user action

How are Header Cells in a data table Exposed to Assistive Technology

WCAG 1.0, regarded as HTML-centric, had a Priority-1
checkpoint, namely, 5.1 that required row and column headers to be identified; this was
adopted by Section 508 (1194.22 paragraph g) as is.

Both row and column header cells in a simple data table should therefore be marked up
with the TH element. Else one may expose a cell as a header to assistive technology by
recourse to HTML technique H63
with the scope attribute. Note the test for H63 reads: "Check that all td elements
that act as headers for other elements have a scope attribute". (I
have bold-faced , "acts" for emphasis).

I believe, the guidance in HTML 4.01 in this regard is in line with reality and is still
relevant today even on HTML5 pages:

blockquoteNote that it’s not always possible to make a clean division of cells into headers
or data. You should use the TD element for such cells together with the id or scope
attributes as appropriate.

Marking up a TD cell with the scope attribute may fail HTML5 validation but that in
itself does not make it fail WCAG 2 SC 4.1.1. The HTML5 specs says the following about table markup:

Good table design is key to making tables more readable and usable. … In speech media, table cells can be distinguished by reporting the corresponding headers before reading the cell’s contents, and by allowing users to navigate the table in a grid fashion, rather than serializing the entire contents of the table in source order.

Leave a Reply

Your email address will not be published. Required fields are marked *