Data table with no <th> elements
Test Case Summary
Test Case ID
TC12.1-4-fail-1
Test Case Description
The <th> element defines a table header. When there are no <th> elements, it is confusing what the column is representing. Table in the sample code includes a data table where there are no <th> elements.
Applicable ICT Baseline Test
12.1 Test Procedure for Data Tables
Baseline Test ID: 12.1-DataTable
Test Instruction: 4
Test Case Detail
Expected Baseline Result
FAIL
The table fails the baseline test because the data tables do not have header cells, <th>.
Test Data
Single-Page URL
Embedded Code
Code
Test Case Instruction
| Test Instruction | Instruction Detail | Expected Test Case Result |
|---|---|---|
| IC-1 | All content/data visually presented in a table with column and/or row headers where the content is not in a meaningful sequence when linearized. (Note: Linearization of table content is the presentation of a table’s two-dimensional content in one-dimensional order of the content in the source, beginning with the first cell in the first row and ending with the last cell in the last row, from left to right, top to bottom.) | One <table> exists in the test data code sample. |
| 12.1-1 | Table: Check that each data table has programmatic markup to identify it as a table using one of the following techniques [SC 1.3.1]: HTML <table>; ARIA role="table"; ARIA role="grid" |
Pass: The table is contained in a <table> element. |
| 12.1-2 | Check that the data <table> element DOES NOT have role="presentation" or role="none". [SC 1.3.1] |
Pass: The data <table> element does not have role="none" nor role="presentation". |
| 12.1-3 | Check that each data cell uses only one of the following methods to identify it as a data cell within a table row depending on the technique identified in the first step [SC 1.3.1]: For HTML <table>: <td> for the cell, which must be within a <tr>; row.; For ARIA role="table": ARIA role="cell", which must be within an ARIA role="row".; For ARIA role=”grid”: ARIA role="gridcell", which must be within an ARIA role="row" (if the ARIA grid is not making use of the native HTML <table> element and structure). |
Pass: The data table does not have overlapping ARIA and structural semantics: The <td> cells do not include role="cell". |
| 12.1-4 | Check that all data cells are programmatically associated with relevant headers using one of the following techniques [SC 1.3.1]: For a simple HTML <table>, with all headers in the first row OR column, each header cell can be marked up with <th> without additional attributes.; For any HTML <table>, header cells can be marked up with scope if all data cells that follow the header belong to the header. In HTML4, <td scope> is supported. In HTML5, <td scope> is not supported so all header cells must be <th>. Acceptable values for scope are col|row|colgroup|rowgroup. The scope only applies to cells that occur after the header cell(s) in the reading order.; For any HTML <table>, data cells can be associated to a header cell by including the header cell’s unique id value in <td headers>.; For any HTML <table> that uses BOTH scope AND refers to header IDs using <td headers> attributes in the same table, any data cell with a headers reference will override any scope attributes for associated table headers for that particular data cell. Therefore, data cells with a headers reference, must identify all relevant headers, independent from and regardless of scope attributes in associated headers.; For ARIA role="table": each column header must have role="columnheader" and each row header must have role="rowheader".; For ARIA role="grid": each column header must have role="columnheader" and each row header must have role="rowheader" (if the ARIA grid is not making use of the native HTML <table> element and structure). |
Fail: The data table does not have <th> elements. |
| Result | If any of the above checks fail, then Baseline Test 12.1-DataTable fails. | 12.1-4 check fails. |