Hidden aria labels in HTML table (for screen reader accessibility)

Question

In my webpage, I need to create a table which has a header row which is visible or hidden according to some user configuration. This table also needs to be fully accessible (specifically, since the table can be very long, I would like that shortcuts that read the row/column headers would work). I only have ChromeVox to test with (I'll detail about behaviors with other readers from blog-posts I found).

My current layout looks similar to this one:

CSS:

.table-header-show {
}

.table-header-hide {
  display: none;
}

HTML:

<table>
  <!-- ${show} is used to choose the right class the user configuration -->
  <thead class="table-header-${show}">
    <tr>
      <th>Name</th>
      <th>Value 1</th>
      <th>Value 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>Value 1a</td>
      <td>Value 2a</td>
    </tr>
  </tbody>
</table>

When the header is visible, there is no problem at all. When the header is hidden, it depends on the screen reader whether these labels are read out or not:

• I would like the header row to be skipped when using regular navigation* with the screen reader, but use the header row to announce column labels
• With ChromeVox, the first works (skipped in navigation) but the second fails (the hidden row is not used to label columns)
• Again with ChromeVox, moving the hiding to be declared as astyle attribute rather than a class, cause both desired behaviors to work
• According to a blog post I found, screen readers somtimes ignore display: none in order to speak out content, and sometimes they do not - so I'm not sure I can rely on this sort of hiding to be reliable for my purpose (hide for navigation, use for labeling)

So, how can I achieve my desired behavior in a cross-browser-reader way?

• AFAIK, the problem with off-screen/1px-sized hiding (as suggested here) is that if I do this for the header row, then all the column headers would always be read out...

Answer 1

The most fool proof option will be to hide the header rows from the screen reader, either by removing them from the DOM (preferred) or with a screen-reader safe removal. Then insert the header into each applicable cell with text-indent: -999em; or similar visual hiding that preserves screen reader access.

This is a very unsatisfying answer, but it should be tenable with the jquery. Roughly: for each th, store content in an array, then select each td in the applicable column, and .prependTo() the 'th'.

Again, very unsatisfying and messy but the only fool proof solution I can think of. Best of luck.