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

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属性而不是a class,会导致所需的行为都起作用
• 根据我发现的博客文章,屏幕阅读器display: none有时会忽略内容,有时他们不会 - 所以我不确定我可以依靠这种隐藏来保证我的目的是可靠的(隐藏导航,用于标签)

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

• AFAIK,屏幕外/ 1px大小的隐藏问题(如此处所示)是,如果我为标题行执行此操作,那么将始终读出所有列标题...

Answer 1

这可能对你有帮助。

<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