在我的网页中,我需要创建一个表,该表具有根据某些用户配置可见或隐藏的标题行.此表还需要完全访问(具体来说,由于表可能很长,我希望读取行/列标题的快捷方式将起作用).我只有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,移动隐藏声明为astyle属性而不是类,导致所需的行为工作
>根据博客发表,我发现screen readers somtimes ignore display: none为了说出内容,有时候他们没有 – 所以我不知道我可以依靠这种隐藏来为我的目的可靠(隐藏导航,用于标签)
那么,如何以跨浏览器读取方式实现我所期望的行为？
> AFAIK,屏幕外/ 1px大小的隐藏(如建议here)的问题是,如果我为标题行执行此操作,则所有列标题将始终被读出…
