Skip to main content Skip to Table of Contents
U.S. flag

An official website of the United States government

Baseline for Web

12. Tables

Accessibility Requirements

  • WCAG SC 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
  • WCAG2 SC 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

Test Method Rationale

For assistive technology (AT) users, data tables must explicitly associate table data with table row and column headers via programmatic markup. Table markup also facilitates navigation for AT users by providing programmatic landmarks via column and row headers.

When <table> elements are used for layout purposes, data table structure elements are not permitted, such as <th>, <caption>, or <summary> (HTML4).

Limitations, Assumptions, Exceptions

  • Data tables are those tables where information in a cell requires a row or column header to adequately describe the cell’s contents. If a table is used for placement of components on the page for visual aesthetics, then it is considered a layout table.
  • Some content may visually appear to require a data table structure, but, linearizing the content and/or viewing the code reveals that the content is understandable without the table. This technique may be used for responsive design. These elements use CSS and/or other styling methods to present content in columns or rows. The information conveyed does not rely on programmatic relationships between column or row headers to be understood. This content is not a data table and should not use the element, ARIA role=”table”, and associated programmatic table attributes. It should be tested using other baseline tests, such as 13. Structure and/or possibly 10. Forms (associated instructions).
  • Rows of data that are related must have a row header so assistive technology users can understand the relationship of the row’s data cells. Not every table requires a row header. For example, a calendar month is a data table, typically with the days of the week as column headers. The dates in a row are not related so typically, there is no row header present. However, if there was a cell in each row to indicate the week of the year, this cell would serve as a row header for the dates within that row.
  • In the Baseline Test instructions, where an ARIA role is identified, it is the first valid ARIA role attribute value.

12.A Test Procedure for Data Table Roles

Baseline Test ID: 12.A-DataTableRole

Identify Content

Content/data that is visually presented in a table, arranged in rows and columns, 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.

Test Instructions

  1. Table: Check that the data table has a programmatic role of "table" using one of the following techniques. If more than one technique is used, select the first role explicitly defined and perform the remaining tests using that selection. [SC 4.1.2]:
    • HTML <table> that does not have an explicitly defined role attribute that changes its role from table, such as role="presentation" or role="none".
    • ARIA role="table"
    • ARIA role="grid"
    • ARIA role="treegrid"
  2. Table data cell: For the technique used, check that each data cell is programmatically assigned a role of cell and within a parent element with a role of row [SC 4.1.2]:
    • For HTML <table>: the <td> cell must be within a parent <tr> row element.
    • For ARIA role="table": the data cell element with role="cell" must be within a parent element with role="row".
    • For ARIA role="grid" or ARIA role="treegrid": the data cell element with role="gridcell" is within a parent element with role="row".
  3. Table header cell: For the technique used, check that each header cell is programmatically assigned a role of header and within a parent row element [SC 4.1.2]:
    • For HTML <table>: the <th> header must be within a parent <tr> row element.
    • For an ARIA role="table", ARIA role="grid" or role="treegrid": each element with role="columnheader" or role="rowheader" must be within a parent element with role="row".

Test Results

If any of the above tests fail, Baseline Test 12.A-DataTableRole fails.

12.B Test Procedure for Data Table Header Association

Baseline Test ID: 12.B-DataTableHeaderAssociation

Identify Content

For any data table identified in 12.A, identify all column and row headers for each data cell.

Test Instructions

  1. Data cell to header(s) association: Use the programmatic technique (HTML or ARIA) identified in 12.A. Check that each data cell is programmatically associated with its header(s) [SC 1.3.1]:
    • For a simple HTML <table> only: with column headers only in the first row that apply to all data cells in the same column and row headers only in the first column that apply to all data cells in the same row, each header cell may be marked up with <th> without additional attributes.
    • For any HTML <table>: a header cell may be marked up with <th scope="[col|row|colgroup|rowgroup]"> where the data cells that the headers apply to are in the same column, row, column group, or row group, respectively.
      • In HTML4, <td scope="[row|col]"> is supported.
      • In HTML5, <td scope="[row|col]"> is not supported so all header cells must be <th>.
      • The scope only applies to cells that occur after the header cell(s) in the reading order.
    • For any HTML <table>: each <td> data cell may be associated to header cell(s) with <td headers="[id]">:
      • Data cells with the headers attribute must refer to the ID(s) of all relevant header cells for programmatic association.
      • The IDs referenced in the headers attribute for data cells must be to elements within the same <table> and in a consistent sequence.
    • For any HTML <table> that has BOTH scope AND headers attributes in the same table: a data cell with a headers reference will override any scope attributes for that particular data cell. Therefore, data cells with a headers reference must identify all relevant headers.
    • For an ARIA role="table", role="grid", or role="gridtree": each column header element must have role="columnheader" and each row header element must have role="rowheader".

Test Results

If any of the above tests fail, Baseline Test 12.B-DataTableHeaderAssociation fails.

12.C Test Procedure for Layout Tables

Baseline Test ID: 12.C-LayoutTable

Identify Content

All content/data visually presented in a table that retains any 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.

Test Instructions

  1. Check that the table used purely for layout purposes [SC 4.1.2]:
    1. Does NOT designate the layout as a table using ARIA role="table" and associated ARIA table attributes.
    2. Does NOT include HTML table heading elements and/or associated attributes (e.g, <th>, summary, <caption>, scope, and/or headers) UNLESS at least one of the following is true:
      1. the HTML <table> has role="presentation"
      2. the HTML <table> has role="none"
    3. Does NOT have any elements with role="columnheader" or role="rowheader". Because these roles are explicit, applying role="presentation" or role="none" to a parent element would not be inherited (per Presentational Roles Conflict Resolution, "If an allowed child element has an explicit non-presentational role, user agents MUST ignore an inherited presentational role and expose the element with its explicit role".)

Test Results

If any of the above tests fail, Baseline Test 12.C-LayoutTable fails.

Advisory: Tips for streamlined test processes

  • Content that is presented with a CSS table appearance, but does not rely on header association, can most easily be identified by linearization. Another helpful indicator is the table only has row headers or column headers but not both.
  • Baseline Tests 12.A and 12.C should be performed for each data table.

WCAG 2.2 Techniques

The following sufficient techniques were considered when developing this test procedure for this baseline requirement:

All Baseline Tests for Web