html - NVDA 将包含按钮的 div 视为按钮

Question

我有一个容器 div，它的第一个子元素是另一个充当按钮的 div。容器具有一个或多个附加子元素。

内部按钮 div 始终按 Tab 键顺序排列。我们的应用程序有一个“屏幕阅读器模式”，当它被启用时，我们还在标签顺序中包括了外部容器 div。这样做的动机是我们希望屏幕阅读器用户能够切换到整个容器，并听到按顺序读出的所有内容。

问题是 - 如果用户切换到容器 div 并按下空格键，屏幕阅读器会将焦点移动到子按钮 div，并执行点击操作。无论按钮 div 是否具有“按钮” Angular 色，都会发生这种情况。 (我看到这种情况发生在 JAWS 和 NVDA 上。它只发生在屏幕阅读器运行时)。

我只想说——我们有一个复杂的用户界面，这会带来我们想要避免的问题。

为什么会这样？我能做些什么来防止它发生吗？我愿意接受 hacky 解决方法。

<div class="container" tabindex="0">
  <div role="button" title="tooltip" sys:command="command" tabindex="0">
    //Main Content
  </div>
  <div tabindex=0>
    //Secondary Content
  </div>
</div>

Answer 1

你不需要也不能设置 tabindex关于这个div .除了 tab 之外，屏幕阅读器还有其他快捷方式键(通常只读取可聚焦元素)来读取不可聚焦元素。

例如 description of the browse mode指出

In browse mode, the screen reader cursor can be placed on every element on a website, even on those which aren't inherently focusable, for example headings (<h1>, <h2>, etc.) or paragraphs (<p>).