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

在我的网页中，我需要创建一个表，该表有一个根据某些用户配置可见或隐藏的标题行。该表还需要完全可访问（特别是，由于该表可能非常长，我希望读取行/列标题的快捷方式能够工作。我只有ChromeVox可供测试（我将从我找到的博客文章中详细介绍与其他读者的行为）

我当前的布局与此类似：

CSS:

HTML:

名称
值1
价值2
无名氏
值1a
值2a

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

• 我希望在屏幕阅读器上使用常规导航时跳过标题行*，但使用标题行宣布列标签
• 对于ChromeVox，第一个可以工作（在导航中跳过），但第二个失败（隐藏行不用于标记列）
• 同样，对于ChromeVox，移动隐藏以声明为

  样式

  属性而不是

  类

  ，会导致两种所需的行为都起作用
• 根据我发现的一篇博文，为了说出内容，有时他们不会——所以我不确定我能依靠这种隐藏来实现我的目的（隐藏用于导航，用于标记）

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

• 好吧，屏幕外/1px大小隐藏（如建议的）的问题是，如果我对标题行执行此操作，那么所有列标题都将被读取
这可能会对您有所帮助

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

名称
值1
价值2
无名氏
值1a
值2a
#福{
可见性：塌陷
}

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

---

为了改进现有功能，您可以在表格上使用

表格布局：固定的
，因为表格-布局当表格单元格不是
显示：无
时，它将自动
显示：表格单元格
而不是头上的
显示：无
-尝试将其移出屏幕，例如：

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

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


...
.隐藏标题thead{
显示：绝对；
左：-9999
}

我还没有测试过这个。。。但可能有用

编辑：进一步阅读：
一个快速的谷歌游戏我推荐以下文章：




（尽管有javascript，而不仅仅是css）
（更多链接，Chris对此进行了大量研究）

为什么不将此作为一个问题发送给ShopTalk Show popcast，让其参与其中一个quick fire剧集？
最简单的方法是通过从DOM（首选）中删除标题行或使用屏幕阅读器安全地删除标题行来对屏幕阅读器隐藏标题行。然后使用
文本缩进：-999em将标题插入每个适用单元格或类似的视觉隐藏，保留屏幕阅读器访问

这是一个非常不令人满意的答案，但它在jquery中应该是成立的。大致：对于每个
th
，将内容存储在一个数组中，然后在适用列中选择每个td，并
.prependTo（）
选择“th”

同样，非常令人不满意和混乱，但我能想到的唯一简单的解决方案。祝你好运
 我也对这里的答案感兴趣，希望我能理解这个问题。如果您使用
和
标记并给它们一个
aria标签
，会怎么样？ChromeVox读取它们，它们在语义上与列相关联

以下是JSFIDLE中的一个示例：

这段代码使用同级选择器在标题可见时“隐藏”列组，在标题不可见时“显示”列组，这样屏幕阅读器就不会读取两次。
而不是显示无如果使用不透明度0

我试着用谷歌搜索任何清晰的答案，但没有得到任何清晰的答案，但我仍然可以假设屏幕阅读器忽略不透明度，读取表格标签是正常的，对于普通用户来说是不可见的。
如果ChromeVox是您当前唯一关心的问题，那么使用aria hidden=“false”不会有任何伤害。您可以最好将它与HTML5隐藏属性结合使用（参见下面的示例），但其他技术也可以。有关不同技术的兼容性，请参见2013年末的内容。如果兼容性是一个问题，那么离屏方法似乎是一条出路

屏幕外方法：

泰德{
位置：绝对位置；
左：-9999px
}

隐藏方法：

名称
值1
价值2
无名氏
值1a
值2a
我不确定是否理解您的评论（我不想折叠一列，我想折叠一行）。无论如何，我试着玩了
可见性：collapse
（我将行的高度缩小到1px，并删除了
显示：none
），但效果不好-屏幕阅读器确实在折叠的单元格中导航（说它们是空的），而且它也没有将它们用作列标签。但是谢谢你的建议！我很确定它不会起作用，因为屏幕阅读器中的AFAIK导航是基于DOM的，而不是基于可见的安排（这是我从开源阅读器的代码中记得的，我甚至在问题的最后写了这个）。我明天会在工作中再次检查，可能我错了。您是否尝试过在运行时根据${show}FWIW的值在JS的document.ready（）中添加头行，我怀疑offscreen/1px会
<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 class="hidden-header">
    ...

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

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