a11y & angularjs - Windows 屏幕阅读器覆盖 keydown 事件

Question

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

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

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

这是保存图像并订阅事件的 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 屏幕阅读器事件拦截？

Answer 1

简答

发送点击事件而不是按下回车事件是很常见的。 最好的办法可能是调整您的代码，以便单击和输入做同样的事情，并且可以发送一个或两个事件，因为您对发送或不发送以及何时发送的影响非常有限

更长的答案

您没有指明您使用的是哪个屏幕阅读器（Jaws 或 NVDA），但无论如何，在按下 Enter 键时发送点击事件而不是发送按键事件是很常见的。

其原因乍一看似乎很奇怪和不合逻辑，但至少有两个好处：

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

顺便说一句，无论是否使用屏幕阅读器，猜猜当焦点位于链接或按钮上时按下 Enter 会发送哪个事件？ 根据浏览器的不同，据我所知，答案并不是一致的。 在屏幕阅读器方面，它也不是一致的。 有些甚至允许配置要采取的确切行为，以适应不同的或多或少无法访问的站点。

有没有办法阻止 Windows 屏幕阅读器事件拦截？

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

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

总结一下，最好的办法可能是调整您的代码，以便单击和输入执行相同的操作，并且可以发送其中一个或两个事件。

Answer 2

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