上下文是我们想要跟踪应用程序的用户行为，因为它具有不同的功能。
为此，我们创建了一个自定义 Angular Directive(指令)，例如myFunctionality 并将 HTML 部分包装到此指令中，如下所示，以便现在我们可以跟踪其中的所有点击事件，并按功能名称对它们进行分类，以跟踪特殊功能 -
<myFunctionality functionality-name="Login">
<!--HTML of this functionality-->
</myFunctionality>
<myFunctionality functionality-name="RegisterUser">
<!--HTML of this functionality-->
</myFunctionality>
在此指令中，我们附加了事件处理程序来捕获click事件并相应地记录。
.directive('myFeature', [function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
//more code
element.on('click.myFeature', '*:not(select, :radio, :checkbox)', function(event) {
logEventDetails(event);
});
//more code
}])
这很有效，除了当我使用 NVDA 屏幕阅读器阅读页面时。
NVDA 将 heading 元素读取为可点击。
例如对于这个标题 -
<h1> Test Heading </h1>
NVDA 读取:
Test Heading heading clickable level 1
我也尝试过使用类似的东西，(有各种版本)但它没有工作 -
$(':header').off('click.myFeature');
TL;DR
考虑以下示例 HTML。这里 click 与 div 关联，而不是与 h1 关联。但屏幕阅读器的工作原理是将标题元素读取为可点击。
<html>
<body>
<div onclick="alert('Hello from Div!')">
<h1>Test Heading</h1>
</div>
</body>
</html>
如何防止 NVDA 将不可点击事件读取为可点击事件？
最佳答案
<div onclick="alert('Hello from Div!')"> <h1>Test Heading</h1> </div>How can prevent NVDA from reading non-clickable events as clickable?
您的标题是可点击的，因为它位于可点击元素内。
只需将其放在任何可点击元素之外即可。
关于javascript - NVDA 认为 HTML 标题是可点击的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42134094/