使用 VoiceOver 时未调用 JavaScript 函数

JavaScript function not called when using VoiceOver

本文关键字：JavaScript 函数 调用 VoiceOver 使用      更新时间：2023-09-26

我创建并测试了一个网页，其中包含对屏幕阅读器的完全支持。它适用于 Mac 版旁白，但当我尝试 iOS 版旁白时，我发现了一个问题。当我双击以触发链接时，不会调用click事件侦听器。相反，VO 只是重复我给出aria-label，之后它不会宣布"按钮"。当我禁用旁白时，只需点击它即可工作。该链接的行为类似于按钮，而不是导航到另一个网页。这是旁白错误还是我的标记或代码有问题？

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('link').addEventListener('click', triggerFunction);
});
function triggerFunction() {
  alert('testing');
}
<a id="link" href="javascript:void(0);" role="button" aria-label="My Trigger">Trigger Function</a>

对于 iOS，显然没有鼠标，因此您无法click，但您可以做的是监听touch事件。

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('link').addEventListener('click', triggerFunction);
    document.getElementById('link').addEventListener('touchstart', triggerFunction);
});

您的链接元素是否嵌套在另一个元素中？有时，VoiceOver 的单击事件会改为作用于这些元素，而不会冒泡到嵌套元素。

例如，如果您的 html 如下所示：

<li id="parent">
  <div id="link" onclick="myFunction()">
  </div>
</li>

然后尝试将单击处理程序向上移动一个级别到父元素。

相关文章：