0

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

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

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

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

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

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

我尝试像这样添加 customAttr ：

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

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

4

1 回答 1

1

它似乎custom-attr对你没有帮助，因为它不允许你添加任何你想要的 attr - 函数返回的任何东西都只是作为data-vss-custom-attr属性值放置

任何具有类似功能的体面的 Vue 库都可以提供slot自定义菜单项的呈现，但这不是. 另外，它似乎没有被维护很长时间，所以也许是时候寻找替代品了....

于 2021-06-02T19:09:20.050 回答