使用屏幕阅读器在模态窗口上禁用箭头键导航

huangapple go评论77阅读模式
英文:

Trap ARROW KEY navigation on modal using Screen Readers

问题

我正在处理一个问题,尝试使用TAB/箭头键来限制在模态框内的导航。

之前使用了这样一个函数来避免触发按键操作:

component.addEventListener("keydown", function (e) {
  if ((e.key === 'Tab' && !(e.shiftKey && e.key === 'Tab')) || e.key === 'ArrowDown' || e.key === 'ArrowUp') {
    e.preventDefault();
  }
});

问题是,在使用像NVDA或JAWS这样的屏幕阅读器时,使用箭头键时不会触发浏览器上的任何操作,看起来像是屏幕阅读器上的某个快捷方式。

基本上,该函数是有效的,但在使用屏幕阅读器时,我得到了这种奇怪的行为。你能帮忙解决这个问题吗?

请捕捉导航,即使在使用屏幕阅读器时,或者提供一些解释为什么它不起作用。

英文:

I'm dealing with an issue trying to trap the navigation inside a modal using TAB/ARROW keys.

Was using a function like this to avoid the keys action to being triggered:

        component.addEventListener("keydown", function (e) {
          if((e.key === 'Tab' && !(e.shiftKey && e.key === 'Tab')) || e.key === 'ArrowDown' || e.key === 'ArrowUp'){
            e.preventDefault();        
          }
        });

The problem is when using the arrow keys with some screen reader like NVDA or JAWS. The arrow button doens't trigger anything on the browser, it seems like it's some action on the screen reader like a shortcut.

Basically that function works, but when using screen reader I get this weird behavior. Could you some hand on that.

Trap the navigation even when using screen readers or get some explanation why it's not working.

答案1

得分: 1

这不是奇怪的行为,你观察到的是完全正常的。

我不会在这里重复整个过程,因为会很长,但为了尽量简短,有两种方式可以使用屏幕阅读器查看网页内容:

  • 无论您是否将您的网页视为文本文档,就像在Word中一样。在屏幕阅读器术语中,这称为浏览模式(NVDA)或虚拟光标模式(Jaws)。
  • 或者您将其视为应用程序,就像本机GUI程序一样。这称为输入模式、表单模式、焦点模式或应用程序模式。

当您处于浏览模式时,您可以使用键盘控制光标,其基本功能类似于在Word中。箭头键可用于在字符、单词和行之间移动。
许多其他快捷键可让您直接跳转到标题、按钮、表单元素和其他元素。

重要的是要记住的是,在浏览模式下,所有这些快捷键,特别是包括箭头键,在您的页面上都不会传输。它们只执行其阅读和移动功能。

当您处于应用程序/焦点/表单模式时,您可以使用Tab键在可获得焦点的元素之间移动,所有按键都会传输到您的页面,几乎就像没有屏幕阅读器一样。
然而,在这种模式下,无法精确地查看普通文本。

这两种模式都很重要,屏幕阅读器用户可以随时决定在它们之间切换,这取决于他/她想要做什么。
切换到NVDA的快捷键是Insert+Space,例如。
屏幕阅读器也会在各种情况下自动切换,试图猜测用户接下来要做什么。

重要的是要认识到,如果您想捕获箭头键供自己使用,屏幕阅读器必须处于表单模式。

首先,如果您的元素尚未可获得焦点,请使用tabindex=0使其可获得焦点。
对于其余部分,通过与真正的屏幕阅读器用户进行测试,以查看他们是否了解它的工作方式,以及屏幕阅读器的行为(理想情况下,在多个平台上测试多个屏幕阅读器)。

但要非常小心:在几种情况下,屏幕阅读器会自动切换到表单模式,根据您对按箭头键的响应,您可能会阻止经验较少的屏幕阅读器用户轻松退出您的组件。
您需要确保,无论您只进行相当常见的导航,还是用户知道他/她处于与正常情况下不同的箭头键工作方式的特殊情况中(例如在游戏中),都能正常运作。

英文:

This isn't a weird behavior, what you observe is perfectly normal.

I won't repeat here the whole thing since it would be quite long, but to make it as short as I can, there are two ways to see web contents with a screen reader:

  • Whether you consider your web page as being a text document, like in Word. In screen reader terminology, this is called the browse mode (NVDA) or virtual cursor mode (Jaws).
  • Or you consider it as an application, like a native GUI program. This is called input mode, form mode, focus mode or application mode.

When you are in browse mode, you use your keyboard to control a cursor, which works basically like in Word. Arrow keys allow to move between characters, words, and lines.
A lot of other shortcuts allow to jump directly to headings, buttons, form elements, and other elements.

What is important to keep in mind is that in browse mode, all these shortcuts and in particular including arrow keys are never transmitted to your page. They perform only their reading and moving functions.

When you are in application / focus / form mode, you use tab to move between focusable elements, and there all key press are transmitted to your page, almost as if there was no screen reader at all.
However, it's impossible to precisely review ordinary text in this mode.

Both modes are important, and the screen reader user can decide to switch betwen one and the other at any moment, depending on what he/she wants to do.
Shortcut to switch with NVDA is Insert+Space, for example.
Screen readers also switch automatically on various occasions, trying to guess what the user is going to do next.

What is important to realize is that, if you want to capture arrow keys for your own use, the screen reader has to be in form mode.

The first of all is to make your element focusable with tabindex=0 if it isn't already focusable.
For the rest, test, test, test with real screen reader users to see if they well understand how it works or not, and how screen readers behave (ideally, test several screen readers on several platforms).

Be very careful, though: scren readers switch to form mode automatically in several situations, and depending on what you do in response to pressing arrow keys, you may prevent less experienced screen reader users from getting out of your component easily.
You need to make sure that, whether you are only performing quite common navigation, or that the user knows that he/she's in a particular situation where arrow keys work differently than normal (for example in a game)

huangapple
  • 本文由 发表于 2023年7月3日 22:00:20
  • 转载请务必保留本文链接:https://go.coder-hub.com/76605486.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定