Question

在我的网页中，我需要创建一个表格，该表格具有根据某些用户配置可见或隐藏的标题行。此表也需要完全可访问（具体来说，因为表可能很长，我希望读取行/列标题可以使用的快捷方式）。我只有ChromeVox进行测试（我将详细介绍与我发现的博客文章中其他读者的行为）。

我目前的布局与此类似：

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>

当标题可见时，根本没有问题。当标题被隐藏时，取决于屏幕阅读器是否读出这些标签：

我希望在屏幕阅读器上使用常规导航* 时跳过标题行，但使用标题行宣布列标签

使用ChromeVox，第一个工作（跳过导航），但第二个失败（隐藏的行不用于标记列）

再次使用ChromeVox，将隐藏权限移动为style属性而不是class，导致所需的行为都能正常工作

根据我发现的一篇博文，screen readers somtimes ignore display: none为了说出内容，有时他们没有 - 所以我不确定我可以依靠这种隐藏来为我的目的可靠（隐藏导航，用于标记）

那么，我如何以跨浏览器阅读器的方式实现我想要的行为？

AFAIK，屏幕外/ 1px大小的隐藏问题（如建议的here）是，如果我为标题行执行此操作，则所有列标题将始终被读出... < / LI>

Answer 1

最简单的选项是隐藏屏幕阅读器中的标题行，方法是将其从DOM（首选）中删除，或者使用屏幕阅读器安全删除。然后使用text-indent: -999em;或类似的视觉隐藏将标题插入每个适用的单元格，以保留屏幕阅读器访问权限。

这是一个非常不满意的答案，但它应该与jquery成立。粗略地说：对于每个th，将内容存储在数组中，然后在适用的列中选择每个td，并选择.prependTo()'th'。

再次，非常不满意和凌乱，但我能想到的唯一的万无一失的解决方案。祝你好运。

Answer 2

这可能会对你有帮助。

<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
    }

但是关于上面提到的代码没有所有浏览器支持。

为了改善您拥有的内容，您可以在桌面上使用table-layout: fixed，因为当table-cell不是display: none时，表格布局会自动display: table-cell

Answer 3

而不是display: none在头上 - 尝试将其从流程中移出屏幕 - 例如：

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

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

我没有对此进行测试......但可能会有效。

编辑：进一步阅读：

快速谷歌游戏我推荐以下文章：

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（虽然有javascript，而不仅仅是css）
http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/（更多链接，Chris已经对此进行了很多研究）

为什么不将这个问题作为问题发送到ShopTalk Show popcast上，以获取他们的快速剧集之一？

Answer 4

我也对这里的答案感兴趣，我希望我理解这个问题。如果您使用<colgroup>和<col>代码并给他们aria-label怎么办？ ChromeVox会读取它们，并且它们在语义上与列相关联。

以下是jsfiddle中的一个示例：http://jsfiddle.net/j87x7sn5/4/

此代码使用同级选择器在标题可见时“隐藏”colgroup，并在不显示时“显示”它们，因此屏幕阅读器不会读取它两次。

Answer 5

使用aria-hidden =＆＃34; false＆＃34;它不会受到伤害。如果ChromeVox是您唯一关注的问题。您最好结合HTML5隐藏属性使用它（参见下面的示例），但其他技术也可以使用。有关不同技术的兼容性，请参阅2013年底的this article。如果兼容性是一个问题，屏幕外方法似乎是要走的路。

关闭屏幕方法：

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

隐藏方法：

<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

取代显示无如果使用不透明度0，

我尝试谷歌这个任何明确的答案，但没有得到任何明确的答案，但我仍然可以假设屏幕阅读器忽略不透明度并正常阅读表格标签，它对普通用户不可见。

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

6 个答案:

编辑：进一步阅读：

关闭屏幕方法：

隐藏方法：