HTML Table denoting non-data table cell

I was wondering if there are ways to denote certain elements/table cells within a table as non-data? For insance, if I have a button at the end of every row:

<table>
  <tr>
    <th>header 1</th>
    <th>header 2</th>
  </tr>
  <tr>
    <td>data A1</td>
    <td>data A2</td>
    <button onclick="doSomething()">Do Something</button>
  </tr>
  <tr>
    <td>data B1</td>
    <td>data B2</td>
    <button onclick="doSomething()">Do Something</button>
  </tr>
</table>

What's the right way to put the button in every <tr>? Should I put it in a <td> (without a column header)? Would it be confusing to someone who is using a screenreader? What's the best practice here in terms of accessibility?

Solution

Short answer

There is no special way to indicate that a particular cell, column or row doesn't contain actual data. There's no specific recommandations on where to place action buttons for a table row either.

However, as a blind user myself, I would recommand to place action buttons in their dedicated column. Note that in this case, the added column must have its non-empty header.

Longer answer

It isn't uncommon to navigate through lengthy tables cell by cell, column by column, rather than linearly row after row. With Jaws or NVDA, this can be done with Ctrl+Alt+Arrow keys for example.

IN this scenario, having action buttons in a separate column prevent the screen reader from unnecessarily repeating the same buttons over and over again. In your example, having the button in the same cell as the data like you did would give "Data A2, do something button" and then "Data B2, do something button" if we navigate row by row on the second column. Putting buttons in a separate column allow to avoid this.

However, if you place action buttons in their dedicated column, this special column must have a non-empty header. This is important because as going through the table, headers are normally announced when changing row or column, and headers can also be announced again on demand. It's important to be able to precisely know where we are in the table, especially if it has many rows and/or columns. It's always weird to be in a cell without header.

So yes, you must put something in the corresponding <th>. "Actions" isn't a bad fit for quite generic usecases. If you don't want the text to be visible on screen while keeping it for screen readers, you can use the concept of visually hidden text in CSS.

You may be tempted to use colspan to make the last column header spend two columns instead of putting a special <th>Actions</th>. Don't do this. Column and row spanning is generally worse for accessibility than an empty header.