HTML表中隐藏的咏叹调标签(屏幕阅读器可访问性)

在我的网页中,我需要创建一个表,该表具有根据某些用户配置可见或隐藏的标题行.此表还需要完全访问(具体来说,由于表可能很长,我希望读取行/列标题的快捷方式将起作用).我只有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)的问题是,如果我为标题行执行此操作,则所有列标题将始终被读出…

解决方法

最愚蠢的选项将是从屏幕阅读器中隐藏标题行,方法是从DOM(首选)中删除它们,或者通过屏幕阅读器安全删除.然后将标题插入到具有文本缩进的每个适用的单元格中：-999em;或类似的视觉隐藏,保留屏幕阅读器访问.

这是一个非常不满意的答案,但它应该是jQuery的成就.大致：对于每一个,将数据存储在数组中,然后选择适用列中的每个td,然后选择.prependTo()’th’.

再次,非常不满意和凌乱,但唯一的笨蛋解决方案,我可以想到.最好的运气.

原文地址：https://www.jb51.cc/html/230334.html