Data table incorrectly using elements and roles

Test Case Summary

Test Case ID

TC12.1-4-fail-6

Test Case Description

Data tables that are defined using the ARIA role="grid" is not making use of the native <table> element and structure and also not appropriately assigning role="column/rowheader". Each column header must have role="columnheader" and each row header must have role="rowheader". This table in the sample code uses ARIA role="grid" and doesn’t have the role assigned correctly.

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 role assigned and does not use the native table element.

Test Data

Single-Page URL

https://section508coordinators.github.io/baselinealignment/testfiles/TF12/12.1-4-fail-6.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 using the ARIA `role="grid"` does not have every column header assigned using `role="columnheader"`.
Result	If any of the above checks fail, then Baseline Test 12.1-DataTable fails.	12.1-4 check fails.