JAWS 键盘快捷键在 aria role="gridcell" 上触发点击事件答案

【问题标题】：JAWS keyboard shortcuts firing click events on aria role="gridcell"JAWS 键盘快捷键在 aria role="gridcell" 上触发点击事件
【发布时间】：2019-02-13 10:18:20
【问题描述】：

我遇到的问题是，当使用特定于 JAWS 的键盘快捷键而网格单元聚焦且 JAWS 处于表单模式时，JAWS 会触发点击事件。

下面的示例最终会产生我描述的行为：我发现在 Firefox 和 JAWS 17 中重现这种行为最容易：

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head><title>clicking issue</title></head>
<body>
      <table role="grid" summary="sample">
        <tbody>
            <tr>
                   <td>
                         <a href="#" onclick="alert(event.type);">Gridcell Role Cell</a>
                   </td>
            </tr>
            <tr>
                   <td>
                         <input type="checkbox" name="testcheckbox">Gridcell Checkbox
                   </td>
            </tr>
        </tbody>
      </table>


      <input type="checkbox" name="testcheckbox2">Non-Gridcell Checkbox 2
</body>
</html>

如果您使用标签导航到“单击我”单元格并使用 JAWS 键盘快捷键，例如insert+ctrl+b（在页面快捷方式上显示按钮），在焦点元素上触发点击事件并出现 JS 警报，报告“点击”事件。

这是 JAWS 的预期行为吗？使用键盘快捷键时如何避免触发元素？

【问题讨论】：

对不起，您为什么在这里使用presentation 角色？ AFAIK，除非万不得已，否则不应使用它。
我认为这是一个红鲱鱼。 rule="grid"（甚至在 table 标记上没有角色）在点击事件问题方面产生相同的行为。
你有网址吗？我怀疑您在这里遇到了一些问题，例如<td> 上的tabindex 在现在去语义化的table 以及没有href 的a 中改变了它的角色。鉴于我在这段代码中看到的内容，我认为查看整个页面是必要的。
刚刚进行了几次测试，我同意@aardrian：我们需要一个 URL 来查明这一点。我无法在此处重现此内容，因此 JAWS 的行为可能是因为 HTML 格式错误（链接上没有tr，没有href）。
不幸的是，我没有外部可用的站点来完全在上下文中显示它。但是，我确实更新了问题中的示例 HTML，以便更容易在 IE11 和 Firefox 中重现。我可以使用给定的 HTML 获得结果。

标签： accessibility roles wai-aria jaws-screen-reader

【解决方案1】：

尝试了您的示例代码。删除 role="grid" 可以在 IE11 和 JAWS17 中正常工作。

要获取复选框列表，请按insert+ctrl+x。如果我们有role="grid"，则在按下insert+ctrl+x 时复选框会切换。

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
    <title>clicking issue</title>
</head>
<body>
    <table summary="sample">
        <tbody>
            <tr>
                <td>
                    <a href="#" onclick="alert(event.type);">Gridcell Role Cell</a>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="testcheckbox" id="gcCheckbox"><label for="gcCheckbox">Gridcell Checkbox</label>
                </td>
            </tr>
        </tbody>
    </table>


    <input type="checkbox" name="testcheckbox2" id="nonGcCheckbox"><label for="nonGcCheckbox">Non-Gridcell Checkbox 2</label>
</body>
</html>

【讨论】：

Removing role="grid" 不是一个选项，该示例用于在我的应用程序之外以最基本的形式举例说明问题。咏叹调角色是必要的。
缺少role="grid" 是否会在您浏览页面时跳过该元素？我嵌套了 div，形成了一个表格（视觉上），我试图通过在每个单元格上放置一个角色 =“grid”和角色 =“gridcell”来增强盲人能够作为网格或表格进行交互。据了解，作为包装器的普通 div 不会使屏幕阅读器进入适当的模式。