Empty table header

What it is

A table header cell (`<th>`) is the label that sits at the top of a column or the start of a row in an HTML table — it tells everyone what kind of data that column or row contains (e.g., "Product Name," "Price," "Quantity"). An "empty table header" means one or more of those label cells exists in your page's code but contains no readable text. The cell may look fine visually (perhaps it's a decorative spacer or uses an icon), but it has nothing for a screen reader to announce. Screen readers rely on header text to describe a table's structure, so when a header is blank, users who are blind or have low vision lose the context they need to understand the data.

Why it matters

**Accessibility & legal risk:** Empty table headers violate WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships), which is the benchmark used in accessibility lawsuits and regulatory audits (ADA, EN 301 549, EAA 2025). A single empty header in a product-comparison or pricing table can make that entire table unusable for customers who rely on assistive technology — costing you sales and exposing you to legal liability. **SEO:** Search engines also use table structure to understand tabular content; properly labelled headers improve the semantic clarity of your pages, which can contribute to better crawlability and richer structured understanding of your data. **Conversions:** Accessible, well-labelled product or size tables are easier for all customers to scan, reducing the friction that causes shoppers to abandon a purchase.

How to fix it

1. Audit your pages for tables: look for any `<th>` element that is visually blank, contains only an image with no alt text, or is used as a decorative spacer cell.
2. For each empty `<th>` that represents a real column or row category, add a short, descriptive text label inside it — e.g., `<th>Product Name</th>` or `<th>Price (USD)</th>`.
3. If the `<th>` is intentionally blank for visual layout reasons (e.g., a corner spacer cell in a complex table), add a visually hidden label using `scope` plus an `aria-label` attribute, or a visually hidden `<span>` with CSS — e.g., `<th scope='col' aria-label='Thumbnail'></th>`. Never leave a `<th>` with no accessible name at all.
4. For icon-only or image-only headers, ensure the icon/image has meaningful `alt` text, or add an `aria-label` directly on the `<th>` element.
5. Add the `scope` attribute to every header cell to explicitly declare whether it labels a column (`scope='col'`) or a row (`scope='row'`), which further improves screen-reader navigation.
6. Re-test using a free browser extension such as axe DevTools, WAVE, or by navigating the table with a screen reader (NVDA + Firefox or VoiceOver + Safari) to confirm every header is now announced correctly.

<th scope="col">Price (USD)</th>

<!-- Visually hidden label for a decorative/spacer corner cell -->
<th scope="col" aria-label="Product thumbnail"></th>

<!-- Icon-only header with aria-label -->
<th scope="col" aria-label="Add to cart"></th>

Fix it on your platform

Pick your platform for the exact steps.

Frequently asked questions

Authoritative references

• How to fix this specific rule — Deque/axe (rule reference)
• WCAG 2 overview — W3C WAI
• Web accessibility tutorials — W3C WAI
• ARIA basics — MDN