NVDA忽略带有Boostrap Popover的“隐藏的aria-读取”为空白”

Question

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

https://codepen.io/gspan/pen/qBEPZOY

<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>

我想要的功能是：

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

我已经在popover div上用tabindex处理了＃1，并通过将输入和弹出窗口与aria-described链接起来并隐藏了带有aria-hidden的图标来解决了＃2。

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

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

提前感谢！

Answer 1

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

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