让 JAWS 在列值之前读取角色 columnheader every-time

Question

希望你做得很好。因此，对于我最近的一个项目，我需要做一些与苹果为比较而构建的页面非常相似的事情 iPad 模型。 (https://www.apple.com/la/ipad/compare/) 网络需要可访问，不幸的是，这部分已经构建，但 a11y 并没有真正考虑在内，现在我们需要重构它。所以我浏览了苹果网站，发现他们的布局与我们的有点相似。此外，我使用 NVDA 进行了测试，我认为这就是我所需要的。每次，在读取列值之前，NVDA 都会读取设置为所选产品的列 header。这样，用户就可以知道什么产品具有该功能。然后我在 Jaws 上测试，发现它不是每次都读取值之前的 headers。这不好，因为用户无法知道具有正在阅读的功能的产品。是否需要激活配置才能使 NVDA 具有与 JAWS 相同的行为？大白鲨对客户很重要。

谢谢

Answer 1

首先你应该确保你使用的是 <th>，也许 <thead> 是正确的。

根据 WebAIM's guide to testing with JAWS，reader 提供额外的快捷方式来阅读相关 headers。

To skip to a table, press the T key. To navigate between cells, hold down Ctrl + Alt and use ↑/↓/←/→ to move from cell to cell. Ctrl + Alt + 5 (on the numeric keypad) will read the row and/or column headers for the current cell.

此行为是产品设计者的决定，因此您不应尝试覆盖它。

我还建议让 reader 实际屏幕用户参与测试。

Answer 2

如果您使用的是原生 HTML，那么您的工作就容易多了。如果您使用

和标签将 table 拼凑在一起，您需要做更多的工作，但可以完成。

所以对于一个简单的 table 就像在 Apple 网站上一样，你会有这样的东西：

<table>
  <tr>
    <th scope="col"></th>
    <th scope="col">iPad Pro</th>
    <th scope="col">iPad Air</th>
    <th scope="col">iPad</th>
  </tr>
  <tr>
    <th scope="row">Height</th>
    <td>11.04 inches</td>
    <td>9.8 inches</td>
    <td>9.4 inches</td>
  </tr>
  <tr>
    <th scope="row">Width</th>
    <td>8.46 inches</td>
    <td>6.8 inches</td>
    <td>6.6 inches</td>
  </tr>
  ...
</table>

请注意，您可以将放在中，将主要的放在中，但我保持简单。

使用本机 HTML，您的工作就完成了。 table 有列和 header 行。当您使用屏幕 reader 浏览一行时，列 header 将在单元格值之前宣布。如果向下导航一列，行 header 将在单元格值之前宣布。

如果您不使用 table 元素而是使用

和，则必须为所有元素指定 roles（并且CSS 以适当布置 table)。它会是这样的：

<div role="table">
  <div role="row">
    <div role="columnheader"></div>
    <div role="columnheader">iPad Pro</div>
    <div role="columnheader">iPad Air</div>
    <div role="columnheader">iPad</div>
  </div>
  <div role="row">
    <div role="rowheader">Height</div>
    <div role="cell">11.04 inches</div>
    <div role="cell">9.8 inches</div>
    <div role="cell">9.4 inches</div>
  </div>
  <div role="row">
    <div role="rowheader">Width</div>
    <div role="cell">8.46 inches</div>
    <div role="cell">6.8 inches</div>
    <div role="cell">6.6 inches</div>
  </div>
</div>

如果您使用屏幕 reader 的默认设置，则无需在屏幕 reader 中执行任何特殊操作即可听到行和列 header 的声音. JAWS、NVDA 和 VoiceOver 都应该尊重他们。

让 JAWS 在列值之前读取角色 columnheader every-time

Make JAWS read role columnheader every-time before the column value

accessibility

jaws-screen-reader