Empty table header
Quick winFound on 5% of audited stores.
Add visible or screen-reader-accessible text to every empty `<th>` table header cell so assistive technology users can understand what each column or row represents.
What it is
A table header (`<th>`) is the label that explains what the data in a column or row means — like "Product Name," "Price," or "Quantity." When a `<th>` element exists in your HTML but contains no text (or only invisible content), screen readers announce it as blank, leaving blind and low-vision shoppers with no idea what that column or row is about. This is an accessibility failure under WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships) and 4.1.2 (Name, Role, Value). Empty table headers most commonly appear in comparison tables, product specification tables, pricing grids, and order-history tables on ecommerce sites.
Why it matters
Screen reader users — a significant portion of shoppers with visual impairments — rely entirely on table headers to navigate data tables. An empty header makes a table incomprehensible and can force them to abandon your product comparison or checkout entirely, costing you conversions. In many jurisdictions (USA under ADA, EU under EAA, UK under PSED) inaccessible websites expose businesses to legal complaints and lawsuits; accessibility litigation has been rising sharply year over year. Fixing this issue also signals to Google's crawlers that your page structure is well-formed, which can modestly support your organic rankings.
How to fix it
- Audit your site's tables: identify every `<th>` element that has no visible text content — common culprits are the top-left corner cell of a table that has both row and column headers, decorative icon-only header cells, and auto-generated comparison tables.
- For headers that should have visible text, simply add a meaningful label inside the `<th>` tag (e.g., `<th>Product Feature</th>`).
- For the top-left corner cell of a table that intentionally has no label (e.g., a matrix where the axis labels make the corner redundant), add a visually hidden label using a CSS `.sr-only` / `.visually-hidden` class, or use `aria-label` directly on the `<th>` element (e.g., `<th aria-label="Feature comparison row and column headers">`).
- If a header is purely decorative and carries no meaning, consider using `<td>` instead of `<th>` and applying `role="presentation"` to the entire table — but only if the table is truly layout-based and not data-based.
- After editing, run your page through an accessibility checker (e.g., axe DevTools browser extension) to confirm no `empty-table-header` violations remain.
- Test with a real screen reader (NVDA + Firefox on Windows, or VoiceOver + Safari on Mac/iOS) to verify that navigating between columns announces the header text you added.
Fix it on your platform
Pick your platform for the exact steps.
How to fix empty table header on Shopify
- In your Shopify Admin, go to Online Store → Themes → click Actions → Edit code on your active theme.
- Search for table-related Liquid files: common locations are sections/product-template.liquid, sections/collection-template.liquid, snippets/product-comparison.liquid, or any custom section containing `<table>` markup.
- Use Ctrl+F / Cmd+F to search for `<th>` within those files and locate any that are empty (e.g., `<th></th>` or `<th> </th>`).
- Add meaningful text inside the empty `<th>`, or add an `aria-label` attribute: `<th aria-label="Row category"></th>`.
- If your theme uses a page builder (e.g., Dawn's sections schema), also check any custom HTML blocks added via the theme editor under Online Store → Customize → the relevant section.
- Save the file and verify with axe DevTools or the WAVE browser extension.
How to fix empty table header on Shopify Plus
- Follow the same steps as Shopify above; additionally check any custom Liquid templates stored in the 'templates' directory (e.g., templates/page.custom-comparison.liquid) and any scripts injected via Shopify Scripts or checkout customizations.
- For B2B price tables built with the Shopify Plus Wholesale Channel or custom apps, inspect the rendered HTML of those pages and patch the source template or app output accordingly.
How to fix empty table header on WooCommerce
- In your WordPress Admin, go to Appearance → Theme File Editor (or use a child theme via FTP/SFTP).
- Search your active (child) theme's template files — especially woocommerce/templates/single-product/tabs/ and any comparison plugin templates — for empty `<th>` tags.
- If the empty header comes from a plugin (e.g., WooCommerce Product Table, YITH WooCommerce Compare), check that plugin's settings for a 'column header' or 'label' field before editing code.
- Add visible text or an `aria-label` to each empty `<th>` found, then save.
- Alternatively install the 'WP Accessibility' plugin (by Joe Dolson) which flags and sometimes auto-fixes empty header cells.
- Verify with axe DevTools in your browser.
How to fix empty table header on BigCommerce
- In your BigCommerce Admin, go to Storefront → My Themes → click Customize on your active theme, then open the Theme Editor. For code-level edits, click Advanced → Edit Theme Files.
- Browse to templates/components/ and templates/pages/ — look for files containing `<table>` markup (e.g., product-comparison.html, account-orders.html).
- Search for empty `<th>` elements and add descriptive text or `aria-label` attributes.
- If comparison or spec tables are rendered by a BigCommerce widget, go to Page Builder (Storefront → Page Builder) and edit the widget's HTML/Text block directly.
- Save changes and verify with the axe DevTools browser extension.
How to fix empty table header on Wix
- In the Wix Editor, click on the Table element that contains the empty header.
- Select the empty header cell and type a meaningful label directly into the cell.
- If the table is built with Wix Repeaters or a custom HTML embed (Add → Embed → Custom Code / HTML iframe), open the HTML code panel and add text or an `aria-label` to the `<th>` element in the raw HTML.
- For Wix Stores product comparison features, check the app's settings for column/row label fields.
- Publish the site and verify with axe DevTools.
How to fix empty table header on Wix Studio
- In Wix Studio, select the Table or Data Grid component on the canvas.
- Click the component settings (gear icon) and locate each column's 'Header Label' or 'Title' field — fill in any that are blank.
- For custom-coded sections using Velo (Wix Dev Mode), open the relevant page or component .jsx file in the Velo IDE and add `aria-label` or text content to any empty `<th>` elements in the JSX.
- Publish and test with axe DevTools.
How to fix empty table header on Squarespace
- In the Squarespace Pages panel, open the page containing the table and click Edit.
- Click the Table block to edit it; click each empty header cell in the top row and type a descriptive label.
- If the table was added as a Code Block (Insert Point → Code), click the Code Block to open the HTML editor and add text or `aria-label` to any empty `<th>` elements.
- For Squarespace Commerce product tables, check Settings → Inventory or the product page editor for column label options.
- Save, then verify with axe DevTools or WAVE extension.
How to fix empty table header on Webflow
- In the Webflow Designer, open the page containing the table.
- In the Navigator panel (left sidebar), expand the Table structure and find the empty `<th>` element.
- Click the element on the canvas and type the header text directly, OR open the Element Settings panel (D key) and add a custom attribute `aria-label` with a meaningful value.
- To add a visually-hidden label, create a `<span>` inside the `<th>`, add your text, then apply a combo class (e.g., `sr-only`) with CSS: `position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;`
- Publish and verify with axe DevTools.
How to fix empty table header on Adobe Commerce (Magento)
- SSH into your server (or use your hosting file manager) and navigate to your active theme directory: app/design/frontend/<Vendor>/<theme>/.
- Search for PHTML template files that render tables: grep -r '<th' . --include='*.phtml' to find all files with table header markup.
- Open the relevant .phtml file (e.g., Magento_Catalog/templates/product/list.phtml or a comparison template) and add text or `aria-label` to any empty `<th>` elements.
- If using a third-party theme or module, create a template override in your custom theme rather than editing vendor files directly.
- Run bin/magento cache:flush after saving, then verify with axe DevTools.
How to fix empty table header on Magento Open Source
- Follow the same steps as Adobe Commerce above — the template file paths and cache-flush command are identical for Magento Open Source.
How to fix empty table header on PrestaShop
- In your hosting file manager or via FTP, navigate to themes/<your-theme>/templates/ and search for .tpl files containing `<table>` and `<th>` markup.
- Edit the relevant .tpl file to add visible text or an `aria-label` attribute to any empty `<th>` elements.
- Clear the PrestaShop cache via Back Office → Advanced Parameters → Performance → Clear Cache.
- Verify the fix with axe DevTools.
How to fix empty table header on OpenCart
- Via FTP or your hosting file manager, navigate to catalog/view/theme/<your-theme>/template/ and find .twig or .tpl files containing table markup.
- Add text or `aria-label` to empty `<th>` elements in those template files.
- In the OpenCart Admin, go to System → Maintenance → Clear Cache to flush the template cache.
- Verify with axe DevTools.
Does your site have this issue?
Run a free SEOLZ scan to find empty table header — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Empty table header?
A table header (`<th>`) is the label that explains what the data in a column or row means — like "Product Name," "Price," or "Quantity." When a `<th>` element exists in your HTML but contains no text (or only invisible content), screen readers announce it as blank, leaving blind and low-vision shoppers with no idea what that column or row is about. This is an accessibility failure under WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships) and 4.1.2 (Name, Role, Value). Empty table headers most commonly appear in comparison tables, product specification tables, pricing grids, and order-history tables on ecommerce sites.
Why does empty table header matter?
Screen reader users — a significant portion of shoppers with visual impairments — rely entirely on table headers to navigate data tables. An empty header makes a table incomprehensible and can force them to abandon your product comparison or checkout entirely, costing you conversions. In many jurisdictions (USA under ADA, EU under EAA, UK under PSED) inaccessible websites expose businesses to legal complaints and lawsuits; accessibility litigation has been rising sharply year over year. Fixing this issue also signals to Google's crawlers that your page structure is well-formed, which can modestly support your organic rankings.
How do I fix empty table header?
Add visible or screen-reader-accessible text to every empty `<th>` table header cell so assistive technology users can understand what each column or row represents.
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