Question

我正在尝试改善网站的可访问性，并且遇到一些问题，这些问题使得使用NVDA的移动设备（VoiceOver和TalkBack）以及台式机都可以正常工作。我正在尝试使用Bootstrap Popover小部件进行文本输入，如下所示：

<label class="form-group name" for="name">
    Name
    <div class="wrap">
        <input name="name" id="name" class="form-control" value="" type="text" aria-describedby="nameInfo" />
        <div id="nameInfo" tabindex="0" data-trigger="hover focus" data-toggle="popover" data-placement="bottom" data-content="Name Content Popup Here" aria-label="Name Content Popup Here" aria-hidden="true"></div>
    </div>
</label>

我想要的功能是：

对于没有辅助技术的键盘用户来说，可以将其切换到信息图标上以显示弹出窗口。
对于屏幕阅读器用户（移动或台式机）而言，让其具有重点的输入读取弹出框的内容，而无需额外跳转到图标本身，然后将图标从屏幕阅读器焦点中隐藏起来。

我已经在popover div上用tabindex解决了＃1的问题，并通过将输入和popover与aria-described链接起来并用aria-hidden隐藏了图标来解决了＃2。

我的问题是，特别是在NVDA上，它仍将重点放在信息图标上，并以“空白”的形式读出。如果我删除了隐藏的咏叹调，它将正确地聚焦和读取内容，但是这会导致用户不必要的额外聚焦项目。

这仅发生在NVDA上，在我尝试过的所有浏览器（IE，Edge，Firefox，Chrome）上。有没有人建议解决这个问题？

谢谢！

Answer 1

您尝试过JAWS吗？无论如何，我不认为这与任何特定的屏幕阅读器有关。只要您可以在其上按Tab键并以这种方式获得焦点，屏幕阅读器就会尝试读取它。我建议您让“键盘用户”使用其指点设备：如果您有一个具有多个输入的表单，那么从一个输入到另一个输入之间的制表符就没有人真正想要跳至该元素了，甚至更多。欢迎您跳过此类信息元素。

因此：只需对图标的tabindex使用-1。具有指针设备的用户将能够对其进行聚焦，而屏幕阅读器实际上会将其跳过，因为它不在选项卡导航的范围内。

NVDA忽略Boostrap Popover的“隐藏的信息”-读为“空白”

1 个答案: