Simple table with `<th>` elements to denote headers

Test Case Summary

Test Case ID

TC12.1-all-pass-1

Test Case Description

For simple tables using a native html <table> element, <th> elements are suffient to denote cell and table header relationships. Simple tables are either tables with only one row of column headers or with only one column of row headers (but usually not both). The code sample includes a simple table with only one row of column headers denoted using <th> elements. The code sample should PASS the baseline test for Data Tables.

Applicable ICT Baseline Test

12.1 Test Procedure for Data Tables

Baseline Test ID: 12.1-DataTable

Test Instruction: All

Test Case Detail

Expected Baseline Result

PASS

The code sample includes a simple table with only one row of column headers denoted using <th> elements. The code sample should PASS the baseline test for Data Tables.

Test Data

Single-Page URL

https://section508coordinators.github.io/baselinealignment/testfiles/TF12/12.1-all-pass-1.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).	Pass: The simple HTML `<table>`, has one row of column headers and are denoted with `<th>` elements and no additional attributes.
Result	If any of the above checks fail, then Baseline Test 12.1-DataTable fails.	All checks pass.

Simple table with <th> elements to denote headers