屏幕阅读器无法阅读“vue-search-select”的选项

如何解决屏幕阅读器无法阅读“vue-search-select”的选项

我继承了一个 vuejs 项目。使用屏幕阅读器作为辅助设备的人抱怨他们的屏幕阅读器无法阅读由 vue-search-select 制作的下拉菜单中的选项。以下是重现该问题的方法：

1. 安装屏幕阅读器，例如 NVDA。
2. 打开 NVDA 屏幕阅读器。
3. 转到https://vue-search-select.netlify.app/#/model
4. 标签到搜索文本字段。
5. 确认下拉结果出现。
6. 按向下箭头键可聚焦于任何搜索结果项。
7. 确认 NVDA 说的是“空白”一词，而不是实际读出所选项目的内容。

这是一个 10 秒的剪辑，演示了 7 步中的第 3 步。

https://www.youtube.com/watch?v=Nxx1k1oKETI

如何修改 vue-search-select 以便在第 7 步中，屏幕阅读器将读出所选项目的内容，而不是读出“空白”一词？

现在，作为临时解决方案，我正在尝试编写一个 setTimeout 函数，该函数将自动添加适当的元数据以强制屏幕阅读器读出内容。但我不确定这种方法会有多成功。我更喜欢vue-search-select惯用的方法。

---

我尝试像这样添加 customAttr：

<model-select :custom-attr="ariaAttrs" />
function ariaAttrs() {
   return function() { return '" aria-label="hello" tabindex="0'; }
}

虽然属性确实出现在我的开发者控制台的检查器中，但我的屏幕阅读器仍然没有读出选项。

解决方法

似乎 custom-attr 不会帮助你，因为它不允许你添加任何你想要的属性 - 任何函数返回 is just placed 作为 data-vss-custom-attr 属性的值

任何具有类似功能的不错的 Vue 库都会提供一个 slot 来自定义菜单项的呈现，但是这个 does not。此外，它似乎不会维护很长时间，所以也许是时候寻找替代品了....