Simple Table Tests
Test 1: Row & Column Headers
Name |
Age |
Sex |
Race |
Doe, John |
20 |
Male |
White |
Doe, Jane |
30 |
Female |
Black |
Doe, Jack |
40 |
Male |
Asian |
Test 2: No Row Headers
Name |
Age |
Sex |
Race |
Doe, John |
20 |
Male |
White |
Doe, Jane |
30 |
Female |
Black |
Doe, Jack |
40 |
Male |
Asian |
Test 3: No Column Headers
Name |
Doe, John |
Doe, Jane |
Doe, Jack |
Age |
20 |
30 |
40 |
Sex |
Male |
Female |
Male |
Race |
White |
Black |
Asian |
Test 4: Two Columns
Name |
Doe, John |
Age |
20 |
Sex |
Male |
Race |
White |
Test 5: No Headers
Name |
Age |
Sex |
Race |
Doe, John |
20 |
Male |
White |
Doe, Jane |
30 |
Female |
Black |
Doe, Jack |
40 |
Male |
Asian |
Notes
Tests 1-4 pass HTML Validation, FAE, WAVE, AChecker and Tenon.io (except that AChecker incorrectly reports that Test 1 requires id and headers attributes). As expected, Test 5 doesn't pass FAE or Tenon.io, and WAVE indicates it is a layout table. (AChecker misses this error.)
In tests 2-5, JAWS (15) does not read row/column headers that are not marked up when using table reading commands.
Are all of these "accessible"?
References (emphasis added)
- WCAG 1.0 5.1 For data tables, identify row and column headers. (But the supporting example is a table without row headers.)
- Section 508 (g) Row and column headers shall be identified for data tables. (Supporting example uses <td scope="row"> for row headers.)
- WCAG 2.0 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
- Sufficient Technique H51: Using table markup to present tabular information:
Information is considered tabular when logical relationships among text, numbers, images, or other data exist in two dimensions (vertical and horizontal)....
Simple tables generally have only one level of headers for columns and/or one level of headers on the rows....
Usually, for simple tables... Row 1 columns are not blank (i.e. they contain "column headings"), describe the contents of the entire column, and allow the reader to distinguish the difference in meaning between that column and other columns....
Column 1 rows are usually not blank, they often contain "row headings" which describe the contents of the entire row, and allow the reader to distinguish the difference in meaning between that row and the other rows. Otherwise, the Column 1 would contain simple data.
- Web Accessibility Tutorials: Tables with one header
...This is only acceptable because it is such a small table and the data itself is distinctly different in each column, so that the relationship between the header and data cells is evident....