How do you make a column header accessible?

Making Column Headers Accessible in HTML Tables

Column headers in HTML tables should be made accessible so that screen readers and other assistive technologies can correctly identify and announce them. This improves the usability of tables for all users.

Key Techniques for Accessible Column Headers

1
Use the <th> element instead of <td> for header cells. Screen readers recognize <th> as a header.
2
Include the scope attribute on <th> elements to specify whether the header applies to a row, column, or group of rows/columns. For example, use scope="col" for column headers.
3
Optionally, use id and headers attributes for complex tables to explicitly associate data cells (<td>) with their corresponding headers.
4
Provide meaningful header text that clearly describes the column content.

Example Usage

In short: Use <th> elements with scope="col" for column headers, ensure clear and descriptive text, and optionally link data cells with headers using id/headers for complex tables. This ensures maximum accessibility.

Difficulty: 5/10

Topics: Semantic HTML, WAI-ARIA, Web Accessibility

Scenario Questions

0-2 years experience

1
I have a simple pricing table, but a screen reader is just reading out the cells without associating them with the column names. How would you change the HTML markup of the header row to fix this?
2
What is the practical difference in screen reader behavior if we use a standard 'td' tag styled with bold CSS for a header, versus using a native 'th' tag with a 'scope' attribute?

2-5 years experience

1
We have a table where users can click column headers to sort the data. Currently, screen reader users aren't getting any feedback when the sort order changes. How would you update the header markup and ARIA attributes to announce the active sort state?
2
A QA tester reports that on a table with both row headers (like employee names) and column headers (like quarters), the screen reader is getting confused about which data cell belongs to which header. How would you debug and resolve this using HTML attributes?

5-8 years experience

1
We are building a highly complex financial ledger table with multi-level, nested column headers—for example, 'Q1' spanning across 'January', 'February', and 'March'. How would you structure the markup and attributes to ensure screen readers can trace a cell back to all its parent headers?
2
Our design team wants a virtualized data grid built entirely out of 'div' elements for performance reasons. How would you replicate the accessibility semantics of native table column headers in this custom CSS Grid-based component?

8+ years experience

1
You're designing the Table component for your company's new enterprise design system. How do you API-design this component so that product engineers get accessible column headers by default, without needing to understand ARIA or 'scope' attributes?
2
We have a legacy application with thousands of un-semantic tables. We need to migrate these to meet WCAG 2.1 AA compliance. What strategy would you use to audit, prioritize, and systematically refactor these tables without breaking existing CSS layouts?

Follow-up Questions

❓How does the 'scope' attribute differ from the 'headers' attribute in terms of use cases and complexity?
❓If a column header contains an interactive element like a sort button, how do you manage the focus order and screen reader announcements?
❓How would you test that your column headers are actually accessible to screen readers without relying solely on automated linters?