Data table with scope attribute defined but insufficient

Test Case Summary

Test Case ID

TC12.1-4-fail-3

Test Case Description

The <th> element defines a table header. For any HTML <table>, data cells can be associated to a header cell either by applying the correct scope value to a table header or by including the header cell’s unique id value in <td headers>. In complex tables, however, scope can be insufficient to reflect all header and data cell relationships and/or can create confusion when headers overlap. In such cases, 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. Therefore, a scope attribute by itself, without an id element, will not clearly define the cell-header relationships. This table in the sample code includes a complex data table with scope attributes defined, but insufficient to adequately define correct cell-header relationships.

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 valid scope attributes defined, but they are insufficient by themselves to correctly define cell-header relationships.

Test Data

Single-Page URL

https://section508coordinators.github.io/baselinealignment/testfiles/TF12/12.1-4-fail-3.html

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 scope attributes defined, but scope alone is insuffient.
Result	If any of the above checks fail, then Baseline Test 12.1-DataTable fails.	12.1-4 check fails.