Bootstrap 4 NVDA忽略”的含义；“隐藏的咏叹调”；使用Boostrap Popover-读取；“空白”；

我正在努力提高网站的可访问性，我遇到了一些问题，使手机（画外音和对讲）和桌面使用NVDA都能正常工作。我正在尝试使用Bootstrap Popover小部件进行文本输入，如下所示：

名称

我想要的功能是：

键盘用户（无辅助技术）可以通过选项卡切换到信息图标，以便显示弹出框

对于屏幕阅读器用户（移动或桌面），让焦点输入读取popover的内容，而不需要额外跳转到图标本身，然后将图标隐藏在屏幕阅读器焦点之外

我在popover div上用tabindex处理了#1，通过将输入和popover与aria describedby链接，并用aria hidden隐藏图标，处理了#2

我的问题是，特别是在NVDA上，它仍将关注信息图标，并将其读为“空白”。如果我删除隐藏的aria，它将正确地聚焦和读取内容，但这样会导致用户需要通过一个不必要的额外聚焦项目

这只发生在NVDA上，在我尝试过的每一款浏览器上（如Edge、Firefox、Chrome）。有人有什么建议可以绕过这个问题吗

---

提前谢谢

你试过下巴吗？无论如何，我不认为这与任何特定的屏幕阅读器有关。只要你能用tab键点击它，它就能以这种方式接收焦点，屏幕阅读器就会尝试读取它。我建议你让“键盘用户”使用他的指针设备：实际上没有人会想要切换到这样的元素，更重要的是，如果你有一个具有多个输入的表单，那么不需要切换到这样的信息元素就可以从一个输入切换到下一个输入

---

所以：只需对图标上的tabindex使用-1即可。使用定点设备的用户将能够聚焦它，而屏幕阅读器实际上将跳过它，因为它将超出选项卡导航的范围。

JAWS与VoiceOver和Talkback功能一样正常。只有NVDA以这种方式工作，这仍然需要得到支持。我们还需要支持那些只使用选项卡导航而没有屏幕阅读器或指针设备的用户，这些设备将无法与tabindex=“1”一起使用@Nihil然后与NVDA开发人员联系并打开一个票证。@Nihil检查：它看起来与动态创建的元素相关。那一个没有隐藏的咏叹调！

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