HTML表格中隐藏的咏叹调标签（用于屏幕阅读器辅助功能）

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 a style 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.

Answer 2

This might help you.

<table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Value 1</th>
                    <th id="foo">Value 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John Doe</td>
                    <td>Value 1a</td>
                    <td id="foo">Value 2a</td>
                </tr>
            </tbody>
        </table>


#foo {
        visibility: collapse
    }

But About above mention code don't have all browser support.

To improve what you have, you could use table-layout: fixed on table because of table- layout when table-cell is not display: none it will automatically display: table-cell

Answer 3

Instead of display: none on the head - try moving off-screen by taking it out of the flow - something like:

<table class="hidden-header">
    ...

.hidden-header thead {
    display: absolute;
    left: -9999
}

I have not tested this ... but might work.

Edit: Further reading:

A quick google game me the following articles i recommend:

• http://webaim.org/techniques/css/invisiblecontent/
• http://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
• http://alistapart.com/article/now-you-see-me (though has javascript, not just css)
• http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ (lots more links, Chris has researched this a lot)

Why don't you send this as a question to the ShopTalk Show popcast for one of their quick-fire episodes?

Answer 4

I'm interested in the answer here as well, and I hope I understand the question. What if you use <colgroup> and <col> tags and give them an aria-label ? ChromeVox reads them and they are semantically tied to the columns.

Here's an example in jsfiddle: http://jsfiddle.net/j87x7sn5/4/

This code uses sibling selectors to "hide" the colgroups when the header is visible and "show" them when it is not so the screenreader doesn't read it twice.

Answer 5

It won't hurt to use aria-hidden="false" if ChromeVox is currently your only concern. You can use it preferably in combination with the HTML5 hidden attribute (see example below) but other techniques might work as well. See this article from late 2013 for compatibility of the different techniques. If compatibility is a concern, the off screen method seems to be the way to go.

Off screen method:

<style>
    thead {
        position:absolute;
        left:-9999px
    }
</style>

Hidden method:

<table>
  <!-- ${show} is used to choose the right class the user configuration -->
  <thead hidden aria-hidden="false">
    <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>

Answer 6

Instead of Display None what if use opacity 0 ,

i tried to Google this for any clear answer but didn't get any clear one but still i can assume Screen Reader ignore opacity and read Table Labels as normal and its not visible for Normal Users.