Data table (td) element in a table also includes role = “cell”

Test Case Summary

Test Case ID

TC12.1-3-fail-1

Test Case Description

Using ARIA table semantics that overlap native table structural semantics can create confusion and conflict for both browsers and assistive technologies. The table in the sample code includes a data cell that also defines an ARIA role that overlaps structural semantics.

Applicable ICT Baseline Test

12.1 Test Procedure for Data Tables

Baseline Test ID: 12.1-DataTable

Test Instruction: 3

Test Case Detail

Expected Baseline Result

FAIL

The table fails the baseline test because a data cell also includes an ARIA role with table structure semantics, ‘role = “cell”’.

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 data <table> exists in the 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). Fail: Two data cells use more than one of the specified techniques: Those <td> cells also include role="cell".
Result If any of the above checks fail, then Baseline Test 12.1-DataTable fails. 12.1-3 check fails.