The context is that we want to track user behavior of application for it's different features.
For this we have created a custom angular directive say myFunctionality and wrapped portions of HTML into this directive like this, so that now we can track all click events within this, and categorize them by functionality-name to track the usage of a particular feature -
<myFunctionality functionality-name="Login">
<!--HTML of this functionality-->
</myFunctionality>
<myFunctionality functionality-name="RegisterUser">
<!--HTML of this functionality-->
</myFunctionality>
Within this directive, we have attached event handler to capture click event and log accordingly.
.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
}])
This is working, beautifully, except that when I read my page using NVDA screen reader.
NVDA reads the heading elements as clickable.
For example for this heading -
<h1> Test Heading </h1>
NVDA reads:
Test Heading heading clickable level 1
I have also tried using something like this, (with variety of versions) but it did not worked-
$(':header').off('click.myFeature');
TL;DR
Consider the following sample HTML. Here click is associated with div and not with h1. But screen reader works such that it reads heading element also as clickable.
<html>
<body>
<div onclick="alert('Hello from Div!')">
<h1>Test Heading</h1>
</div>
</body>
</html>
How can prevent NVDA from reading non-clickable events as clickable?
