Data table with incorrect id/header references

Test Case Summary

Test Case ID

TC12.1-4-fail-5

Test Case Description

Data cells must refer to the id(s) of all relevant header cells via the headers attribute in order for the row and column headers to be properly associated. The table in the sample code includes a complex data table with incorrent or incomplete id/header references.

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 table has incorrect or incomplete id/header references.

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 has a missing id/header reference.
Result If any of the above checks fail, then Baseline Test 12.1-DataTable fails. 12.1-4 check fails.