NVDA 元素焦点问题

Question

我们正在处理特定的辅助功能要求，我们需要在我们的 div 中添加额外的 CSS 属性，当它通过辅助功能技术（即 VoiceOver）（Mac) 和 NVDA (Windows)。这是我们的示例代码。

//html
<div class="info-box">
   This is a infobox
</div>

//CSS
.info-box {
    background-color: #fff;
    border: 1px solid red;
}
.info-box:focus {
    border: 1px solid green;
}

在 Mac 上，当我通过 VoiceOver 键导航到此 div 时，它会将边框颜色更新为绿色。在 windows 上，如果我通过 Tab 键导航到此 div，我可以看到更新的绿色。 但是在 Windows 上，当我通过 NVDA Next Keys 导航到此 div 时，它不会将边框颜色更新为绿色。

所以看起来 NVDA Next 键在通过 NVDA Next 键（箭头键）highlighted/focused 时不会将焦点应用到元素。

我只是想向社区学习是否有任何方法可以修复 windows。

Answer 1

对于大多数屏幕 reader（JAWS、NVDA、Talkback、iOS 上的旁白），移动屏幕 reader 焦点与移动键盘焦点是分开的。两者通常不同步。一些屏幕 readers 有一个选项可以让两者保持同步，但它由用户设置，因此您的代码不能依赖它。

屏幕 reader 用户可以使用快捷键浏览页面（H 转到下一个标题，T 转到下一个 table，L 转到下一个列表，等等）并且您通常不希望在使用屏幕导航时应用任何焦点样式reader 重点.

我不确定您的意图是什么，但我从未见过试图将焦点样式应用于屏幕焦点的应用程序 reader。通常，浏览器不知道屏幕 reader 是运行，所以它不知道屏幕 reader 焦点移动了。

如果您使用 tabindex="0" 将真正的键盘焦点移动到它，您仍然可以应用您的样式，但最佳做法是不允许键盘焦点移动到non-interactive 元素。

NVDA 元素焦点问题

NVDA Element Focus issue

html

css

accessibility

nvda