Question

上下文是我们希望跟踪应用程序的用户行为，因为它具有不同的功能。

为此，我们创建了一个自定义角度指令，说明 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读到：

测试标题标题可点击的级别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读取可点击的不可点击事件？

Answer 1

<div onclick="alert('Hello from Div!')">
    <h1>Test Heading</h1>
</div>
如何防止NVDA读取不可点击的事件为可点击？

您的标题是可点击的，因为它位于可点击元素中。

只需将其放在任何可点击的元素之外。

HTML标题被NVDA视为可点击

1 个答案: