Question

希望您做的很棒。因此，对于我最近的项目之一，我需要做的事情与为比较而构建的苹果页面非常相似 iPad机型。（https://www.apple.com/la/ipad/compare/）的网络需要可访问，但是很遗憾，这部分已经构建，但是并没有真正考虑到这一点，现在我们需要对其进行重构。因此，我浏览了Apple Web，发现它们的布局在某种程度上类似于我们的布局。另外，我使用NVDA进行了测试，我认为这是我所需要的。每次在读取列值之前，NVDA都会读取设置为所选产品的列标题。这样，用户可以知道哪些产品具有该功能。然后，我在Jaws上进行了测试，发现它并没有每次读取值之前的标题。这不好，因为用户无法知道具有正在读取的功能的产品。是否存在需要激活的配置才能从NVDA到JAWS具有相同的行为？下颌对客户很重要。

谢谢

Answer 1

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

根据WebAIM's guide to testing with JAWS，该阅读器提供了额外的快捷方式来阅读相关标题。

要跳到表格，请按T键。要在单元格之间导航，请按住Ctrl + Alt并使用↑/↓/←/→在单元格之间移动。 Ctrl + Alt + 5（在数字小键盘上）将读取当前单元格的行标题和/或列标题。

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

我还建议让实际的屏幕阅读器用户参与您的测试。

Answer 2

如果您使用的是本机HTML，那么您的工作就容易得多。如果您要使用

和标签将一张表合并在一起，则可以做更多的工作，但是可以完成。

因此，对于像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，您的工作已完成。该表具有两者列和行标题。使用跨行的屏幕阅读器进行导航时，将在单元格值之前宣布列标题。如果您向下浏览一列，则行标题将在单元格值之前宣布。

如果您不使用表格元素，而是使用

s和 s，则必须为所有元素指定roles（并使用CSS适当地布置表格）。就像这样：

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

如果您使用屏幕阅读器的默认设置，则无需在屏幕阅读器中执行任何特殊操作即可听到行标题和列标题。 JAWS，NVDA和VoiceOver都应该尊重他们。

使JAWS每次在列值之前读取角色columnheader

2 个答案: