accessibility for empty table cells

Question

We are using axe to test accessibility.

Axe is giving the following issue when table cells are empty:

All th element and elements with role=columnheader/rowheader must data cells which it describes

If we do this for empty table cells:

<td><span style={{ visibility: 'hidden' }}>empty</span>

The problem goes away but this is a bit hacky. Anyone know the best fix for this?

Worth knowing that this DOES NOT fix the problem:

<td><span style={{ visibility: 'hidden' }}>&nbsp;</span>

We are working in a React environment hence the React style markup.

Answer 1

There's nothing like this restriction in the WCAG.

A data cell can be empty. td elements have the cell role and this role does not require an accessible name.

According to axe unit tests, this error only shows when there's no non-empty td associated with the th. You should have two solution : replacing the th with a td or adding an accessible name (using for instance the aria-label="No value" attribute for instance)