Блог

я работаю над тем, чтобы сделать приложение для фотогалереи более доступным.

приложение имеет функцию отображения расширенного вида изображения при нажатии.

одно из требований a11y заключается в том, что когда пользователь фокусирует изображение и нажимает enter, откроется режим расширения, и фокус переместится внутрь расширенного представления и будет установлен на одной из кнопок в нем. она отлично работает без программы чтения с экрана или с программой чтения с экрана на Mac. но в Windows при использовании программы чтения с экрана кажется, что запускаемый код является тем, который подписан на событие click, а не на событие keydown. поскольку флаг, для которого предполагается установить значение true при keydown, равен 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 amp;amp; !$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. Вероятно, лучше всего адаптировать свой код так, чтобы щелчок и ввод выполняли одно и то же действие, и что одно или оба события могут быть отправлены, потому что у вас есть только довольно ограниченное влияние на то, что отправляется или нет, и когда

Более длинный ответ

Вы не указали, какую программу чтения с экрана вы использовали (Jaws или NVDA), но в любом случае, для обоих обычно отправлять событие щелчка при нажатии enter вместо отправки ключевых событий.

Причины этого могут сначала показаться странными и нелогичными, но есть по крайней мере две хорошие:

• Безусловно, столь же нелогично, что при нажатии кнопки enter происходят две разные вещи. Во всех приложениях, поскольку существует графический интерфейс, чаще всего оба выполняют одно и то же действие (единственное исключение, о котором я могу вспомнить прямо сейчас, — это многострочные или форматированные текстовые поля).
• Программы чтения с экрана существовали до веб-доступности, и в настоящее время доступность все еще редко реализуется. Отправка события щелчка при нажатии enter обеспечивает минимальное удобство использования во всех местах, где дизайнеры даже не думали, что клавиатуру можно использовать вместо мыши.

Кстати, программа чтения с экрана или нет, угадайте, какое событие отправляется, если вы нажимаете enter, когда фокус находится на ссылке или кнопке? В зависимости от браузера, ответ, насколько я знаю, не является единодушным. И со стороны программы чтения с экрана это тоже не единодушно. Некоторые даже позволяют настроить точное поведение, чтобы адаптироваться к различным более или менее недоступным сайтам.

есть ли способ остановить перехват событий программы чтения с экрана Windows?

Вы можете остановить некоторую форму перехвата, вызвав preventDefault в вашей функции прослушивания событий, если событие click генерируется браузером. Поступая таким образом, вы действительно можете сделать что-то другое при нажатии и вводе. Но сначала спросите себя, действительно ли это оправдано. Подумайте о моем первом пункте выше.

Однако вы не можете запретить программам чтения с экрана перехватывать события клавиатуры, переводить их во что-то другое и отправлять или не отправлять их на вашу страницу. Существует режим приложения ARIA, но он имеет несколько важных последствий, поэтому вы не должны использовать его, если у вас нет действительно веских причин.

В заключение, вероятно, лучше всего адаптировать свой код таким образом, чтобы щелчок и ввод выполняли одно и то же действие и чтобы можно было отправить одно или оба события.

добавление role="application" в контейнер div исправило это.