HTML 表格中隐藏的 aria 标签（用于屏幕阅读器可访问性）

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）是，如果我对标题行执行此操作，那么所有列标题将始终被读出...

Answer 1

如果 ChromeVox 目前是您唯一关心的问题，则使用 aria-hidden="false" 不会有什么坏处。您最好将它与 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 2

如果使用 opacity 0 而不是 Display None ，

我试图用谷歌搜索任何明确的答案，但没有得到任何明确的答案，但我仍然可以假设屏幕阅读器会忽略不透明度并正常读取表格标签，而普通用户看不到它。

Answer 3

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

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

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

Answer 4

而不是 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/（更多链接，克里斯对此进行了很多研究）

您为什么不将此作为问题发送给 ShopTalk Show 的流行广播，以了解他们的其中一集？

Answer 5

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

这是一个非常不令人满意的答案，但它应该与 jquery 站得住脚。大致：对于每个th，将内容存储在一个数组中，然后选择适用列中的每个 td，并选择 .prependTo() 'th'。

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

Answer 6

这可能会对你有所帮助。

<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，因为表格布局当表格单元格不是display: none时，它会自动display: table-cell