Missing Table Headers
Data tables need <th> (table header) elements to identify what each column or row represents. Screen readers use these headers to announce the context for each cell. Without headers, a screen reader just reads cell values in sequence with no indication of what column or row they belong to.
Why It Matters
A data table without headers is nearly useless for screen reader users. They hear a stream of values with no context. This is a WCAG 2.1 Level A violation. It's especially problematic for complex tables with many columns where context is essential to understand the data.
Code Examples
<table>
<tr>
<td>Name</td>
<td>Email</td>
<td>Role</td>
</tr>
<tr>
<td>Alice</td>
<td>alice@example.com</td>
<td>Developer</td>
</tr>
</table><table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>alice@example.com</td>
<td>Developer</td>
</tr>
</tbody>
</table>How to Fix
- 1Use <th> elements for header cells instead of <td>.
- 2Add scope="col" for column headers and scope="row" for row headers.
- 3Wrap header rows in <thead> and data rows in <tbody> for clarity.
- 4For complex tables, use the headers attribute on <td> elements to reference specific <th> ids.
Check Your Accessibility Now
Our accessibility checker detects this issue automatically.
Open Accessibility CheckerHostinger — Fast & Affordable Web Hosting
Deploy accessible, validated code on reliable hosting.
Related Accessibility Errors
Missing Form Labels
Form inputs without labels are inaccessible to screen readers. Learn how to properly label form fields for WCAG compliance.
Missing Alt Text on Images
Learn why alt text is required on images, how it affects accessibility and SEO, and how to write effective alt attributes.
Empty Heading Elements
Empty heading tags break document structure and confuse screen readers. Learn how to fix empty H1-H6 elements.