Establish clear table structure

***This document provides helpful tips to improve your site's accessibility. While it doesn’t guarantee 100% compliance, it’s a great starting point to make your website more inclusive and user-friendly.***

Identification

All table header elements (th) must refer to actual data cells in data tables (Rule ID: th-has-data-cells)

Applicable Standards

• WCAG 2.0, 2.1, 2.2 Level A (1.3.1)

• Section 508 (1194.22 g, h)

• Trusted Tester (14.B)

• EN 301 549

Impact

Serious level impact affecting:

• Blind users

• Deafblind users

Proper Implementation

• Each th element must have associated data cells

• Use appropriate scope attributes (col, row)

• Headers must reference elements with screen reader-accessible text

• Avoid using headers attribute on th elements

• Use th elements only for single row/column headers

Examples of Correct Usage

1. Simple Data Table with Proper Headers:
   This table uses <th> elements for column headers with the scope="col" attribute, making it easy for screen readers to associate headers with corresponding data cells.

2. Table with Both Row and Column Headers:
   This table uses scope="row" for row headers and scope="col" for column headers, ensuring a clear relationship between headers and data cells for screen readers.

3. Complex Table with id and headers Attributes:
   The id and headers attributes are used to associate individual data cells with their corresponding headers, which is helpful for more complex tables.

4. Accessible Table with a Caption:
   The <caption> element provides context for the table, making it easier for screen reader users to understand its purpose.

Common Errors to Avoid

1. Missing Table Headers:
   This table uses <td> elements for headers instead of <th> elements, which prevents screen readers from correctly identifying the table structure.

2. Incorrect Use of scope Attribute:
   The scope="row" attribute is incorrectly applied to column headers, which confuses screen readers about the table's structure.

3. Overusing headers Attributes:
   The headers attribute is overused, unnecessarily repeating associations for each data cell, which can confuse screen readers.

4. Missing <caption> Element:
   The table is missing a <caption> element, which provides critical context for screen reader users.

5. Using <th> for Non-Header Content:
   The <th> elements are incorrectly used for data cells instead of headers, making the table structure inaccessible.

Rationale

• Proper header association ensures accurate screen reader navigation

• Headers without data cells create confusion

• Incorrect scope attributes lead to misinterpretation

• Essential for understanding table structure and relationships

• Impacts the ability to understand tabular data context

Evaluation Method

1. Inspect the Table Structure

   • Ensure <th> elements are used for headers and <td> elements for data.

   • Verify that scope="col" or scope="row" is correctly applied to headers.
     
     

2. Validate Header Associations

   • Check if headers and data cells are logically associated using:

     • scope attributes for simple tables.

     • id and headers attributes for complex tables.
       
       

3. Test with a Screen Reader

   • Use a screen reader (e.g., NVDA, JAWS, or VoiceOver) to navigate the table.

   • Confirm that the headers are correctly announced when navigating data cells.

   •  

Evaluation Checklist