a11y＆angularjs-Windows屏幕阅读器会覆盖按键事件 简短答案更长的答案

编程问答 2022-08-14

问题描述

我正在努力使照相馆应用程序更易于访问。

该应用程序具有在单击时显示图像放大视图的功能。

其中一项要求是，当用户聚焦图像并单击进入时，扩展模式将打开，并且聚焦将进入扩展视图内部，并将其设置在其中的一个按钮上。在没有屏幕阅读器的情况下，或者在Mac上使用屏幕阅读器，都可以正常工作。但是在窗户上 使用屏幕阅读器时，似乎触发的代码是预订click事件而不是keydown事件的代码。因为假设在keydown上设置为true的标志是false（两个事件都触发相同的功能，但keydown还会将enterClicked变量添加为true）。

这是保存图片并订阅事件的div：

    <div 
        tabindex="0" 
        id="{{media.id}}" 
        data-ng-repeat="media in row track by media.id" 
        data-ng-mouseenter="events.toggleVideoPlay(media.type,media.id,media.link,( rowNummer ) * (row.length) + ($index + 1))" class="imgContainer" 
        ng-keydown="$event.keyCode == 13 ? events.openExpandMode(media.id,true) : null"
        data-ng-click="events.openExpandMode(media.id)"
      >

openExpandMode函数：

$scope.events.openExpandMode = (mediaId,isEnterClicked) => {
const state = {
            isEnterClicked,mediasId,currentIndex,pagination: $scope.mediasPagination,settings: {
                isUserName: $scope.settings.user_name_checkBox,istemplate: !$scope.userConnected && !$scope.userConnectedWithOldApi,isLikeComments: $scope.settings.like_comments_checkBox,isDescriptions: $scope.settings.description_checkBox,isComments: $scope.settings.comments_checkBox,theme: $scope.settings.expand_theme,lang: $translate.use()
            }
        };
localStorageService.set('state',state);
}

展开模式组件初始化：

const _init = () => {
   if ($scope.isOpenFromEnter) {
                    document.getElementById('nextArrow').setAttribute('data-focus-visible-added',"");
                    document.getElementById('nextArrow').className += ' focus-visible';
                    document.getElementById('nextArrow').focus();
                }
}

是否可以停止Windows屏幕阅读器事件拦截？

解决方法

简短答案

通常发送点击事件而不是按下Enter事件。 最好的办法可能是调整您的代码，以便click和enter可以执行相同的操作，并且可以发送一个或两个事件，因为 您只会对发送与否以及发送时间的影响非常有限

更长的答案

您没有指出正在使用哪个屏幕阅读器（Jaws或NVDA），但是无论如何，这两种情况都是在按下Enter键时发送点击事件，而不是发送按键事件。

这样做的原因乍看起来似乎很奇怪而且不合逻辑，但是至少有两个好的原因：

  • 单击或按Enter键时发生两种不同的事情当然是不合逻辑的。自从GUI存在以来，在所有应用程序中，大多数情况下两者都执行相同的操作（我现在想到的唯一例外是多行或富文本字段）。
  • 屏幕阅读器早于Web可访问性存在，如今可访问性仍很少实现。在所有设计师甚至都不认为可以使用键盘代替鼠标的地方，按回车键时发送click事件会提供最小的可用性。

顺便问一下，无论屏幕阅读器是否在屏幕上，当焦点位于链接或按钮上时，如果按回车键，就会猜出发送哪个事件？ 据我所知，答案取决于浏览器的不同。 从屏幕阅读器的角度来看，它也不是一致的。有些甚至允许配置要采取的确切行为，以适应或多或少无法访问的不同站点。

有没有一种方法可以阻止Windows屏幕阅读器事件拦截？

如果click事件是由浏览器生成的，则可以通过在事件侦听器函数中调用preventDefault来停止某种形式的拦截。 这样，您实际上可以在单击和输入上做一些不同的事情。但是先问问自己是否真的合理。想想我上面的第一点。

但是，您不能阻止屏幕阅读器拦截键盘事件，将它们转换为其他事件以及将其发送或不发送到您的页面。 虽然存在ARIA应用程序模式，但是它具有几个重要的含义，因此，除非有充分的理由，否则不要使用它。

最后，最好的办法是修改代码，使click和enter进行相同的操作，并发送一个或两个事件。

,

将role="application"添加到容器div进行了修复。

accessibilityjavascriptscreen-readerswindowswindows