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

Question

im working on making a photo gallery app more accessible.

the app has a feature of showing expanded view of an image when clicked.

one of the a11y requirements is that when a user focus an image and click enter the expand mode will open and the focus will go inside the expanded view, and will be set on one of the buttons in it. it work's fine without screen reader, or with screen reader on mac. but on windows when using screen reader it seems that the code that fires is the one that subscribed to the click event and not the keydown event. because the flag that suppose to be set to true on keydown is false (both events fire the same function but the keydown also add the enterClicked variable set to true).

this is the div that hold the image and subscribed to the events:

    <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 function:

$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);
}

expand mode component init:

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

is there a way to stop windows screen reader event interception ?

Answer 1

Short answer

It's common to send a click event instead of a press enter event. The best is probably to adapt your code so that click and enter do the same thing, and that either or both event can be sent, because you only have a quite limited influence on which is sent or not and when

Longer answer

You haven't indicated which screen reader you were using (Jaws or NVDA), but anyway, it's common for both to send a click event when pressing enter, instead of sending key events.

Reasons for that may seem strange and illogical at first, but there are at least two good ones:

• It's certainly as much illogical to have two different things happening when clicking or pressing enter. IN all applications since GUI exist, most often, both do the same action (the only exception I can think of right now is multiline or rich text fields).
• Scren readers existed before web accessibility, and accessibility is still rarely implemented nowadays. Sending a click event when pressing enter provide a minimal usability in all the places where designers didn't even thought that the keyboard could be used instead of the mouse.

By the way, screen reader or not, guess which event is sent if you press enter when the focus is on a link or a button? Depending on the browser, the answer isn't unanimous as far as I know. And on the screen reader side, it isn't unanimous either. Some even allow to configure the exact behavior to take, in order to adapt to different more or less unaccessible sites.

is there a way to stop windows screen reader event interception ?

You can stop some form of interception by calling preventDefault in your event listener function, if the click event is generated by the browser. By doing so, you can actually do something different on click and on enter. But ask yourself first if it is really justified. Think about my first point above.

However, you can't prevent screen readers from intercepting keyboard events, translate them to something else and send or don't send them to your page. There exists the ARIA application mode, but it has several important implications, so you shouldn't use it unless you have true good reasons.

To wrap up, the best is probably to adapt your code so that click and enter do the same thing, and that either or both event can be sent.

Answer 2

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